UITabBar, UITabBarController

Panther·2021년 3월 23일

UITabBar

https://developer.apple.com/documentation/uikit/uitabbar

"A control that displays one or more buttons in a tab bar for selecting between different subtasks, views, or modes in an app."

앱에서 서로 다른 하위작업, 뷰, 모드 사이의 선택을 할 수 있도록, 탭바에 하나 혹은 하나 이상의 버튼을 보여주는 컨트롤입니다.

Declaration

@MainActor class UITabBar : UIView

Overview

보통 탭바는 UITablBarController와 함께 사용하지만 앱에서 독립적인 컨트롤로 사용할 수도 있습니다. 탭바는 항상 스크린의 하단에 나타나고, 하나 혹은 하나 이상의 UITabBarItem 객체를 표시합니다. 탭바의 모양은 인터페이스의 요구에 맞춰 백그라운드 이미지 혹은 틴트 컬러로 커스터마이징 될 수 있습니다. 아이템을 탭하는 것은 해당 아이템을 선택하고 강조합니다. 그리고 아이템 선택은 앱에서 그에 상응하는 모드를 활성화할 수 있도록 해줍니다.

탭바는 코드 작성 혹은 인터페이스 빌더를 통해 설정할 수 있습니다. UITabBarController 객체는 고유한 탭바 객체를 제공하고, 제공된 객체를 설정해줘야 합니다. 탭바를 코드 작성을 통해 생성할 때 init(frame:) 메소드를 사용하거나 다른 뷰 초기화 메소드를 통해 초기 설정을 설정해줘야 합니다. 탭바의 모양을 설정하기 위해 이 클래스의 메소드를 사용하시기 바랍니다. 스스로 생성한 탭바의 경우 탭바에 의해 표시되는 아이템을 구체화하기 위해 이 클래스의 메소드를 사용할 수도 있습니다.

Note
UITabBar 클래스와 UIToolbar 클래스는 비슷한 모양을 갖고 있지만 다른 목적으로 사용합니다. 앱의 모드를 전달하거나 변경시키기 위해 탭바를 사용합니다. 툴바는 현재 제시되고 있는 컨텐트와 관련이 있는 액션의 집합을 제공하기 위해 사용됩니다. 탭바와 툴바를 적절하게 사용하는 방법에 대한 내용은 iOS Human Interface Guidelines를 살펴보시기 바랍니다.

iOS Human Interface Guidelines

탭바는 딜리게이트 객체에게 선택과 커스텀에 대해 알려줍니다. 직접 생성한 탭바의 경우 탭바 안에서 발생한 선택 혹은 추가, 삭제, 아이템 재정렬에 반응할 수 있도록 딜리게이트 객체를 사용하시기 바랍니다. (UITabBarController 객체는 탭바가 관리하는 것들을 위한 딜리게이트 역할을 합니다.) 탭바 딜리게이트 구현에 관련한 더 많은 정보는 UITabBarDelegate를 살펴보시기 바랍니다.

UITabBarDelegate
https://developer.apple.com/documentation/uikit/uitabbardelegate

Configure the Tab Bar Items

탭바 아이템은 인터페이스 빌더를 사용해 설정할 수 있습니다. 또한, 코드 작성을 통해 생성하거나 설정할 수도 있습니다. 인터페이스 빌더에 있는 탭바는 사전에 설정된 초기 아이템을 가져오고, 필요한 경우 아이템을 추가, 삭제, 쟂정렬할 수 있습니다. 설계 시 아이템 설정을 하는 방법은 UITabBarController 객체에 연관되어 있는지 여부에 따라 달라집니다.

