Tab Bar Controller

• 앱을 구분되는 모드 또는 섹션으로 정리해준다.

• 앱 화면의 밑부분에 tab bar가 위치한다.

• 각 tab은 서로다른 독립적인 view 계층을 구성한다.

• 각 탭은 icon과 title로 구분되며, 현재 선택된 tab은 다른 색깔로 구분된다.

  

• 시작 화면에서 Embed In > Tab Bar Controller를 클릭하여 생성한다.

• viewControllers

  • tab bar controller의 viewControllers property를 통해 root view controller 배열인 tab 리스트를 관리한다.

• UITabBarItem

  • 각 root view controller들은 UITabBarItem instance를 가진다.

• Relation Segue > view controllers를 통해 새로운 tab을 추가할 수 있다.

Tab Bar Items

• tab bar item은 이미지와 라벨로 구성되어 있다.

• System Items

  • iOS SDK에서 제공하는 기본 아이콘-텍스트 구성

    

• SF Symbols

  • SF Symbols 앱을 통해서 tab bar item으로 쓸만한 다양한 종류와 크기의 벡터 아이콘을 얻을 수 있다.

• .landscapeImagePhone

  • .landscapeImagePhone property에 작은 버전의 이미지를 등록하면 iPhone 가로모드에서 얇은 tab bar를 사용할 수 있다.

    

• Badge

  • 이용가능한 새로운 정보가 있다는 것을 사용자에게 알리기 위해 tab bar item 우측 상단에 빨간색 표시를 남김

  • Interface Builder

    • Badge attribute를 이용하여 생성 가능

      

  • View Controller

    • tabBarItem property를 통해 UITabBarItem instance에 접근하여 앱 작동 중 badge를 업데이트 할 수 있다.

      tabBarItem.badgeValue = "!"

    • viewWillDisappear(_:)를 통해 사용자가 해당 tab에 들어갔다 나오면 badge가 사라지도록 설정할 수 있다.

      // 해당 view에서 다른 view로 이동하는 경우 호출
      override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
       
        tabBarItem.badgeValue = nil
      }
      

• Scroll Edge

  • tab bar의 배경을 반투명하게 채워 tab bar가 잘 보이도록 한다.

    

• More view controller

  • iPhone의 경우 표시할 수 있는 tab의 최대 개수는 5개이다.

  • 5개를 초과하면 5번째 tab이 More tab item으로 교체되고, tab bar controller에 More view controller가 삽입되어 나머지 view controller list를 보여준다.

    

  • 사용자의 편의를 위해 More view controller는 추천되지 않는다.
    iPhone의 경우 tab의 개수는 5개를 넘지 않는게 좋다.

  • iPad-only App의 경우, 최대 tab의 개수가 좀 더 크다.

Link The Tabs To Code

• iOS App template의 경우, UIViewController의 subclass인 ViewController가 기본으로 생성된다.

• 추가로 만든 view controller를 code로 제어하기 위해선 추가적인 UIViewController의 subclass를 생성하여 연결해야 한다.

• 파일 생성 시, Cocoa Touch Class Template를 사용하면 간단하게 UIViewController의 subclass를 생성할 수 있다.