UITabBarController 구현
- 해당 클래스는 보통 그대로 사용되지만, 서브클래스될 수도 있다.
- 탭바 컨트롤러 인터페이스의 각 탭은 커스텀 뷰컨과 연관되어 있다.
- 유저가 특정한 탭을 선택하면 탭바 컨트롤러는 대응하는 뷰컨의 루트뷰를 표시한다.
- 사용자 탭은 항상 탭의 루트 뷰를 표시한다.
- 탭바 컨트롤러의 탭바 뷰에 직접적으로 접근해선 안 된다.
- 탭바 컨트롤러의 탭들을 설정하기 위해 각 탭의 루트 뷰를 제공하는 뷰컨을 viewControllers 속성에 할당함
- 뷰컨을 지정하는 순서에 따라 뷰컨이 탭 표시줄에 나타나는 순서가 결정됨
- 처음에 어떤 뷰컨을 선택했는지 나타내기 위해 selectedViewController 속성에 값 할당하기
* selectedIndex 속성으로 배열 인덱스로 뷰컨 선택할 수도 있음 - 탭바 컨트롤러의 뷰(상속받은 view 속성)를 앱 윈도우에 임베드하면, 탭바 컨트롤러는 해당 뷰컨을 자동으로 선택하고 그 내용을 표시한다.
- 탭바 아이템은 해당 뷰컨을 통해 구성된다.
- 탭바 아이템을 뷰컨과 연결하려면 UITabBarItem 클래스의 새 인스턴스를 만들고 뷰컨에 맞게 구성한 다음 이를 뷰컨의 tabBarItem 속성에 할당한다.
- 사용자가 탭바 인터페이스와 상호작용하면 탭바 컨트롤러 객체는 상호작요에 대한 알림을 델리게이트에 전송한다.
- 탭바 컨트롤러의 view는 탭바 뷰와 커스텀 컨텐츠가 포함된 뷰의 컨테이너일 뿐.
First Approach
- UITabBarController + 커스텀 탭바 이미지 사용
- 탭바 높이가 적절하지 않음
* tabBar frame 설정으로 조정 가능
- 앱 실행 후 다크모드 변경 시 이미지는 변경되지 않음
- 일반 이미지는 잘 변경되는데, 탭바아이템 이미지는 변경되지 않음
- iOS 버그 로 생각됨
- 스톱워치 이미지는 피그마 이미지에 문제가 있어 위치가 달라짐
- 탭 시 원하는 애니메이션 넣기 어려움
- (배경 원이 가운데서 커지며 나타나면 좋겠음)
- 위 문제들 중 상당수는 UITabBarController를 사용해도 해결 가능하지만, 원활한 다크모드 적용과 애니메이션 적용을 위해 커스텀 탭바 컨트롤러를 작성해볼 예정
Second Approach
- UIStackView로 탭바 만들기
- Custom Container VC 만들어 커스텀 탭바 컨트롤러 만들기
- 컨테이너 뷰컨 개념
- 컨테이너 뷰컨은 콘텐츠를 화면에 표시하는 방법과 컨텐츠를 분리해 더 나은 캡슐화를 촉진
- 다른 뷰컨을 표시해 화면에 정렬하고 이들 사이의 탐색을 처리
- 컨테이너 뷰컨은 하나 이상의 하위 뷰 컨트롤러의 뷰를 자체 뷰 계층구조에 통합해 복합적인 인터페이스를 관리
- 각 자식 뷰컨은 계속해서 자체 뷰 계층구조를 관리하지만, 컨테이너는 해당 자식 루트 뷰의 위치와 크기를 관리
- 인터페이스에 자식 뷰컨 추가하기
1. 컨테이너 뷰컨의 addChild 메소드 호출해 포함 관계 구성
2. 컨테이너의 뷰 계층구조에 하위 루트 뷰 추가
3. 하위 루트 뷰의 크기와 위치를 설정하는 제약조건 추가
4. 전환이 완료되었음을 알리기 위해 하위 뷰컨의 didMove(toParent) 메소드 호출
-
컨텐트에서 자식 뷰컨 제거하기
1. nil값을 사용해 willMove(toParent) 호출
2. 하위 루트 뷰에 대한 제약조건을 비활성화하거나 제거
3. 자식의 루트 뷰에서 removeFromSuperView() 호출해 뷰 계층구조에서 제거
4. 자식의 removeFromParent() 호출해 컨테이너-자식 관계 종료 -
UIContainerViewConteroller?
* 존재하지 않는 구현체이다. 컨테이너 뷰컨은 하나의 개념이며, 기존에 존재하는 클래스들을 이용해 커스텀 구현하면 된다. -
전환할 탭 뷰 컨트롤러들을 배열에 담아두고, 인덱스를 통해 자식 뷰컨 추가 / 제거
-
구현 코드
final class MainTabBarController: UIViewController {
// 각 탭에 해당하는 자식 뷰 컨트롤러 리스트
private let childVCList = [
AViewController(),
BViewController(),
CViewController(),
DViewController()
]
private var selectedIndex = 0
private let tabBar = MainTabBar()
private let disposeBag = DisposeBag()
override func viewDidLoad() {
super.viewDidLoad()
configureHierarchy()
setupFirstVC()
bind()
}
}
extension MainTabBarController {
private func configureHierarchy() {
[
tabBar
].forEach { view.addSubview($0) }
tabBar.snp.makeConstraints { make in
make.horizontalEdges.equalToSuperview()
make.bottom.equalToSuperview()
make.height.equalTo(100)
}
}
private func setupFirstVC() {
addChildVC(at: 0)
}
/// 탭바의 이벤트를 구독하고 처리
/// 탭 선택 시 해당하는 뷰 컨트롤러로 전환
private func bind() {
tabBar.tappedIndexRelay
.observe(on: MainScheduler.instance)
.subscribe(onNext: { [weak self] index in
guard let self = self else { return }
guard index != self.selectedIndex else { return }
self.addChildVC(at: index)
self.removeChildVC(at: self.selectedIndex)
self.selectedIndex = index
})
.disposed(by: disposeBag)
}
}
extension MainTabBarController {
/// 지정된 인덱스의 자식 뷰 컨트롤러를 추가
/// - Parameter index: 추가할 뷰 컨트롤러의 인덱스
private func addChildVC(at index: Int) {
guard let vc = childVCList[safe: index] else {
AppLogger.error("Error: index out of range")
return
}
addChild(vc)
view.addSubview(vc.view)
vc.view.snp.makeConstraints { make in
make.edges.equalToSuperview()
}
vc.didMove(toParent: self)
view.bringSubviewToFront(tabBar)
}
/// 지정된 인덱스의 자식 뷰 컨트롤러를 제거
/// - Parameter index: 제거할 뷰 컨트롤러의 인덱스
private func removeChildVC(at index: Int) {
guard let vc = childVCList[safe: index] else {
AppLogger.error("Error: index out of range")
return
}
vc.willMove(toParent: nil)
vc.view.snp.removeConstraints()
vc.view.removeFromSuperview()
vc.removeFromParent()
}
}- 결과
ios 개발자에용