41. [SwiftUI] Tab bar, TabView 탭바, 탭뷰 / PageTabViewStyle()

하단의 아이콘을 터치하면 다른 화면으로 슉슉 넘어가는 탭뷰에 대해 알아보자.

//  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))
    }
}