인터페이스 빌더에서 탭바를 설정하는 것에 대한 내용입니다.
- UITabBarController 객체가 제공되었을 때, 씬에서 뷰 컨트롤러를 추가하거나 삭제하고, 탭바 컨트롤러와 각각의 새 뷰 컨트롤러 사이에 관계 세그를 생성합니다. 관계 세그를 생성하는 것은 탭바에 자동으로 새 아이템을 추가합니다. 그리고 기존에 있었던 관계 세그를 삭제하는 것은 상응하는 탭바 아이템 역시 제거합니다.
- 탭바 컨트롤러가 제공되지 않은 경우 라이브러리로부터 탭바 아이템을 드래그해서 탭바에 넣을 수 있습니다.
탭바를 코드로 작성하는 것에 대한 내용입니다.
- UITabBarController 객체와 관련이 있는 탭바를 설정하려면, 탭바 컨트롤러와 연관된 뷰 컨트롤러를 설정해야 합니다. 탭바는 탭바 컨트롤러와 관련이 있는 각각의 뷰 컨트롤러의 tabBarItem 속성으로부터 아이템들을 자동으로 가져옵니다.
- 탭바 아이템을 직접 설정하려면, 탭바의 setItems(_:animated:) 메소드를 사용해야 합니다.

탭바는 스크린에서 한 번에 모든 탭들을 표시합니다. 이는 사용 가능한 공간에 아이템을 위치시키는 방법을 결정해주는 itemPositioning 속성을 사용하면서 이뤄집니다. 사용 가능한 공간을 채울 수 있는 것보다 더 많은 아이템을 갖는 경우 하위집합만을 표시하고 사용자가 표시할 탭을 선택하도록 합니다. beginCustomizingItems(_:) 메소드는 표시할 탭바 아이템을 선택하기 위한 인터페이스를 보여줍니다.

각 아이템의 컨텐츠는 UITabBarItem 객체에 저장됩니다. 각 아이템은 탭을 표시하기 위한 제목과 이미지를 포함합니다. 탭에 상응하는 뱃지를 추가하기 위해 탭바 아이템을 사용할 수도 있습니다. 아이템을 생성하고 설정하는 것과 관련한 더 많은 정보는 UITabBarItem을 살펴보시기 바랍니다.

UITabBarItem
https://developer.apple.com/documentation/uikit/uitabbaritem

Respond to Tab Selections

탭바 컨트롤러에 연관된 탭바의 경우 탭바는 선택에 관한 관리와 적합한 뷰 컨트롤러를 표시하는 것을 자동으로 합니다. 직접 선택을 관리해야 하는 경우는 오직 탭바 컨트롤러 없이 탭바를 생성했을 때일 뿐입니다. 탭바는 선택 변경에 반응하기 위해서 사용할 수 있는 딜리게이트 객체의 tabBar(_:didSelect:) 메소드에게 선택에 대한 정보를 알려줍니다. 딜리게이트 객체의 구현은 UITabBarDelegate를 살펴보시기 바랍니다.

UITabBarDelegate
https://developer.apple.com/documentation/uikit/uitabbardelegate

Configure a Tab Bar with Interface Builder

Table 1은 인터페이스 빌더에서 탭바를 위해 설정할 수 있는 특성의 목록을 보여줍니다.

Table 1 Tab bar attributes

Attribute	Discussion
Background	바에 표시할 백그라운드 이미지입니다. 늘어날 수 있는 이미지를 구체화하면 이미지는 사용 가능한 공간을 채우기 위해 확장됩니다. 그렇지 않은 경우 바둑판 식으로 배치됩니다. 백그라운드 이미지를 설정할 때, 탭바는 틴트 컬러 정보를 무시합니다. 코드 작성을 통해 설정하려면 `backgroundImage` 속성을 사용하시기 바랍니다.
Shadow	탭바에 대한 커스텀 쉐도우 이미지입니다. 이 특성은 만약 탭바가 커스텀 백그라운드 이미지를 갖고 있지 않은 경우 무시됩니다. 이 특성을 코드 작성으로 설정하려면 `shadowImage` 속성을 사용하시기 바랍니다.
Selection	선택된 탭바를 사용하기 위한 이미지입니다. 코드 작성을 통해 이 특성을 설정하려면 `selectionIndicatorImage` 속성을 사용하시기 바랍니다.
Image Tint	선택된 아이템에 적용하기 위한 틴트 컬러입니다. 이 특성을 코드 작성으로 설정하려면 `tintColor` 속성을 사용하시기 바랍니다.
Style	탭바에 적용하는 기본 스타일입니다. 탭바를 다크 혹은 라이트 스타일로 설정할 수 있고, 바는 불투명하거나 반투명으로 적용할 수 있습니다. 코드 작성으로 설정하려면 `barStyle`, `isTranslucent` 속성을 사용하시기 바랍니다.
Bar Tint	바에 적용하기 위한 틴트 컬러입니다. 코드 작성을 통해 설정하려면 `barTintColor` 속성을 사용하시기 바랍니다.
Item Positioning	아이템에 적용하기 위한 포지셔닝 스킴입니다.탭바의 길이에 걸쳐 어떻게 아이템이 공간을 차지할 것인지를 설정하기 위해 이 특성을 사용할 수 있습니다. 코드 작성을 통해 설정하려면 `itemPositioning` 속성을 사용하시기 바랍니다.

