[iOS - SwiftUI] TabView 사용 방법

목차) SwiftUI의 기본 - 목차 링크

TabView

https://developer.apple.com/documentation/swiftui/tabview

• SwiftUI에서는 Tab을 매우 직관적으로 추가하기가 가능
  • TabView를 선언해 놓고, 가 하위에 .tabItem을 추가하여 사용
• TabView에 넣을 뷰 3가지 준비

struct ViewA: View {
  var body: some View {
    Text("ViewA")
  }
}

struct ViewB: View {
  var body: some View {
    Text("ViewB")
  }
}

struct ViewC: View {
  var body: some View {
    Text("ViewC")
  }
}

• TabView하위에 위 뷰들을 추가하고, 탭뷰의 이름은 .tabItem으로 추가

struct ContentView: View {
  var body: some View {
    Text("Hello, world!")
      .padding()
    TabView {
      ViewA()
        .tabItem {
          Label("View1", systemImage: "tray.and.arrow.down.fill")
        }
      ViewB()
        .tabItem {
          Label("View2", systemImage: "tray.and.arrow.up.fill")
        }
      ViewC()
        .tabItem {
          Label("View3", systemImage: "person.crop.circle.fill")
        }
    }
  }
}

• TabItem 아이콘 우측상단에 쉽게 badge도 추가가 가능

struct ContentView: View {
  var body: some View {
    Text("Hello, world!")
      .padding()
    TabView {
      ViewA()
        .badge(2) // <-
        .tabItem {
          Label("View1", systemImage: "tray.and.arrow.down.fill")
        }
      ViewB()
        .tabItem {
          Label("View2", systemImage: "tray.and.arrow.up.fill")
        }
      ViewC()
        .badge("!") // <_
        .tabItem {
          Label("View3", systemImage: "person.crop.circle.fill")
        }
    }
  }
}

아이콘 우측 상단에 숫자와 느낌표가 표출

• .tabItem 하위에 Label로 꼭 추가하지 않아도, Image, Text와 같은 뷰로 각각 추가가 가능

ViewD()
  .font(.system(size: 30))
  .tabItem {
    Image(systemName: "house.fill")
    Text("홈")
  }

홈이 추가된 TabView

* 전체 코드: https://github.com/JK0369/ExTabView

* 참고

https://developer.apple.com/documentation/swiftui/tabview