[SwiftUI] TabView, TabViewStyle

TapView

: A view that switches between multiple child views using interactive user interface elements.

 

To create a user interface with tabs, place views in a TabView and apply the tabItem(_:) modifier to the contents of each tab. On iOS, you can also use one of the badge modifiers, like badge(_:), to assign a badge to each of the tabs.

 

Use a Label for each tab item, or optionally a Text, an Image, or an image followed by text. Passing any other type of view results in a visible but empty tab item.

 

var body: some View {
        TabView {
            ContentView()
                .tabItem {
                    Image(systemName: "play.rectangle")
                    Text("Music")
                }
            
            ScrollViewTest()
                .tabItem {
                    Image(systemName: "scribble.variable")
                    Text("ScrollView")
                }
            
            StateTestView()
                .tabItem {
                    Image(systemName: "f.square")
                    Text("Fox")
                }
        }
    }

앱 하단에 탭 표시줄을 만들기 위해서 사용합니다.

 

라벨로 사용을 한다면,

Label("Music", systemImage: "play.rectangle")

 

TabViewStyle

A specification for the appearance and interaction of a TabView.

 

• static var automatic: DefaultTabViewStyle (iOS and macOS)
• static var page: PageTabViewStyle (iOS)
• static var carousel: CarouselTabViewStyle (watchOS)

 

automatic의 경우에는 위와 같은 형태이며, page에 대해서 알아보려고 합니다.

struct ContentView: View {
    var body: some View {
        TabView {
            Text("Music 🎧")
            Text("Movie 🎬")
            Text("Game 🎮")
        }
        .foregroundColor(Color.white)
        .background(Color.yellow)
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    }
}

indexDisplayMode: .always

indexDisplayMode: .never