[iOS] Container View Controller 란?

1차 수정: 21.09.30

 

안녕하세요 🐶

이번 시간에는 ViewController 의 종류 중 하나인

Container View Controller 에 대해서 공부해보겠습니다.

 

그럼 시작할게요🔥

---

 

우선 View Controller 를 역할로 구분하자면 크게 두 가지 종류가 있습니다!

 

첫번째는 Content View Controller 로서,

기본적으로 뷰 컨트롤러에게 기대하는 역할( 앱 내 데이터를 화면에 보여주는 등) 을 수행하는 뷰 컨트롤러입니다.

일반적으로 UIViewController 를 직접 서브클래싱하여 커스텀해서 사용하는 경우입니다.

class MyHomeViewController: UiViewController { ... }

 

 

두번째는 이번 시간에 다룰 Container View Controller 로서,

여러 요소를 조합한 인터페이스를 구성하고 ( composite interface )

 

보통 직접 무언가를 보여주는 역할은 없으며,

뷰 컨트롤러 간에 부모-자식 관계를 형성하여 자신만의 방식으로 자식을 관리하는 역할을 맡는 뷰 컨트롤러 입니다.

간단하게 생각해보면, Container View Controller 들이 Content View Controller 들을 관리한다고 생각하면 되겠네요!

 

그런데 이미 UIKit 에서 기본적으로 제공하는 System Container View Controller 들이 있습니다.

UITabBarController, UINavigationController, UIPageViewController 등이 그것들입니다.

 

container view controller 라고 명시적으로 적혀 있다.

 

이 때 Contianer View Controller 들의 특징이 있습니다.

자식 View Controller 들의 참조를 가지고 관리한다는 것인데요.

보통 아래와 같은 방식으로 자식 뷰컨트롤러에 접근할 수 있고, 자식 관계를 새로 설정해 줄수도 있습니다.

 

 

그런데 왜 굳이 이런 부모-자식 관계를 만들어서 관리해주는지에 대한 의문이 생깁니다.

컨테이너는 왜 필요한 걸까요?

---

 

 

Container View Controller 는 왜 필요할까?

 

🟢  Navigation 로직 (라우팅) 을 분리하여 단일 책임원칙을 지키려는 시도이다.

" promote better encapsulation by separating out your content

from how you display that content onscreen"

 

MVC 패턴을 공부할 때

너무너무 많이 들어봤을 Massive View Cotroller 에 대해 아실거라고 생각합니다.

 

간단하게 뷰 컨트롤러가 너무 많은 역할(책임)을 하고 있다는 것인데, 다음과 같은 코드를 한번 볼게요.

 

  func showChildVC() {
    // 뷰 컨트롤러를 직접 생성한다
    let childVC = ChildViewController()
	
    // 직접 의존성 주입도 해준다
    childVC.someDedendency = SomeDependency()
	
    // 직접 화면에 표시도 해준다
    present(childVC, animated: true, completion: nil)
  }

 

위 코드는 아무 문제가 없다고 생각할 수 있지만, 이 메서드 안에서도 뷰 컨트롤러는 많은 책임을 가지고 있습니다.

 

1. 뷰 컨트롤러를 직접 생성하여 생명주기에 관려하고

2. 의존성을 주입해주고

3. 화면에 띄워주는 역할까지

 

책임이 많으면 유지보수와 테스트가 힘들어집니다.

 

따라서 화면에 표시해주는 책임을 다른 객체로 분리해 낸 것이 컨테이너 뷰 컨트롤러입니다.

 

 

시스템 컨테이너 뷰 컨트롤러 중 하나인

 

Navigation Controller 를 예로 들면

 

컨테이너 뷰 컨트롤러가 자식 뷰 컨트롤러에 대한 화면 전환을 어떤 방식으로 하는지 볼 수 있습니다.

 

   @IBAction func pushSecond(_ sender: Any) {
   
    /* 여기는 secondVC 를 생성하는 코드가 들어갑니다 */
    
    // 직접 다음 화면을 표시하지 않고, navigationController 에 의존한다
    navigationController?.pushViewController(secondVC, animated: true)
   }

 

present(_:animated:completion:) 과 같은 화면 처리 메서드를 직접 호출하지 않고,

navigationController 에게 화면에 표시할 VC를 전달하여 트랜지션과 화면 표시를 맡기고 (의존하고) 있습니다.

 

pushViewController(_:animated:) 보다도 저는 show(_:sender:) 를 좋아하는데요...

좀 더 추상화된 메서드라고 보시면 되고, 자세한 동작은 문서를 찾아보시면 좋을 것 같습니다.

 

아무튼 저는 저런 방식이 완벽하다고 생각하지는 않습니다.

여전히 뷰 컨트롤러를 직접 생성하고, 의존성 주입도 해주는 코드가 필요하니까요.

 

