Ios AutoLayout 6 - UIButton 이벤트와 UIPageControl속성

Ios AutoLayout 6 - UIButton 이벤트와 UIPageControl속성

● 들어가기 전

이번 포스팅에서는 이전 포스팅에서 만들었던 UIButton에 이벤트를 걸어서 "이전버튼"을 누르면 이전페이지로 이동시키고, "다음버튼"을 누르면 다음 버튼으로 이동시키는 코드를 작성해보자. 그리고 페이지가 이동할때 UIPageControl의 현재페이지를 보여주는 색깔점 표시도 변경시켜보자.

● 실습순서

1. ViewController.swift에 있는 UIButton객체와 UIPageControl객체와 autolayout을 설정한 함수 가져오기

2. 버튼에 이벤트 걸어주기

3.pageControl 설정

4.scrollViewWillEndDragging 함수 구현

● ViewController에 있는 객체들과  autolayout 설정 함수 가져오기

ViewController.swift에 있는 UIButton객체와 UIPageControl객체와 autolayout을 설정한 함수를 SwipingController.swift로 가져온다. 객체는 pages 변수 아래에 두고, setupBottomControls()함수호출은 viewdidLoad() 함수안에서 해주고 setupBottomControls(){...} 는 제일 밑에다가 위치시킨다. 맨 아래 전체 소스 코드 참고.

● 버튼에 이벤트 걸어주기

버튼객체 속성에 addTarget(self, action: #selector(handeNext), for: .touchUpInside) 함수를 이용해서 이벤트를 걸어준다. 버튼이 눌리면 handeNext 함수가 호출이 되고 그 내부에 있는 로직이 실행된다. 안에 로직은 현재페이지와 전체페이지 수를 이용해서 다음 페이지를 호출시커거나 이전 페이지를 호출시키는 로직이다. 간단하게 주석을 달아 놓았으니 print() 함수를 이용해서 찍어보자.

 //이전 버튼
    private let preButton :UIButton = {
        let preBtn = UIButton(type:.system)
        preBtn.setTitle("이전", for: .normal)
        preBtn.translatesAutoresizingMaskIntoConstraints = false
        preBtn.setTitleColor(.gray, for: .normal)
        preBtn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
        preBtn.addTarget(self, action: #selector(handlePre), for: .touchUpInside)
        return preBtn
        
    }()
    @objc func handlePre(){
        print("aa")
        //print(pageControl.currentPage+1)//1
        //print(pages.count-1)//2
        
        let nextIndex = max(pageControl.currentPage - 1, 0) //1
        let indexPath = IndexPath(item: nextIndex, section: 0) //[0,1]
        print(nextIndex) //1 , 0
        print(indexPath)// [0,1] [0,0]
        pageControl.currentPage = nextIndex //1
        collectionView?.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
        //print(nextIndex)
    }
    
    //다음 버튼
    private let nextButton :UIButton = {
        let nxtBtn = UIButton(type:.system)
        nxtBtn.setTitle("다음", for: .normal)
        nxtBtn.translatesAutoresizingMaskIntoConstraints = false
        nxtBtn.setTitleColor(.mainPink, for: .normal)
        nxtBtn.titleLabel?.font = UIFont.boldSystemFont(ofSize: 14)
        nxtBtn.addTarget(self, action: #selector(handeNext), for: .touchUpInside) //터치가 이루어졌을때 handeNext 함수 호출
        return nxtBtn
    }()
    
   @objc func handeNext(){
        print("next")
        //print(pageControl.currentPage+1)//1
        //print(pages.count-1)//2
        //다음페이지 번호 구하기 - min 제일 작은값을 가져온다. 참고로 currentPage는 0 인 상태다
        let nextIndex = min(pageControl.currentPage + 1, pages.count - 1) //1
        let indexPath = IndexPath(item: nextIndex, section: 0) //[0,1]
        print(nextIndex)
        print(indexPath)
        pageControl.currentPage = nextIndex //1
        collectionView?.scrollToItem(at: indexPath, at: .centeredHorizontally, animated: true)
        //print(nextIndex)
    }
    
    //페이지 컨트롤러
    private lazy var pageControl: UIPageControl = {
        let pc = UIPageControl()
        pc.translatesAutoresizingMaskIntoConstraints = false
        pc.currentPage = 0
        //let a = pages.count
        pc.numberOfPages = pages.count
        pc.currentPageIndicatorTintColor = .mainPink
        pc.pageIndicatorTintColor = UIColor(red: 249/255, green: 207/255, blue: 224/255, alpha: 1)
        return pc
    }()

● PageControl 속성 설정

그리고 pageControl객체안에서 numberOfPages 속성을 pages.count를 이용해서 동적으로 바꾸어준다. 클로저 안에서 위 배열을 참조하려면 클로저 변수 앞에 lazy var 를 붙여줘야 한다.(중요)

    //페이지 컨트롤러
    private lazy var pageControl: UIPageControl = {
        let pc = UIPageControl()
        pc.translatesAutoresizingMaskIntoConstraints = false
        pc.currentPage = 0
        //let a = pages.count
        pc.numberOfPages = pages.count
        pc.currentPageIndicatorTintColor = .mainPink
        pc.pageIndicatorTintColor = UIColor(red: 249/255, green: 207/255, blue: 224/255, alpha: 1)
        return pc
    }()

● scrollViewWillEndDragging 함수 구현

이 함수는 cell을 손가락으로 드래그 한 후 끝났을때 위치를 인자 값으로 넘겨준다. 

이때 targetContentOffset.pointee.x 값을 활용해서 pageControl.currentPage의 값을 실시간으로 바뀌게 구해준다.

//오른쪽으로 스크롤 했을 때 - 위치로 현재 페이지 구해주기
    override func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
        let x = targetContentOffset.pointee.x
        pageControl.currentPage = Int(x / view.frame.width)
        
    }

● 마무리

이번 포스팅에서는 UIButton 이벤트와 UIPageControl속성에 대해서 간단하게 알아보았다. UIButton 이벤트를 구현할때 반드시 호출되는 함수 앞에 @objc를 붙여주는 것을 잊지말자. 다음은 Ios AutoLayout의 마지막 포스팅으로 아이폰을 엎으로 눕혔을때 발생하는 이슈를 처리하는 법을 알아보도록 하자.