Internationalize a Tab Bar

탭바를 인터내셔널라이즈 하려면 탭바 아이템 제목에 지역화된 스트링을 제공해야 합니다.

더 많은 정보는 Internationalization and Localization Guide를 살펴보시기 바랍니다.

Internationalization and Localization Guide
https://developer.apple.com/library/archive/documentation/MacOSX/Conceptual/BPInternational/Introduction/Introduction.html#//apple_ref/doc/uid/10000171i

Make a Tab Bar Accessible

탭바는 기본값에 의해 접근이 가능한 상태가 되어 있습니다.

보이스오버가 가능한 iOS 기기에서 사용자가 탭바의 탭을 터치하면 보이스오버는 탭의 제목과 바에서의 위치를 읽어주고, 선택되었는지 여부를 말해줍니다. 예를 들어 아이패드에서 아이튠즈 앱은 “Selected, Audiobooks, four of seven” 혹은 “Genius, six of seven.”을 들을 수 있을 것입니다.

인터페이스를 접근가능한 것으로 만드는 것에 대한 더 많은 정보는 Accessibility Programming Guide for iOS를 살펴보시기 바랍니다.

Accessibility Programming Guide for iOS
https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/iPhoneAccessibility/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008785

UITabBarController

https://developer.apple.com/documentation/uikit/uitabbarcontroller

"A container view controller that manages a multiselection interface, where the selection determines which child view controller to display."

다중선택 인터페이스를 관리하는 컨테이너 뷰 컨트롤러로, 선택에 따라 어떤 자식 뷰 컨트롤러를 보여줄 것인지가 결정됩니다.

Declaration

@MainActor class UITabBarController : UIViewController

Overview

탭바 인터페이스는 서로 다른 모드를 선택할 수 있도록, 그리고 해당 모드에 대한 뷰를 보여줄 수 있도록 윈도우의 하단에 탭들을 보여줍니다. 이 클래스는 보통 그 자체로 사용이 되지만, 서브클래싱 할 수도 있습니다.

탭바 컨트롤러의 인터페이스에 있는 각 탭은 커스텀 뷰 컨트롤러에 연관되어 있습니다. 사용자가 특정 탭을 선택하면, 탭바 컨트롤러는 그에 상응하는 뷰 컨트롤러의 루트 뷰를 표시하고, 이전에 표시되었던 모든 뷰를 대체시킵니다. (사용자의 탭은 이전에 선택되었던 탭과 무관하게 항상 선택된 탭의 루트 뷰를 표시합니다. 탭이 이미 선택되었다고 해도 그렇습니다.) 탭을 선택하는 것이 인터페이스의 컨텐츠를 대치시키기 때문에 각 탭에 의해 관리되는 인터페이스의 타입은 어떤 식으로든 비슷할 필요는 없습니다. 탭바 인터페이스는 다른 유형의 정보를 제시하거나 인터페이스를 완전히 다른 스타일로 사용해 같은 정보를 표시하기 위해서 사용됩니다. Figure 1은 시계 앱에서 나타난 탭바 인터페이스를 보여줍니다. 각 탭은 정보에 기반해 시간의 유형을 제시하고 있습니다.

Figure 1 The tab bar interface in the Clock app

