Tab View, badge

 

탭을 할 수 있는 UI 를 만들기 위해서는 TabView에 뷰를 배치하고 각 탭의 내용에 tabItem(_:) modifier 를 적용합니다. iOS 에서는 badge modifier 같은 badge(_:) 를 사용하여 각 탭에 badge 를 할당할수도 있습니다.

 

다음 예제는 세 개의 탭이 있는 탭 보기를 생성하며, 각각은 사용자 지정 자식 보기를 제공합니다. 첫 번째 탭에는 숫자 배지가 있고 세 번째 탭에는 문자열 badge가 있습니다.

TabView {
    ReceivedView()
        .badge(2)
        .tabItem {
            Label("Received", systemImage: "tray.and.arrow.down.fill")
        }
    SentView()
        .tabItem {
            Label("Sent", systemImage: "tray.and.arrow.up.fill")
        }
    AccountView()
        .badge("!")
        .tabItem {
            Label("Account", systemImage: "person.crop.circle.fill")
        }
}

 

 

자신이 선택한 탭을 구분하기 위해서는 selection을 사용하여 구분할 수 있습니다. 다음 예제 코드는 selection 과 tag 를 통해서 어느쪽을 탭하였는지를 알 수 있습니다. BooksView() 를 탭하게 된다면 selectedView는 tag에 의해 0으로 바뀔 것이고 SettingsView() 를 선택하게 된다면 tag에 의해 selectedView 는 1로 바뀌게 됩니다.

struct ContentView: View {
   @State private var selectedView: Int = 1

   var body: some View {
      TabView(selection: $selectedView) {
         BooksView()
            .tabItem({
               Label("Books", systemImage: "book.circle")
            }).tag(0)
         SettingsView()
            .tabItem({
               Label("Settings", systemImage: "gear")
            }).tag(1)
      }
   }
}

 

TabView 는 한가지 스타일만 존재하는 것이 아닙니다. page 라는 스타일을 통해서 스와이핑과 탭을 통해서 페이지를 옮길수도 있습니다. 그러기 위해서는 tabViewStyle 를 .page 로 설정해야하며 indexViewStyle 을 통해서 아래 현재 TabView 의 위치를 보여줄 수 있습니다.

struct ContentView: View {
   @State private var selectedView: Int = 1

   var body: some View {
       TabView(selection: $selectedView) {
           BooksView()
               .tabItem({
                   Label("Books", systemImage: "book.circle")
               }).tag(0)
           SettingsView()
               .tabItem({
                   Label("Settings", systemImage: "gear")
               }).tag(1)
       }.tabViewStyle(.page)
           .indexViewStyle(.page(backgroundDisplayMode: .always))
   }
}