[SwiftUI] TabView

안녕하세요, 저는 흑인입니다

SwiftUI에서 TabView를 구현하는 방법을 알아봅시다.

탭 보기란 무엇입니까?

탭 보기는 iOS에서 가장 인기 있는 사용자 인터페이스 요소 중 하나이며 다른 보기 간에 쉽게 전환하고 탐색할 수 있도록 도와줍니다.
탭 보기에는 여러 탭이 있으며 각 탭을 선택하면 해당 내용이 표시됩니다.

탭 보기 구현

SwiftUI에서 TabView라는 보기를 사용하여 탭 보기를 구현할 수 있습니다.
이 보기에서 탭을 구성하고 각 탭에 대한 콘텐츠 보기를 추가할 수 있습니다.

간단한 탭 보기 구현

다음은 간단한 탭 보기를 구현하는 방법의 예입니다.

struct ContentView: View {
    var body: some View {
        TabView {
            Text("첫 번째 탭")
                .tabItem {
                    Image(systemName: "1.circle")
                    Text("첫 번째")
                }
            
            Text("두 번째 탭")
                .tabItem {
                    Image(systemName: "2.circle")
                    Text("두 번째")
                }
        }
    }
}

TabView에는 여러 보기가 있으며 tabItem 속성을 사용하여 각 탭에 대한 캡션 및 이미지를 설정할 수 있습니다.

링크 보기

탭 보기 내에서 다른 보기로 이동하려면 NavigationLink를 사용하여 보기를 연결할 수 있습니다.

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                Text("첫 번째 탭")
                    .navigationBarTitle("첫 번째 탭")
            }
            .tabItem {
                Image(systemName: "1.circle")
                Text("첫 번째")
            }
            
            NavigationView {
                Text("두 번째 탭")
                    .navigationBarTitle("두 번째 탭")
            }
            .tabItem {
                Image(systemName: "2.circle")
                Text("두 번째")
            }
        }
    }
}

NavigationView를 사용하여 보기를 묶고 navigationBarTitle을 사용하여 탐색 모음에 제목을 추가할 수 있습니다.
이제 아무 탭이나 눌러 해당 보기로 이동할 수 있습니다.

탭 보기 스타일 변경

탭 보기의 스타일을 변경하려면 TabViewStyle 프로토콜을 사용하여 스타일을 정의할 수 있습니다.
SwiftUI는 기본적으로 세 가지 탭 스타일을 제공하며 사용자 정의 탭 스타일을 생성할 수도 있습니다.

DefaultTabViewStyle

DefaultTabViewStyle은 선택한 탭의 색상을 변경하는 기본 탭 스타일입니다.
이 스타일은 기본값이므로 설정할 필요가 없습니다.

`TabView {
    *// ...*
}
.tabViewStyle(DefaultTabViewStyle())`

PageTabViewStyle

PageTabViewStyle은 선택한 탭을 중앙에 배치하여 페이지를 넘기는 모양을 제공합니다.

TabView {
    // ...
}
.tabViewStyle(PageTabViewStyle())

CarouselTabViewStyle

CarouselTabViewStyle을 사용하면 선택한 탭이 중앙에 있는 동안 좌우로 스와이프하여 다른 탭을 볼 수 있습니다.

TabView {
    // ...
}
.tabViewStyle(CarouselTabViewStyle())

탭 보기에 아이콘 이미지 추가

이미지를 사용하여 탭 보기의 각 탭에 아이콘 이미지를 추가합니다.
예를 들어 첫 번째 탭에 첫 번째 원 아이콘을 추가하는 방법은 다음과 같습니다.

TabView {
    Text("첫 번째 탭")
        .tabItem {
            Image(systemName: "1.circle")
            Text("첫 번째")
        }
    
    Text("두 번째 탭")
        .tabItem {
            Image(systemName: "2.circle")
            Text("두 번째")
        }
}

탭 보기에 배지 추가

배지 속성을 사용하여 탭 보기의 각 탭에 배지를 추가합니다.
이 속성에는 이 탭에 표시될 배지에 대한 정보가 포함되어 있습니다.

TabView {
    Text("첫 번째 탭")
        .tabItem {
            Image(systemName: "1.circle")
            Text("첫 번째")
        }
        .badge(1)
    
    Text("두 번째 탭")
        .tabItem {
            Image(systemName: "2.circle")
            Text("두 번째")
        }
        .badge(2)
}

정리하다

위에서 SwiftUI에서 탭 보기를 구현하는 방법을 살펴보았습니다.

탭 보기는 서로 다른 보기 사이를 쉽게 전환하고 탐색할 수 있으므로 iOS 애플리케이션을 개발할 때 유용합니다.