탭바 컨트롤러의 탭바 뷰에 직접 접근하지 않아야 합니다. 탭바 컨트롤러의 탭을 설정하려면 viewControllers 속성에 각 탭에 대한 루트 뷰를 제공하는 뷰 컨트롤러를 할당해야 합니다. 뷰 컨트롤러에 대해 구체화한 순서는 탭바에 나타나는 순서를 결정합니다. 이 속성을 설정할 때, 어떤 뷰 컨트롤러가 초기에 선택되어야 하는지를 나타내는 selectedViewController 속성에 값을 할당해야 합니다. (selectedIndex 속성을 사용해 배열 인덱스로 뷰 컨트롤러를 선택할 수도 있습니다.) 앱 윈도우에 탭바 컨트롤러의 뷰(상속된 뷰 속성을 사용해 얻어진)를 끼워넣으려고 한다면, 탭바 컨트롤러는 자동으로 해당 뷰 컨트롤러를 선택하고 컨텐츠를 표시합니다. 이는 탭바 인터페이스에 맞도록 크기가 재조정되면서 진행됩니다.

탭바 아이템은 아이템마다 상응하는 뷰 컨트롤러르 ㄹ통해 설정됩니다. 탭바 아이템과 뷰 컨트롤러를 연관시키려면, UITabBarItem 클래스의 새 인스턴스를 생성하고, 이 인스턴스를 뷰 컨트롤러에 설정해야 하며, 뷰 컨트롤러의 tabBarItem 속성에 할당해야 합니다. 뷰 컨트롤러를 위한 커스텀 탭바 아이템을 제공하지 않을 경우 뷰 컨트롤러는 기본값으로 이미지와 텍스트를 포함하지 않습니다.

사용자가 탭바 인터페이스에 상호작용할 때, 탭바 컨트롤러 객체는 탭바 컨트롤러의 딜리게이트에게 상호작용에 대한 알림을 보냅니다. 딜리게이트는 어떠한 객체라도 상관없지만, UITabBarControllerDelegate 프로토콜을 따르고 있어야 합니다. 특정 탭바 아이템이 선택되는 것을 방지하기 위해 딜리게이트를 사용할 수도 있고, 탭이 선택되었을 때 추가적인 작업을 수행하기 위해서 딜리게이트를 사용할 수도 있습니다. 또한, More 네비게이션 컨트롤러에 의해 만들어진 탭바의 변경을 모니터링하기 위해서 딜리게이트를 사용할 수도 있습니다. More 네비게이션 컨트롤러에 대한 설명은 아래에 있습니다.

The Views of a Tab Bar Controller

UITabBarController 클래스는 UIViewController 클래스로부터 상속받은 것이기 때문에 탭바 컨트롤러는 뷰 속성을 통해 접근이 가능한 고유한 뷰를 가지고 있습니다. 탭바 컨트롤러의 뷰는 탭바 뷰를 위한 컨테이너와 커스텀 컨텐트를 포함하고 있는 뷰입니다. 탭바 뷰는 사용자를 위해 선택 컨트롤을 제공하고, 하나 혹은 하나 이상의 탭바 아이템으로 구성됩니다. Figure 2는 전체 탭바 인터페이스를 보여주기 위해 어떻게 이 뷰들이 조합되는지를 보여주고 있습니다. 탭바와 툴바뷰에 있는 아이템이 변경될 수 있을지라도 이를 관리하는 뷰를 변경할 수는 없습니다. 오직 커스텀 컨텐트 뷰만 현재 선택된 탭에 대한 뷰 컨트롤러를 반영하기 위해 변경될 수 있습니다.

Figure 2 The primary views of a tab bar controller

탭에 대한 루트 뷰 컨트롤러로 네비게이션 컨트롤러 혹은 커스텀 뷰 컨트롤러를 사용할 수 있습니다. 루트 뷰 컨트롤러가 네비게이션 컨트롤러인 경우 탭바 컨트롤러는 탭바를 뒤덮지 않을 수 있도록 표시된 네비게이션 컨텐트의 크기를 조정합니다. 탭바 인터페이스에서 표시하는 모든 뷰는 어떠한 조건에서도 뷰의 크기가 맞춰질 수 있도록 autoresizingMask 속성을 가져야 합니다.

탭바는 커스텀 아이템을 표시하기에 제한적인 공간을 갖고 있습니다. 탭바 컨트롤러에 여섯 혹은 그 이상의 커스텀 뷰 컨트롤러를 추가하려고 한다면, 탭바 컨트롤러는 네 가지 아이템을 우선 보여주고, 표준 More 아이템을 보여줄 것입니다. More 아이템을 탭하는 것은 남아있는 다른 아이템을 선택할 수 있도록 표준 인터페이스를 가져와줄 것입니다.

