UITabBarController에 대하여 👍

RYEOL·2024년 4월 30일

Swift

목록 보기

9/15

UITabBarController는 사용자가 다른 뷰 컨트롤러로 쉽게 전환할 수 있도록 하단에 탭 바를 제공하는 컨테이너 뷰 컨트롤러입니다. 이 글에서는 UITabBarController의 기본적인 사용 방법과 몇 가지 중요 기능에 대해 설명하겠습니다.

UITabBarController？

UITabBarController는 여러 개의 탭을 가지며, 각 탭은 다른 뷰 컨트롤러와 연결됩니다. 사용자가 탭을 선택하면, 해당 탭에 연결된 뷰 컨트롤러가 화면에 표시됩니다. 이는 사용자 인터페이스를 구성할 때 여러 섹션으로 나누어 관리할 수 있도록 해줍니다.
탭 바 컨트롤러의 탭을 구성하려면, 각 탭의 루트 뷰를 제공하는 뷰 컨트롤러들을 viewControllers 속성에 할당합니다.

이미지 예시

UITabBarController 사용해보기！

이 글에서는 코드로 UITabBarController 예시를 설명할 예정입니다.

1. UITabBarController 생성하기

UITabBarController를 상속 받는 BottomTabBarControlle를 생성해줍니다.
BottomTabBarControlle에 사용할 VC를 선언해줍니다.

2. TabBar Item 설정하기

각 VC를 연결할 tabBarItem을 꾸며줍니다.
title, image, tag등을 포함한 UITabBarItem을 VC.tabBarItem으로 연결합니다.

3. ViewController 연결하기

UITabBarController에 연결할 VC를 배열로 생성합니다.
self.viewControllers를 활용하여 해당 배열을 UITabBarController에 연결합니다.
✨ 배열에 배치하는 순서대로 UITabBarController에 보여집니다.

4. 중요❗각 ViewController를 rootView로 설정하기

위에 연결한 코드대로 실행한다면 searchVC에서 A라는 VC로 이동할 때 pushViewController로 Navigation할 수 없는 상황이 생길 것 입니다. (present로는 가능)
이는 UITabBarController에 연결 되어 있는 각 VC가 rootView가 아니기 때문에 벌어지는 Issue입니다. 이를 해결하기 위해 UITabBarController에 연결된 각 VC가 rootView가 될 수 있게 수정이 필요합니다.

UITabBarController 꾸미기

배경색 추가

위에 적힌 코드대로 작업을 따라왔다면 시뮬레이터를 실행 했을 때 UITabBarController의 배경이 투명한 것을 볼 수 있습니다. 이런 경우에는 코드로 배경색을 추가해주면 해줍시다. (배경색이 필요없는 경우 추가 안해도 됩니다)

TabBar Item 컬러 조절

TabBar Item Color 를 수정하는 방법입니다. 선택된 Item과 선택되지 않은 Item을 나누어 색상을 조절 할 수 있습니다. unselectedItemTintColor 를 통해 선택하지 않은 아이템에 색상을 지정하고,
tintColor를 통해 선택된 아이템에 색상을 지정할 수 있습니다.

TabBar Item Text 조절

TabBar Item Text 설정을 조절하는 방법입니다. 아래와 같이 Bold로 변경하거나 font size를 수정할 수 있습니다.

TabBar Radius 추가하기

앱을 사용하다보면 태두리가 둥근 TabBar를 자주 접할 수 있습니다. 지금까지 작성한 코드로는 딱딱한 사각형 모양의 UITabBarController가 보일텐데 이 부분을 특정 위치에 Radius를 주는 방법입니다.
layer.cornerRadius를 통해 Radius 값을 지정하고
layer.maskedCorners를 통해 코너가 들어갈 위치를 지정합니다. 아래 코드에서는 UITabBarController의 좌 우측 상단 모서리에 Radius를 생성해보겠습니다.
추가로 masksToBounds를 true로 설정해주면 둥근 모서리를 가진 TabBar를 볼 수 있습니다.