페이지 컨트롤

  • 페이지 컨트롤이란? 쉽게 말해 스크롤 뷰에서 컨텐츠의 갯수를 제공함과 동시에 사용자의 위치를 나타내는 기능을 한다.
  • 페이지 컨트롤은 수학적인 계산이 필요하며, 스크롤 뷰와 연동되지 않기 때문에 코드로 구현을 해야한다.
  • 코드 구현은 다음과 같다.
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    @IBOutlet weak var pageControl: UIPageControl!
    
    var pageNumber = [UIView]()
    
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        scrollView.contentSize = CGSize(width: view.frame.size.width * 3, height: view.frame.size.height)
        
        let greenView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.size.width, height: view.frame.size.height))
        greenView.backgroundColor = UIColor.green
        scrollView.addSubview(greenView)
        
        let blueView = UIView(frame: CGRect(x: greenView.frame.size.width, y: 0, width: view.frame.size.width, height: view.frame.size.height))
        blueView.backgroundColor = UIColor.blue
        scrollView.addSubview(blueView)
        
        let redView = UIView(frame: CGRect(x: greenView.frame.size.width + blueView.frame.size.width, y: 0, width: view.frame.size.width, height: view.frame.size.height))
        redView.backgroundColor = UIColor.red
        scrollView.addSubview(redView)
        
        pageNumber.append(greenView)
        pageNumber.append(blueView)
        pageNumber.append(redView)
        
        pageControl.numberOfPages = pageNumber.count
        pageControl.pageIndicatorTintColor = UIColor.black
        pageControl.currentPageIndicatorTintColor = UIColor.white
    }
}

extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let pageWidth = scrollView.bounds.width
        let pageFraction = scrollView.contentOffset.x / pageWidth
        pageControl.currentPage = Int(round(pageFraction))
    }
}
  • 페이지 컨트롤의 현재 페이지를 구하는 공식은 유저의 수평 포지션을 구한 후 전체 스크롤 뷰의 넓이로 나누면 된다.
  • 결과는 다음과 같다.


  • 페이지 컨트롤의 페이지 갯수, 컬러 등은 코드와 스토리보드를 통해 설정이 가능하다.
  • 아래는 코드와 스토리보드를 통해 설정할 수 있는 방법을 각각 보여준다.