표준 More 아이템을 위한 인터페이스는 사용자가 탭바를 재설정할 수 있도록 해주는 편집 버튼을 포함하고 있습니다. 기본값으로 사용자는 탭바 아이템을 재정렬할 수 있습니다. 만약 사용자가 아이템을 수정하지 않도록 하려면, customizableViewController 속성에서 배열로부터 뷰 컨트롤러를 제거할 수 있습니다.

Note
탭바 커스텀와 More 인터페이스는 tvOS에서 사용이 불가능합니다.

State Preservation

iOS 6 및 이후 버전에서 만약 뷰 컨트롤러의 restorationIdentifier 속성에 값을 할당하게 되면, 선택된 탭에서 뷰 컨트롤러에 대한 참조를 보존하게 됩니다. 복구 시점에 해당 뷰 컨트롤러가 있는 탭을 선택하기 위해 참조를 사용합니다.

탭바 컨트롤러를 보존하려고 하는 경우 보존하고자 하는 자식 뷰 컨트롤러에 고유한 복구 아이덴티파이어를 할당해야 합니다. 자식 뷰 컨트롤러에 복구 아이덴티파이어를 제외시키면 해당 탭은 기본 설정으로 돌아갑니다. 탭바 컨트롤러가 viewControllers 속성에 명시된 순서와 같은 순서로 탭을 저장하고 있다고 하더라도 저장 순서는 실제로 관련이 없습니다. 코드는 다음 launch 주기 동안 새로운 탭바 컨트롤러를 제공할 책임만을 갖고 있으며, 코드는 필요한 경우 순서를 조정할 수 있습니다. 상태 보존 시스템은 할당된 복구 아이덴티파이어에 기초해 각 탭의 컨텐츠를 복구하며, 탭의 위치에 기초해 복구하지는 않습니다.

상태 보존과 복구가 어떻게 작동하는지에 대한 내용은 App Programming Guide for iOS를 살펴보시기 바랍니다.

App Programming Guide for iOS로 연결되는 링크는 아래와 같습니다.

https://developer.apple.com/documentation/uikit#//apple_ref/doc/uid/TP40007072

Differences Between iOS and tvOS

tvOS에서의 탭바 컨트롤러는 iOS와 같은 목적을 제공합니다. 하지만 UI 모양에서 약간의 차이가 있습니다.

tvOS에서 탭바 인터페이스는 윈도우의 상단에 나타납니다. 포커스가 탭바를 벗어나면 탭바는 기본값으로 스크린의 상단에 고정된 채로 남아있습니다. 탭바가 고정된 채로 남지 않도록 인터페이스를 생성하려면 스크롤뷰에 tabBarObservedScrollView 속성을 설정하시기 바랍니다. iOS에서 탭바는 스크린의 하단에 고정된 상태로 머무릅니다.
tvOS에서 탭바로부터 아래로 스와이프하면 컨텐트 뷰에 초점을 맞추게 됩니다. 구체적으로 선택된 뷰 아래에 있는 첫 번째 초점 뷰입니다. 아래로 스와이프하는 것은 초점을 변경시키는 제스쳐처럼 작동합니다. 즉 사용자가 스와이프하는 방향으로 초점이 움직인다고 봅니다. 만약 선택된 탭 아래에 초점을 맞출 수 있는 것이 없는 경우 가장 가까운 뷰가 초점에 맞춰집니다. iOS에서 탭바는 항상 스크린 하단에 초점을 유지하고 있습니다.
tvOS에서 탭이 초점에 맞춰지는 동안 선택 버튼을 누르는 것은 컨텐트 뷰에 초점을 맞추도록 합니다. 이 변경에 관련된 방향이 없기 때문에 초점은 컨텐트 뷰의 preferredFocusEnvironments 속성에 구체화된 뷰로 이동합니다. iOS에서는 뷰 사이에 초점을 맞추는 것의 개념이 없습니다.
tvOS에서 탭바 컨트롤러는 커스텀를 지원하지 않습니다. 탭바 컨트롤러는 자신의 크기에 맞는 숫자의 뷰 컨트롤러만 보여줍니다. iOS처러 More 인터페이스를 제공하지 않습니다.