SwiftUI TabView

2021년 11월 11일 수정

≡ 목차 (Table of Contents)

TabView

SwiftUI의 TabView 컴포넌트는 iOS의 TabBarController와 비슷한 기능을 제공한다. macOS에서는 단순한 문자열 버튼 형태의 단순한 상단 탭을 제공한다.

기본 사용법

아래 예제는 두 개의 탭을 표시하고 각 탭은 그냥 텍스트만 덩그러니 보이는 뷰가 표시된다.

struct SomeView: View {
    var body: some View {
        TabView {
            Text("Tab 1 View")
                .badge(10)
                .tabItem {
                    Image(systemName: "folder")
                    Text("Tab 1")
                }
            Text("Tab 2 View")
                .tabItem {
                    Text("Tab 2")
                }
        }
    }
}

보다시피 .tabItem 을 이용해 탭바의 아이템 모양을 정의할 수 있다. 이미지는 필수가 아니며 이외에 배지 등을 설정할 수도 이다.

선택된 탭 지원

현재 선택된 탭이 무엇인지 알기 위해서는 아래와 같이 구현할 수 있다.

struct SomeView: View {
    @State private var tabSelection = 0

    var body: some View {
        TabView(selection: $tabSelection) {
            Text("Tab 1 View")
                .tabItem { ... }
                .tag(0)
            Text("Tab 2 View")
                .tabItem { ... }
                .tag(1)
        }
    }
}

태그(tag)의 숫자가 선택된 탭의 고유 번호 역할을 한다.

기타

.tabViewStyle() 을 이용하여 페이지 스타일 등등 다른 형식을 지원할 수 있다. 다만 macOS에서는 아직까진 자동 이외에는 다른 스타일이 없고 거기다 모양도 안 이쁘니 커스텀 뷰 형태로 구현하는게 나을지도 모른다.

이 글을 링크하는 글들

❏ SwiftUI

SwiftUI의 소개와 관련된 글 정리 Updated on 2022년 11월 2일