[iOS - swift] 1. ContainerView 활용 방법 - UINavigationView와 View hierarchy, layering

1. ContainerView 활용 방법 - UINavigationView와 View hierarchy

2. ContainerView 활용 방법 - UIView를 present, dismiss 트랜지션 애니메이션 구현 방법

view hierarchy: VC1 < VC2, VC3 < VC1위에 떠있는 버튼

• ViewController지만, 이전 화면을 덮지 않는 view hierarchy를 사용하고 싶은 경우 해결
• VC1위에 UINavigationController가 있고 이 위에 VC1 버튼이 있는 형태
• 보통 VC1위에 present 시켜서 새로운 VC를 띄우지만 위와같이 VC1위에 가장 상위에 있는 버튼이 존재하고, 그 바로 아래에서 새로운 UINavigationController가 존재하는 형태

구현 아이디어

• VC1위에 UINavigationController의 view와 VC1위에 떠있는 버튼 두 개 사이의 hierarchy만 신경쓰면 구현 완료
• VC1에서 UINavigationController를 present시키지 말고, VC1.view.addSubveiw(navigationController.view)를 사용하여 auto layout으로 뷰 위치 정의

구현

• VC2, VC3 준비
  • view의 상만 다르고 VC2에는 버튼이 있어서, 버튼을 탭하면 아래처럼 push 시키는 코드가 존재

  // VC2.swift
  
  @objc private func didTap() {
    let vc = VC3()
    self.navigationController?.pushViewController(vc, animated: true)
  }

• 맨 아래에 있는 ViewController 준비

import UIKit

class ViewController: UIViewController {
}

• VC1 title을 표시할 label과 그 위에 존재하는 VC2() 준비 맨 위에 있는 button 준비

  private let titleLabel: UILabel = {
    let label = UILabel()
    label.text = "VC1"
    label.translatesAutoresizingMaskIntoConstraints = false
    label.textColor = .black
    return label
  }()
  private let vc2 = VC2()
  lazy var nav = UINavigationController(rootViewController: self.vc2)
  private let button: UIButton = {
    let button = UIButton()
    button.setTitle("VC1 위에 떠있는 버튼", for: .normal)
    button.setTitleColor(.red, for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false
    return button
  }()

• present 시키지 않고 navigationController의 view를 띄우기 위해서 computed property 준비

  private var myView: UIView {
    self.nav.view
  }

• 레이아웃 정의
  • button이 가장 위에 위치해야하므로 addSubview할때 button을 가장 마지막에 추가

  override func viewDidLoad() {
    super.viewDidLoad()
    self.myView.translatesAutoresizingMaskIntoConstraints = false
    self.view.addSubview(self.titleLabel)
    self.view.addSubview(self.myView)
    self.view.addSubview(self.button)

• 오토레이아웃

    NSLayoutConstraint.activate([
      self.titleLabel.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 50),
      self.titleLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
    ])
    NSLayoutConstraint.activate([
      self.myView.leftAnchor.constraint(equalTo: self.view.leftAnchor),
      self.myView.rightAnchor.constraint(equalTo: self.view.rightAnchor),
      self.myView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
      self.myView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 300),
    ])
    NSLayoutConstraint.activate([
      self.button.bottomAnchor.constraint(equalTo: self.view.bottomAnchor, constant: -150),
      self.button.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
    ])
  }

* 전체 코드: https://github.com/JK0369/ExPresent