SwiftUI TabView

TabView

TabView 컴포넌트는 하단의 아이콘을 통해 여러 페이지를 볼 수 있는 View를 만들어 준다.

 

Example

3개의 페이지로 나뉘어져 있는 TabView

import SwiftUI

struct Layout: View {
    var body: some View {
        TabView {
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
                }
        }
        .font(.headline)
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

하단을 보면 총 3개의 버튼이 있고 클릭을 하면 해당 페이지로 전환된다.

 

TabView 컴포넌트안에 원하는 숫자 만큼의 컴포넌트를 넣고 tabitem 속성을 통해 밑에 TabBar에 이미지와 텍스트를 넣을 수 있다. tabItem 속성에 이미지를 추가하면 해당 시스템 이미지 혹은 Assets에 있는 이미지가 TabBar안에 들어가고 Text 컴포넌트를 넣으면 text가 삽입 가능하다.

 

Example2

import SwiftUI

struct Layout: View {
    @State private var selection = 0
    var body: some View {
        TabView(selection: $selection) {
            Text("The First Tab")
                .tabItem {
                    Image(systemName: "1.square.fill")
                    Text("First")
                }.tag(0)
            Text("Another Tab")
                .tabItem {
                    Image(systemName: "2.square.fill")
                    Text("Second")
                }.tag(1)
            Text("The Last Tab")
                .tabItem {
                    Image(systemName: "3.square.fill")
                    Text("Third")
                }.tag(2)
        }
        .font(.headline)
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

TabView의 selection 파라미터를 사용하면 해당 tabItem의 tag속성을 통해 페이지에 접근이 가능하다. selection의 기본값이 0이기 때문에 "First"라는 타이틀의 페이지가 가장 먼저 나타나고 이것을 1로 바꾸면 "Second"라는 타이틀의 페이지가 가장 먼저 나타나게 된다. selection은 해당 페이지의 tag값으로 자동으로 바뀌게 @State로 바인딩을 하였다.

 

Example3

import SwiftUI

struct Layout: View {
    var body: some View {
        TabView {
            Text("first")
            Text("Second")
            Text("third")
        }.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

TabView도 tabViewStyle 속성을 통해 다양한 스타일로 커스텀이 가능하다. 현재 코드는 PageView 형식으로 TabView를 표현하였고 swipe를 통해 페이지가 넘어가는 형식으로 바꾸었다. PageView 형식으로 TabView를 표현하면 자동으로 tabBar가 사라지므로 tabItem 속성을 통해 꾸며도 아무것도 보이지 않는다.

 

Example4

import SwiftUI

struct Layout: View {
    @State private var selection = 0
    var body: some View {
        ZStack(alignment: .bottom) {
            TabView(selection: $selection) {
                Text("First").tag(0)
                Text("Second").tag(1)
                Text("third").tag(2)
            }
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
            .font(.headline)
            
            Button("next") {
                withAnimation {
                    if (selection > 2) {
                        selection = 0
                    } else {
                        selection += 1
                    }
                }
            }
        }
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

버튼을 통해 selection의 값을 변경하여 페이지를 이동하는 View

 

ZStack안에 TabView 컴포넌트를 집어넣고 총 3개의 페이지를 넣었다. TabView에는 selection 파라미터안에 @State로 바인딩된 selection 정수변수를 집어 넣고 각각의 페이지마다 tag속성을 통해 고유 번호를 주었다. Button 컴포넌트를 추가하여 클릭하면 selection의 데이터가 변경되게 하여 클릭하면 페이지가 변하는 예제이다. tag 옵션은 잘 사용하지 않지만 알면 유용하다.

 

Example5

import SwiftUI

struct Layout: View {
    @State private var selection = 0
    var body: some View {
        ZStack(alignment: .topTrailing) {
            TabView(selection: $selection) {
                Text("Home Tab")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
                    .tabItem {
                        Image(systemName: "house.fill")
                        Text("Home")
                    }.tag(0)
                Text("Bookmark Tab")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
                    .tabItem {
                        Image(systemName: "bookmark.circle.fill")
                        Text("Bookmark")
                    }.tag(1)
                Text("Video Tab")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
                    .tabItem {
                        Image(systemName: "video.circle.fill")
                        Text("Video")
                    }.tag(2)
                Text("Profile Tab")
                    .font(.system(size: 30, weight: .bold, design: .rounded))
                    .tabItem {
                        Image(systemName: "person.crop.circle")
                        Text("Profile")
                    }.tag(3)
            }
            .accentColor(.red)
            Button(action: {
                selection = (selection + 1) % 4
            }) {
                Text("Next")
                    .font(.system(.headline, design: .rounded))
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.red)
                    .cornerRadius(10.0)
                    .padding()
            }
        }
    }
}

struct Layout_Previews: PreviewProvider {
    static var previews: some View {
            Layout()
    }
}

.accentColor 속성을 통해 현재 tabView에서 선택된 페이지의 아이콘의 색상을 변경할 수 있다. 위 코드는 red로 바꾸어서 선택된 tabBar 아이콘이 빨간색으로 변경된 것을 알 수 있다. 4번 예제와 같이 Next 버튼을 클릭하면 selection이 변경되어 값이 동일한 tag가 있는 페이지로 이동하게 된다.

 

 

Uploaded by Notion2Tistory v1.1.0