🟣 뷰 자체의 구역을 분리하여 유지보수가 용이해진다.

 

컨테이너 뷰컨의 루트 뷰를  몇 개의 구역으로 나누어

구역별로 특성에 맞게 각각의 뷰 컨트롤러를 두고 따로 관리하면

책임도 분리되고 유지보수도 좀 더 쉬워 질 것입니다.

 

위의 이미지는 UIKit 이 제공하는 UISplitViewController 로서

루트 뷰를 왼쪽과 오른쪽 두개의 구역으로 나누어 구역별로

다른 책임을 가지는 자식 뷰컨트롤러들을 관리합니다.

 

아이패드에서 쉽게 볼 수있는 UI 구성인데, 보통 왼쪽에 Table VC, 오른쪽에 Content VC 가 들어가는 것 자주 보셨죠?

 

 

---

 

 

UIContainerViewController 가 공식문서에 없어요 🤔

 

애플 공식문서에서 찾아보면 아시겠지만, UIContainerViewController 와 같은 클래스는 없습니다.

 

Container View Controller 는 하나의 개념이며, 기존에 존재하는 클래스들을 이용해서 커스텀 구현해야 합니다.

 

UIViewController 를 서브클래싱하여 사용할 수 있습니다.

 

" A custom UIViewController subclass can also act as a container view controller. "

 

만약 커스텀 하지 않고 쉽게 사용하고 싶다면,

UINavigationController, UITabBarControler 와 같이 System Container View Controller 를 사용해야합니다.

 

이 클래스들은 클래스만의 방식대로 하위 뷰 컨트롤러들을 관리합니다.

 

각 컨테이너 VC 들의 특성들을 이해하고 용도에 맞게 사용하면 됩니다.

대표적인 시스템 컨테이너 뷰컨트롤러인 네비게이션 컨트롤러의 예시 ( 기본시계 앱 )

 

 

커스텀 컨테이너 뷰 컨트롤러의 인터페이스를 구성하는 것은 커스텀하는 사람의 몫입니다.

 

예를 들어 자식 뷰 컨트롤러의 화면을 그대로 보여줄 수도 있고,

원하는 레이아웃을 설정해서 보여줄수도 있고 ( 예를 들어 화면 반반)

혹은 미리 구현된 container view 를 사용해볼 수도 있습니다.

---

 

Container View 는 또 뭔가요

 

"  A container view is a proxy view that stands in for the content of a child view controller. "

 

컨테이너 뷰는 인터페이스 빌더에서만 추가할 수 있는 일종의 프록시 뷰입니다.

컨테이너 뷰는 오브젝트 라이브러리에서만 찾아서 사용할 수 있습니다.

 

아래 사진을 보시면

왼쪽의 씬에 추가한 Container View 는  

기존 VC 와 새로운 오른쪽의 VC 로 이어진 Embed Segue 로의 연결을 통하여 컨텐츠를 표시합니다.

그래서 만약 왼쪽 VC 참조 얻으려면 prepare(forSegue:~) 에서 전달해야함

 

즉 왼쪽의 Container View 영역에 오른쪽의 VC 의 뷰 계층을 보여주는 것이죠!

 

뷰 컨트롤러와 연결된 Embed Segue 을 보실 수 있습니다

 

얘는 공식문서도 없음;;;;;;;;;;

Container View 는 공식문서가 없다

 

---

 

Custom Container View Controller 구현

 

기본적인 컨테이너 뷰 컨트롤러의 동작을 수행하는 코드는 다음과 같습니다.

주석으로 설명을 첨부하였습니다.

// 현재의 뷰 컨트롤러에 자식 뷰 컨트롤러를 추가하는 코드
let storyboard = UIStoryboard(name: "Main", bundle: .main)
if let viewController = storyboard.instantiateViewController(identifier: "imageViewController")
                                    as? ImageViewController {

   // 핵심 메소드로서, 뷰 컨트롤러에 부모-자식 관계를 형성한다
   addChild(viewController)
   
   // 자식 뷰 컨트롤러의 루트 뷰를 현재 뷰의 뷰 계층에 추가하는 코드
   view.addSubview(viewController.view)
            
   // 제약 생성
   onscreenConstraints = configureConstraintsForContainedView(containedView: viewController.view,
                             stage: .onscreen)
   NSLayoutConstraint.activate(onscreenConstraints)
     
   // 화면 전환이 완료되었다면 자식 뷰 컨트롤러의 메소드를 호출하여 알려준다.
   viewController.didMove(toParent: self)
}

이 부분에 대한 자세한 내용은 아래 첨부된 링크를 확인해보면 됩니다

---

 

 

 

끝!

---

참고자료: https://developer.apple.com/documentation/uikit/view_controllers/creating_a_custom_container_view_controller/