TabView

[Roy-wonji]

TabView 란 ?

SwiftUI는 UIKit의 UITabBarController와 동등한 기능을 가진 TabView를 제공합니다. 사용자가 화면 하단의 막대를 사용하여 여러 View를 전환할 수 있습니다.

기본 형식으로 각 항목에 이미지와 제목을 제공해야 하며, 프로그래밍 방식으로 활성화되는 탭을 제어하려는 경우 선택적으로 태그를 추가해야 합니다.

탭 표시 줄 인터페이스 만들기

struct GreenTabView: View {
    var body: some View {
        ZStack {
            Circle()
                .frame(width: 300, height: 300)
                .foregroundColor(.green)
            
            Text("\(3)")
                .font(.system(size: 70))
                .foregroundColor(.white)
                .fontWeight(.bold)
        }
    }
}

ContentView 에 TabView{...} 를 사용하여 위에 만들어준 ColorTabView 를 호출해주겠습니다.

TabView {
            GreenTabView()
            
            RedTabView()
            
            BlueTabView()
        }

하단에 바 하나가 생성되었고 바를 터치해보면 각 뷰로 전환되는 것을 확인할 수 있습니다. 하지만 아무런 아이콘이 없기 때문에 어느 위치에 어느 뷰 가 있는지 확인할 수 없습니다. SF Symbols를 사용하여 탭 안에 아이콘을 넣어주겠습니다.

TabItem{...} 을 사용하여 TabView 에 아이콘 추가

struct ContentView: View {
    var body: some View {
        TabView {
            GreenTabView()
                .tabItem {
                    Image(systemName: "house")
                    Text("홈으로")
                }
            redTabView()
                .tabItem {
                    Image(systemName: "person")
                    Text("사용자")
                }
            
            blueTabView()
                .tabItem {
                    Image(systemName: "bag")
                    Text("장바구니")
                }
        }
    }
}

.tabItem 에 각각 Image  와 Text  로 추가할 수 있지만 Label 을 이용하면 더 편합니다.

redTabView()
                .tabItem {
                    Label("사용자", systemImage: "person")
                }

탭 표시 줄 색상 사용자 지정

기본적으로 탭 표시 줄 항목의 색상은 파란색으로 설정됩니다. 다음과 같이 .accentColor수정자를 사용하여하여 TabView의 아이콘 및 텍스트 색상을 변경할 수 있습니다.

struct ContentView: View {
    var body: some View {
        TabView {...}
        
        .accentColor(.red)
    }
}

그러나 SwiftUI 프레임 워크에는 탭 바의 색상을 변경하기 위한 기본 제공 수정자가 없습니다.

이를 변경하려면 아래와 같이 UIKit 의 [appearance API](https://developer.apple.com/documentation/uikit/uiappearance)를 사용할 수 있습니다.

struct ContentView: View {
    var body: some View {
        TabView {...}
        
        .onAppear() {
            UITabBar.appearance().barTintColor = .white     
        }        
        
        .accentColor(.red)
    }
}

프로그래밍 방식으로 탭 간 전환

보통 탭 바를 터치하여 탭 간 전환을 하게 됩니다. 하지만 프로그래밍 방식으로 버튼을 생성해 특정 탭으로 전환할 수 있습니다.

ContentView에 @State변수를 다음과 같이 선언해 줍니다.

enum TabKind {
    case home
    case main
}

@State var tabIndex = TabKind.home

그리고 TabView 에 selection  값으로 변수를 초기화해주겠습니다.

struct MyTabView: View {
    @State var tabIndex = TabKind.home
    var body: some View {
        TabView(selection: $tabIndex) {
            ContentView().tabItem {
                Image(systemName: "house")
               Text("홈")
                    .font(.system(size: 20))
            }
            ContentView()
                .tabItem {
                    Image(systemName: "flame")
                    Text("메인")
                        .font(.system(size: 20))
                }
        }
    }
}

이제 다음 탭으로 전환되는 버튼을 하나 만들어 주겠습니다.

ZStack(alignment: .topTrailing) {
            TabView(selection: $selection)  {
            
            ...
            
            }
            
            .accentColor(.red)
            .onAppear() {
                UITabBar.appearance().barTintColor = .white
            }
            Button(action : {
                selection = (selection + 1) % 3
            }) {
                Text("다음")
                    .font(.system(.headline))
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(10)
                    .padding()
            }
        }
    }
 }

TabView에서 탭 표시 줄 숨기기

다음 TabView와 NavigationView 구성 요소를 래핑 하여 NavigationView에 TabView를 포함할 수 있습니다.

struct ContentView: View {
    @State private var selection = 0
    var body: some View {
        NavigationView {
            TabView(selection: $selection) {
            
            ...
            
            }
            
            .accentColor(.red)
            .onAppear() {
                UITabBar.appearance().barTintColor = .white
            }
            
            .navigationTitle("TabView")

이제 NavigationView 의  TabView에  List 를 사용하여 아이템을 추가해주도록 하겠습니다.

TabView(selection: $selection) {
                
                List(1...10, id: \.self) { index in
                    NavigationLink(
                        destination: Text("아이템 \(index) 번 의 세부사항"),
                        label: {
                            Text("아이템 \(index)")
                        })
                }

탭 바의 첫 번째 부분이 비어있죠? 이곳에도 tag 와 아이콘 을 추가합니다.

.tabItem {
                    Image(systemName: "house.fill")
                    Text("홈으로")
                }
                .tag(0)