SwiftUI TabView

TabView

• tabView도 tag를 사용한다

• tabView옵션에 selection으로 선택된것을 탐색한다

• tabView안에 화면 컨텐츠를 넣고 그 컨텐츠에 .tabItem으로 TabView의 UI를 변경할 수 있다.

• 하지만 그 UI를 가로 배치는 안되고 많은 컨텐츠 추가는 무시된다

struct TabView1: View {
    @State private var selectedTab = 2
    
    var body: some View {
        TabView(selection: $selectedTab) {
            PageView1()
                .tabItem {
                    Text("Tab Label 1")
                    Image(systemName: "flame")
                }
                .tag(1)
            
            Text("Tab Content 2")
                .tabItem {
                    Image(systemName: "flame.fill")
                    Text("Tab Label 2")
                }
                .tag(2)
        }
        .accentColor(.red)
    }
}

TabViewPaging

• .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
• .tabViewStyle로 tabView의 스타일을 변경가능
• tabViewStyle의 indexDisplayMode로 아래 인덱싱 표시를 변경가능
• .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
• .indexDisplayMode로 사용한 tabView스타일에 맞게 입력하고
• PageIndexViewStyle로 인덱싱 표시의 스타일을 바꿀 수 있다

struct TabViewPaging1: View {
    var body: some View {
        TabView {
            Color.green.ignoresSafeArea()
            Color.blue.ignoresSafeArea()
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
        .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        .ignoresSafeArea()
    }
}