SwiftUI: 탭바가 있는 뷰(TabView) 만들기 (구버전, 신버전)

탭바가 있는 뷰 (TabView)

위와 같은 형태의 탭 뷰를 만들고 싶다면 TabView를 사용해 만들 수 있습니다.

 

사전 작업

탭 정보에 대한 Enum 추가

먼저 각 탭에 대한 구분은 Bind<Hashable>? 을 통해 할 수 있습니다. 다양한 방법이 있는데, 여기서는 TabMenu이라는 사용자 정의 타입의 enum을 사용하여 탭 뷰에 사용할 페이지를 지정합니다.

  enum TabMenu: String, CaseIterable {
    case home = "홈"
    case tour = "투어"
    case gallery = "갤러리"
    case profile = "프로필"
    
    var systemImage: String {
      switch self {
      case .home: "house"
      case .tour: "map"
      case .gallery: "photo"
      case .profile: "person"
      }
    }
  }

• case: 사용할 enum의 케이스, raw값으로 탭 이름을 지정
• systemImage: 각 탭에서 사용할 아이콘의 SF Symbol 이름을 지정

 

탭에 대한 상태 변수 추가

SwiftUI View 구조체에 다음 상태 변수를 추가합니다.

@State private var tab: TabMenu = .home

• 이 변수는 탭에 바인딩되어 현재 탭에서 보여지는 뷰를 변경하는 역할을 합니다.

 

탭 아이콘 추가

기존 버전 (deprecate 예정)

.tabItem을 이용합니다.

body 안에 다음 코드를 추가합니다.

TabView(selection: $tab) {
  ForEach(Tab.allCases, id: \.self) { tab in
    // 각 탭 아이콘을 클릭했을 때 표시할 뷰
    CustomView(of: tab)
      // 라벨과 태그(또는 id) 조합
      .tabItem {
        Label(tab.rawValue, systemImage: tab.systemImage)
          // .tag(tab): ForEach(..id:) 사용시
          // ForEach문을 통해 id가 부여되므로
          // 태그를 달지 않아도 됨
      }
  }
}

• 기본적으로 TabView 클로저 안에 표시할 페이지(뷰)들을 넣습니다.
• .tabItem {...} 을 추가합니다.
  • 아이콘과 이름을 동시에 지정하려면 Label을 이용합니다.
  • tag 를 사용해(id를 사용할수도 있음) 현재 
• 원래 ForEach 문을 사용하지 않고 수동으로 뷰를 추가한 경우
  • 각 뷰를 구분할 수 있는 tag 또는 id를 (tag: tab)으로 부착해야 합니다.
  • 하지만 ForEach(..., id:_) 를 사용한 경우 id가 각 뷰에 지정되므로 tag(id)를 달지 않아도 됩니다.
  • 수동으로 뷰를 추가한 경우 아래처럼 구분자(tag 또는 id)를 뷰에다 부착합니다.

CustomView(of: .home)
  .tabItem {
    Label(Tab.home.rawValue, systemImage: Tab.home.systemImage)
  }
  .tag(Tab.home) // 구분자 추가

 

새로운 버전 (SwiftUI Tab 이용)

기존 버전을 사용할 경우 Deprecated 메시지가 뜹니다.

'tabltem' will be deprecated in a future version of iOS: Use `Tab (title:image:value:content:)` and related initializers instead

새로운 버전은 탭 페이지를 추가시 TabView 안에 Tab 이라는 SwiftUI 뷰를 사용해 추가합니다. 기존 방법은 tabItem 수정자 + tag/id를 조합했으나 수정자 대신 뷰로 바뀌었고 고유 구분은 value: 파라미터 를 사용합니다.

 

TabView(selection: $tab) {
  // 각 탭 아이콘을 클릭했을 때 표시할 뷰
  ForEach(TabMenu.allCases, id: \.self) { tab in
    Tab(tab.rawValue, systemImage: tab.systemImage, value: tab) {
      CustomView(of:  tab)
    }
  }
}

• 탭 뷰에 selection이 지정된 경우 하위 클로저에 들어가는 Tab에는 반드시 value가 지정되어 있어야 합니다.
  • 따라서 value 파라미터를 생략하면 에러가 발생합니다.
  • value를 생략하려면 TabView에서 selection도 생략해야 하며, 표시되는 뷰가 고유하게 구분될 수 있어야 합니다.
• value에 selection과 바인딩되는 타입의 고유 구분자를 넣습니다.

 

요약

• 구버전과 신버전의 차이는 다음과 같습니다.