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)
}
}
결과
