[iOS] UITabBarController

iOS의 대부분의 앱을 살펴보면 하단에 여러 탭들이 있고, 해당 탭을 누르면 새로운 화면이 나오는 구조가 많다. 이렇게 자주 사용되는 구조의 핵심인 UITabBarController를 살펴보자.

아이폰 기본 시계 앱 (이미지출처: https://developer.apple.com/documentation/uikit/uitabbarcontroller)

 

UITabBarController

---

UITabBarController란, Container View Controller로서 수평적인 관계의 여러 화면에 바로 접근할 수 있도록 하는 Tab Bar를 제공하는 View Controller이다. 

Container View Controller 란?

직접적으로 콘텐츠를 표시하지 않으면서 다른 View Controller를 유기적인 관계로 제어하는 View Controller. 대표적으로 Navigation Controller, Split View Controller, Page View Controller가 있다.

 

수평적인 관계?

한 화면이 다른 화면의 하위 화면도 아니고 기능적으로 종속되어 있는 것도 아닌 관계를 의미한다. UINavigationController는 수직적인 관계의 화면을 구성할 수 있는 View Controller인 것에 반해 UITabBarController는 수평적인 화면들을 나열할 수 있는 View Controller이다. 이런 관계적 특성으로 인해 수평적인 관계를 나타낼 수 있는 UITabBarController는 보통 Storyboard의 제일 상단에 위치한다. (UITabBarController -> UINavigationController -> ... 이런 식으로도 많이 구성함.)

 

Storyboard에 UITabBarController를 삽입하는 방법은 두 가지가 있다.

1. Embed In 에서 Tab Bar Controller 선택 (윗쪽에서 선택할 수도 있고, 아래 쪽에서 선택할 수도 있다.)

1-1. Editor > Embed In > Tab Bar Controller

 

1-2. Embed In > Tab Bar Controller

2. Object Library에서 Tab Bar Controller 드래그

UITabBarController를 넣어준 모습이다. UITabBar는 따로 넣어주지 않아도 자동으로 같이 넣어준 것을 확인할 수 있다. 

Tab Bar Controller가 삽입된 Storyboard

 

Tab Bar에 새로운 Tab을 추가하고 싶다면 View Controller를 하나 생성하고 UITabBarController -> ViewController 드래그.

 

Tab Bar Item의 주요 속성들

- Badge

- System Item

 

 

참고로 TabBar에는 최대 5개 까지의 Tab을 보여줄 수 있고, 5개가 넘어가면 제일 마지막 Tab에는 More 탭이 생성된다.

커스텀 이미지를 넣고 싶다면 Bar Item > Image 에 커스텀 이미지를 넣으면 된다. Title도 쓸 수 있다.

 

 

프로젝트 활용

FCM 알림을 받았을 때, 특정 Tab으로 이동해야 한다고 해보자. 이런 경우 UITabBarController의 selectedIndex를 사용하여 구현했다.

tabBarController?.selectedIndex = 3

 

Reference

• UITabBarController
• 꼼꼼한 재은 씨의 스위프트 기본편 (저 이재은)