하단의 아이콘을 터치하면 다른 화면으로 슉슉 넘어가는 탭뷰에 대해 알아보자.
// Created by Toughie on 2023/05/01.
//
import SwiftUI
struct TabViewPrac: View {
@State var selectedTab: Int = 0
var body: some View {
//selection 값에 따라 화면 전환_ 시작 탭 정할 수도 있음.(현재는 0번)
TabView(selection: $selectedTab ) {
MainView(selectedTab: $selectedTab)
//탭바에 있는 아이콘
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
//탭뷰의 태그
.tag(0)
BrowserView(selectedTab: $selectedTab)
.tabItem {
Image(systemName: "globe")
Text("Browse")
}
.tag(1)
Text("MyPage")
.tabItem {
Image(systemName: "person.fill")
Text("Profile")
}
.tag(2)
}
.tint(Color.black)
}
}
struct TabViewPrac_Previews: PreviewProvider {
static var previews: some View {
TabViewPrac()
}
}
//뷰를 따로 분리_보통 다른 파일로 관리되는 경우가 많다.
struct MainView: View {
//하위 뷰에서 상위 뷰를 업데이트하는 경우 -> Binding
@Binding var selectedTab: Int
var body: some View {
ZStack {
Color.red.opacity(0.5).edgesIgnoringSafeArea(.top)
VStack {
Text("Main Tab")
.font(.largeTitle)
.foregroundColor(.white)
Button {
selectedTab = 2
} label: {
Text("go to profile")
.font(.headline)
.padding()
.padding(.horizontal)
.background(Color.white)
.cornerRadius(10)
}
}
}
}
}
struct BrowserView: View {
@Binding var selectedTab: Int
var body: some View {
ZStack {
Color.blue.opacity(0.5).edgesIgnoringSafeArea(.top)
VStack {
Text("Browser")
.font(.largeTitle)
.foregroundColor(.white)
Button {
selectedTab = 0
} label: {
Text("go to main")
.font(.headline)
.padding()
.padding(.horizontal)
.background(Color.white)
.cornerRadius(10)
}
}
}
}
}
PageTabViewStyle()
또한 여러 장의 카드 뉴스, 사진 등을 넘길 때(페이징) 아래에 *동그란 원들이 표시되는 화면을 봤을 것이다.
*TabViewSelectionIndicator라고 한다.
이 또한 다른 스타일의 탭뷰이다!
// Created by Toughie on 2023/05/01.
//
import SwiftUI
struct TabViewPrac: View {
@State private var selectedTab: Int = 0
let icons: [String] = ["heart.fill", "globe", "house.fill", "person.fill"]
var body: some View {
TabView(selection: $selectedTab) {
ForEach(icons.indices, id: \.self) { index in
Image(systemName: icons[index])
.resizable()
.scaledToFit()
.foregroundColor(Color.white)
.padding(50)
.tag(index)
}
}
.background(
RadialGradient(colors: [Color.pink, Color.blue], center: .center, startRadius: 30, endRadius: 300)
)
.frame(height: 400)
//페이지 탭뷰 스타일로 변경, indexDisplayMode를 .never로 설정하면 인디케이터가 사라짐
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
}
}
'SwiftUI > SwiftUI(Basic)' 카테고리의 다른 글
43. [SwiftUI] 마크업, 문서화 (코드 정리) (0) | 2023.05.02 |
---|---|
42. [SwiftUI] 다크모드, 적응형 컬러 (0) | 2023.05.02 |
40. [SwiftUI] Slider() 슬라이더, CVarARG (0) | 2023.05.01 |
39. [SwiftUI] Stepper() 스테퍼, Strideable (0) | 2023.05.01 |
38. [SwiftUI] DatePicker() 데이트피커 (0) | 2023.04.30 |