TabView

TabView 는 탭 기반의 사용자 인터페이스를 구성하는데 사용하는 뷰 입니다.

여러개의 다른 화면을 탭으로 전환하여 제공할 수 있습니다.

 

구성요소

탭 아이템 : 각 탭은 특정 화면을 나타냅니다. 일반적으로는 아이콘과 레이블이 포함됩니다.

탭 뷰: 여러 개의 탭을 포함하는 컨테이너 뷰 입니다.

 

간단한 사용법

코드가 사진하나에 안담기기 때문에 코드블럭을 사용겠습니다.

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                    Text("홈")
                }
            
            SettingsView()
                .tabItem {
                    Image(systemName: "gear")
                    Text("설정")
                }
            
            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("프로필")
                }
        }
    }
}

struct HomeView: View {
    var body: some View {
        Text("홈 화면")
    }
}

struct SettingsView: View {
    var body: some View {
        Text("설정 화면")
    }
}

struct ProfileView: View {
    var body: some View {
        Text("프로필 화면")
    }
}
#Preview {
    ContentView()
}

 

 

 

 

해당 프리뷰 예제와 같이 화면 아래의 네비게이션 바를 눌면 

각각에 해당하는 화면이 나오게 됩니다.

 

TabView: 여러개의 자식 뷰를 포함합니다. 자식 뷰들은 탭으로 표시되게 됩니다.

 

tabItem : 각 뷰에 대해 tabItem 수정자를 사용하여 탭의 아이콘과 레이블을 정의합니다.

 

자식 뷰 : HomeView,SettingView, PreofileView 는 각 탭에서 표시되는 뷰 입니다. 

각각의 화면 내용을 정의합니다.

 

응용

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            HomeView()
                .tabItem {
                    Image(systemName: "house")
                    Text("홈")
                }
            
            SettingsView()
                .tabItem {
                    Image(systemName: "gear")
                    Text("설정")
                }
            
            ProfileView()
                .tabItem {
                    Image(systemName: "person")
                    Text("프로필")
                }
        }
    }
}

struct HomeView: View {
    var body: some View {
        NavigationView {
            List {
                ForEach(1...10, id: \.self) { index in
                    NavigationLink(destination: DetailView(item: index)) {
                        Text("섭섭블로그 \(index)")
                    }
                }
            }
            .navigationTitle("홈")
        }
    }
}

struct DetailView: View {
    var item: Int
    
    var body: some View {
        VStack {
            Text("상세 정보")
                .font(.largeTitle)
            Text("아이템 번호: \(item)")
                .font(.title)
        }
        .padding()
    }
}

struct SettingsView: View {
    @State private var notificationsEnabled: Bool = true
    
    var body: some View {
        Form {
            Section(header: Text("알림 설정")) {
                Toggle("알림 켜기", isOn: $notificationsEnabled)
            }
            Section(header: Text("정보")) {
                Text("섭섭의 복습블로그")
            }
        }
        .navigationTitle("설정")
    }
}

struct ProfileView: View {
    @State private var name: String = "사용자 이름"
    
    var body: some View {
        VStack {
            Text("프로필")
                .font(.largeTitle)
            TextField("이름을 입력하세요", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()
            Text("현재 이름: \(name)")
                .padding()
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

 

각각의 자식 뷰 안쪽에 특정한 기능들을 넣은 소스코드 입니다.