iOS에서 Pager Tab Strip 구현하기

Pager Tab Strip이란?

  • 정확한 명칭이 이게 맞는지는 모르겠으나, 아무튼 여기를 보면 뭘 말하는지 바로 이해할 수 있다.
  • 안드로이드의 경우 기본적으로 제공하는 것 같은데, 아무튼 디자이너가 iOS에서도 이런 형식으로 요구하는 경우가 있다.
  • Storyboard에서는 Container를 바로 사용하면 쉽지만 오늘은 코드로 하는 방법을 알아보려고 한다.
  • 기본적으로 Container View Controller가 있고 이 Container View Controller가 Page될 View Controller를 가지고 있는 형태다.
  • 바로 알아보자.

Container ViewController

  • 이렇게 간단하게 좌우 이동할 Button과 View Controller를 품을 Scroll View를 만든다.

import UIKit

class ContainerViewController: UIViewController {
    // MARK: - Properties
    // MARK: IBOutlet
    
    @IBOutlet weak var scrollView: UIScrollView!
    
    // MARK: - Methods
    // MARK: View Life Cycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    
    // MARK: IBAction
    
    @IBAction func didTapLeftButton(_ sender: UIButton) {
        
    }
    
    @IBAction func didTapRightButton(_ sender: UIButton) {
        
    }
    
}

Left & Right View Controller

  • LeftViewController와 RightViewController는 아주 간단하게 버튼만 넣어본다.
class LeftViewController: UIViewController {
    // MARK: - Methods
    // MARK: View Life Cycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func didTapPrintButton() {
        print("좌")
    }

}

class RightViewController: UIViewController {
    // MARK: - Methods
    // MARK: View Life Cycle
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func didTapPrintButton() {
        print("우")
    }
    
}

Container View Controller에서 Left & Right View Controller 만들기

  • ContainerViewController에 다음 코드를 추가한다.
class ContainerViewController: UIViewController {
    ...
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.scrollView.contentSize.width = self.view.frame.width * 2

        // 추가
        // Left View Controller 생성
        guard let leftVC = self.storyboard?.instantiateViewController(withIdentifier: String(describing: LeftViewController.self)) as? LeftViewController else { return }
        // Left View Controller를 Child View Controller로 지정
        self.addChild(leftVC)
        // Left View Controller의 View만 가져오기
        guard let leftVCView = leftVC.view else { return }
        // Left View Controller View의 Frame 지정
        leftVCView.frame = CGRect(x: 0, y: 0, width: self.scrollView.frame.width, height: self.scrollView.frame.height)
        // Scroll View에 Left View Controller의 View 넣기
        self.scrollView.addSubview(leftVCView)
        // 이제 Left View Controller가 Container View Controller 앞으로 올라왔기 때문에 didmove(toParent:)를 실행
        leftVC.didMove(toParent: self)
        
        // Right View Controller도 동일.
        guard let rightVC = self.storyboard?.instantiateViewController(withIdentifier: String(describing: RightViewController.self)) as? RightViewController else { return }
        self.addChild(rightVC)
        guard let rightVCView = rightVC.view else { return }
        rightVCView.frame = CGRect(x: self.view.frame.width, y: 0, width: self.scrollView.frame.width, height: self.scrollView.frame.height)
        self.scrollView.addSubview(rightVCView)
        rightVC.didMove(toParent: self)
    }
    
    // MARK: IBAction
    
    @IBAction func didTapLeftButton(_ sender: UIButton) {
        self.scrollView.setContentOffset(CGPoint.zero, animated: true)
    }
    
    @IBAction func didTapRightButton(_ sender: UIButton) {
        self.scrollView.setContentOffset(CGPoint(x: self.scrollView.frame.width, y: 0), animated: true)
    }
}

결과