UITabBar?
UITabBar는 하단에 위치하며, 앱의 주요 기능들을 한눈에 볼 수 있으며 여러 화면 또는 기능 간의 빠르고 편리한 전환이 가능하다.
-
UITabBar는 여러 UITaberItem을 포함할 수 있다. 아이템들은 아이콘과 텍스트라벨로 구성되며, 아이템을 탭하여 다양한 뷰나 기능 전환을 할 수 있다.
-
배경 이미지나 색상, 스타일 등 커스터마이징 가능하다.
-
항목을 탭하면 해당 항목이 선택되고 강조표시 되며, 이 선택된 항목으로 화면이 전환되거나 기능이 전환된다.
-
사용자가 특정 탭 바 항목을 선택하면, 해당 항목이 강조표시 되며, 해당 항목에 연결된 뷰 컨트롤러나 기능이 활성화된다.
-
선택된 항목의 변경을 감지하기 위한 Delegate 메소드를 제공하고 있다.
우리가 자주 매일 사용하는 카카오를 보면 탭바를 통해 기능별로 화면전환을 구현한것을 볼 수 있다.
UITabBarItem
UITabBar 내부에 위치하여 앱의 다양한 섹션 혹은 뷰를 대표한다. 사용자는 이 항목을 탑하여 관련 뷰나 기능으로 전환한다. 위에서 설명한 항목을 나타내는 클래스라고 보면 된다. 위에서 이미 항목에 대한 설명을 했기 때문에 여기까지~
UITabBar 사용법
크게 인터페이스 빌더를 통해 사용하는 방법과 코드를 통해 사용하는 방법이 있다.
인터페이스 빌더로 Tab Bar 사용하기
인터페이스 빌더로 탭바를 사용하는 방법도 여러 방법이 있다.
- 생성하기
-
탭바로 구성할 뷰들을 선택하고 상단턉 - Editor - Embaded In - Tab Bar Controller 를 선택해 생성할 수 있음
-
인터페이스 라이브러리에서 Tab Bar Controller을 선택해서 두개의 뷰, 두개의 항목을 가지는 UITabBar를 생성할 수 있음.
- 항목 추가하기
탭바 컨트롤러로부터 우클릭으로 드래그 하거나 'control' 키를 누른 상태로 드래그 하여 세그(Segue)창에서 'view controller'를 선택한다. 정상적으로 연결하면 자동으로 UITabBarItem이 추가된다.
코드로 Tab Bar 사용하기
- UITabBarController 하위 클래스 생성하기
class MyTabBarController: UITabBarController {...}- 전 단계에서 생성한 MyTabBarController의 viewDidLoad에 항목에 연결할 뷰를 생성하고, 항목을 추가한다.
override func viewDidLoad() {
super.viewDidLoad()
let firstVC = FirstViewController()
firstVC.tabBarItem = UITabBarItem(tabBarSystemItem: .favorites, tag: 0)
let secondVC = SecondViewController()
secondVC.tabBarItem = UITabBarItem(tabBarSystemItem: .contacts, tag: 1)
self.viewControllers = [firstVC, secondVC]
}- 앱 사작 시점에 MyTabBarController을 생성하고 루트뷰로 설정한다.
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let window = UIWindow(frame: UIScreen.main.bounds)
window.rootViewController = MyTabBarController()
window.makeKeyAndVisible()
self.window = window
return true
}
주의할점
-
탭바 아이템은 일반적으로 3~5개를 권장하고 있다. 너무 많은 항목이 탭바에 추가되면 사용자가 혼란을 겪을 수 있다. 5개 이상의 아이템을 추가하면 전부 보이지 않고 more 버튼이 생기고 more 버튼을 터치해야 추가 아이템들이 보인다.
-
탭바는 앱의 주요 기능 또는 섹션을 대표해야 한다. 사용자가 자주 사용하는 핵심 기능을 중심으로 항목을 설정해야 한다.
-
항목끼리 일관성을 유지해야 하며 선택된 항목 강조는 명확해야 한다.
-
너무 많은 커스터마이징은 권장하지 않는다. 사용자가 익숙하게 인식하도록 기본 디자인에 가깝게 유지하는 것이 좋다.
-
동적으로 항목을 추가하거나 제거하는것은 사용자에게 혼란을 줄 수 있다. 항목의 순서나 수가 변경되는 것은 권장되지 않는다.
-
배지는 중요한 정보나 알림을 전달할 때만 사용하는것이 권장된다.
-
탭바는 플랫한 구조를 위해 설계되어 있다. 하나의 탭에서 깊은 네비게이션 계층을 만드는 것은 사용자 경험을 저하시킬 수 있다.
-
외관이 비슷한 툴바, 화면전환이라는 공통점이 있는 네비게이션 컨트롤러와 명확하게 차이점을 이해하고 구분하여 사용해야 한다.
마치면서
UITabBar와 UINavigationController는 둘 다 아주 많이 쓰이며 앱의 주요 화면전환 네비게이션 요소라는 공통점을 가지고 있다. 둘 다 사용자에게 앱 내에서 전환 방향을 제공하지만 사용 방식과 목적이 다르다. 탭바는 앱의 주요 섹션 간 전환이 목적이지만 네비게이션컨트롤러는 계층적이고 선형적인 방향을 제공한다. 이러한 차이점을 잘 이애하여 사용자 경험을 최적화 하도록 하자.
