Container View Controllers

Seoyoung Lee·2022년 3월 1일

iOS

Professional iOS

목록 보기

7/12

What are container view controllers?

Container View Controllers는 다른 뷰 컨트롤러들을 하나의 working interface로 결합해주는 뷰 컨트롤러이다.

Container View Controller 사용 예시
- Tab Bar controller
- Navigation controller

How do UINavigationController work?

내비게이션 컨트롤러에서 뷰 컨트롤러를 present 하는 방법
- push & pop
  - 스택 사용
- present & dismiss
  - 스택 사용 x
  - make full screen take over
  - 모달 뷰 컨트롤러

How do UITabBarControllers work?

각 탭은 자신만의 뷰 컨트롤러를 포함한다.
포함되는 뷰 컨트롤러는 어떤 종류이든 상관이 없다.
- 어떤 뷰 컨트롤러는 내비게이션 컨트롤러를 포함할 수도 있고, 아닐 수도 있고..

How does a UIPageViewController work?

swappable
page view controller에 포함하고 싶은 뷰 컨트롤러들을 저장하는 배열
setViewControllers 메소드에서 화면에 보여주고 싶은 뷰 컨트롤러를 지정
현재 뷰 컨트롤러의 child로 추가하는 것이 가능하다.

Adding the tab bar

UIViewController+utils extension 추가하기

utils 폴더에 새 스위프트 파일을 만들고 다음과 같이 코드를 작성한다.

import UIKit

extension UIViewController {
    func setStatusBar() {
        let statusBarSize = UIApplication.shared.statusBarFrame.size // deprecated but OK
        let frame = CGRect(origin: .zero, size: statusBarSize)
        let statusbarView = UIView(frame: frame)
        
        statusbarView.backgroundColor = appColor
        view.addSubview(statusbarView)
    }
    
    func setTabBarImage(imageName: String, title: String) {
        let configuration = UIImage.SymbolConfiguration(scale: .large)
        let image = UIImage(systemName: imageName, withConfiguration: configuration)
        tabBarItem = UITabBarItem(title: title, image: image, tag: 0)
    }
}

setStatusBar : status bar의 색상 설정
setTabBarImage : 탭 바의 아이콘 이미지 설정

tab bar controller 만들기

MainViewController.swift 파일을 만들고 아래와 같이 코드를 작성한다.

import UIKit

class MainViewController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        setupTabBar()
    }

    private func setupViews() {
        let summaryVC = AccountSummaryViewController()
        let moneyVC = MoveMoneyViewController()
        let moreVC = MoreViewController()

        summaryVC.setTabBarImage(imageName: "list.dash.header.rectangle", title: "Summary")
        moneyVC.setTabBarImage(imageName: "arrow.left.arrow.right", title: "Move Money")
        moreVC.setTabBarImage(imageName: "ellipsis.circle", title: "More")

        let summaryNC = UINavigationController(rootViewController: summaryVC)
        let moneyNC = UINavigationController(rootViewController: moneyVC)
        let moreNC = UINavigationController(rootViewController: moreVC)

        summaryNC.navigationBar.barTintColor = appColor
        hideNavigationBarLine(summaryNC.navigationBar)
        
        let tabBarList = [summaryNC, moneyNC, moreNC]

        viewControllers = tabBarList
    }
    
    private func hideNavigationBarLine(_ navigationBar: UINavigationBar) {
        let img = UIImage()
        navigationBar.shadowImage = img
        navigationBar.setBackgroundImage(img, for: .default)
        navigationBar.isTranslucent = false
    }
    
    private func setupTabBar() {
        tabBar.tintColor = appColor
        tabBar.isTranslucent = false
    }
}

class AccountSummaryViewController: UIViewController {
    override func viewDidLoad() {
        view.backgroundColor = .systemGreen
    }
}

class MoveMoneyViewController: UIViewController {
    override func viewDidLoad() {
        view.backgroundColor = .systemOrange
    }
}

class MoreViewController: UIViewController {
    override func viewDidLoad() {
        view.backgroundColor = .systemPurple
    }
}