[UIKit] : Scroll View content 페이지 넘기기 (page Control 사용)

아래 영상처럼 Scroll view 를 사용해서 내용들을 페이지를 넘기듯이 넘겨보자!

주로 예시를 들면 베너에 활용할 수 있을 것이다.

 

우선 UIScrollView 와 UIPageControl 들을 생성해주자 

생성과 동시에 frame 도 정해주자

class ViewController: UIViewController{
    let scrollView : UIScrollView = {
        let scrollView = UIScrollView()
        //isPagingEnabled를 설정해주어야 페이지를 넘기듯이 넘기듯이 넘길 수 있음 -- 중요
        scrollView.isPagingEnabled = true
        return scrollView
    }()
    
    let pageControl : UIPageControl = {
        let pageControl = UIPageControl()
        //현재 페이지가 어떤 페이지인지 확인하는 동그라미 바 설정
        pageControl.pageIndicatorTintColor = .lightGray
        pageControl.currentPageIndicatorTintColor = .black
        return pageControl
    }()    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(scrollView)
        view.addSubview(pageControl)
        configure()
    }
    private func configure(){
    }
    
    //frame을 설정해줌으로써 View에 Layout들을 배치해줬다
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        scrollView.frame = view.bounds
        pageControl.frame = CGRect(x: view.frame.width/2 - 200, y: view.frame.height - 100, width: 400, height: 20)
    }
}

위 코드처럼 반드시 scrollView의 isPagingEnabled 를 설정해주자!

그래야 일반적인 스크롤뷰가 아닌 페이지를 넘길 수 있음!

 

 

이제 확인을 위해 Scroll View 안에 색이 있는 UI View 들을 추가해주자  

private func configure(){
        for x in 0..<3{
            let uiViewWidth = view.frame.width
            //scrollView 속 UIView 들이 이어저야하기 때문에 X 좌표를 정해줌
            let xPos = uiViewWidth * CGFloat(x)
            let uiView = UIView(frame: CGRect(x: xPos, y: 0, width: uiViewWidth, height: view.frame.height))
            //확인을 위해 색을 정해준다
            switch x {
            case 0: uiView.backgroundColor = .red
            case 1: uiView.backgroundColor = .blue
            case 2: uiView.backgroundColor = .yellow
            default:
                return
            }
            scrollView.addSubview(uiView)
            //scrollView의 크기를 정해준다
            scrollView.contentSize.width = uiViewWidth * CGFloat(x + 1)
        }
        //pageControl의 점 개수를 정해준다
        pageControl.numberOfPages = 3
 }

configure를 이해했다면 Scroll View delegate 를 설정해주고 아래 함수를 작성하자

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let value = scrollView.contentOffset.x/scrollView.frame.size.width
        pageControl.currentPage = Int(round(value))
    }

Scroll View를 스크롤 했을때 pageControl 의 점이 바뀌는 것을 볼 수 있다

 

 

 

전체코드

//
//  ViewController.swift
//  BlogCode
//
//  Created by Mac Book Pro on 2022/08/18.
//

import UIKit

class ViewController: UIViewController, UIScrollViewDelegate {
    let scrollView : UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.isPagingEnabled = true
        return scrollView
    }()
    
    let pageControl : UIPageControl = {
        let pageControl = UIPageControl()
        pageControl.pageIndicatorTintColor = .lightGray
        pageControl.currentPageIndicatorTintColor = .black
        return pageControl
    }()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(scrollView)
        view.addSubview(pageControl)
        scrollView.delegate = self
        
        configure()
    }
    
    private func configure(){
        for x in 0..<3{
            let uiViewWidth = view.frame.width
            let xPos = uiViewWidth * CGFloat(x)
            let uiView = UIView(frame: CGRect(x: xPos, y: 0, width: uiViewWidth, height: view.frame.height))
            switch x {
            case 0: uiView.backgroundColor = .red
            case 1: uiView.backgroundColor = .blue
            case 2: uiView.backgroundColor = .yellow
            default:
                return
            }
            scrollView.addSubview(uiView)
            scrollView.contentSize.width = uiViewWidth * CGFloat(x + 1)
        }
        pageControl.numberOfPages = 3
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        scrollView.frame = view.bounds
        pageControl.frame = CGRect(x: view.frame.width/2 - 200, y: view.frame.height - 100, width: 400, height: 20)
    }
    
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let value = scrollView.contentOffset.x/scrollView.frame.size.width
        pageControl.currentPage = Int(round(value))
    }
    
}