[SwiftUI] 상단탭바 구현하기 2가지 방법 (Picker로 간편히 & namespace와 ViewBuilder로 Custom하기)

 

1. Picker와 switch를 활용한 간단 상단 탭뷰 1 - 상단 탭바 이름 변수 설정

 

// ContentView.swift

enum moneyTapInfo : String, CaseIterable {
    case my = "내 보유"
    case trend = "인기 종목"
    case news = "경제 뉴스"
}

 

 

 

 

 

2. Picker와 switch를 활용한 간단 상단 탭뷰 2 - 기본 뷰에서의 MainView 불러오는 코드 작성

 

// ContentView.swift

struct ContentView: View {
    var body: some View {
        MainView()
    }
}

 

 

 

 

 

3. Picker와 switch를 활용한 간단 상단 탭뷰 3 - MainView에서 기본적인 하단 탭바 구성

 

// ContentView.swift

struct MainView: View {
    var body: some View {
        NavigationView {
            TabView {
                ScrollViewReader { scrollView in
                    ScrollView {
                        EmptyView()
                    }
                }
                .tabItem {
                    Image(systemName: "house")
                    Text("홈")
                }
                ScrollViewReader { scrollView in
                    ScrollView {
                        EmptyView()
                    }
                }
                .tabItem {
                    Image(systemName: "suitcase")
                    Text("워크")
                }
                .badge(0)
                ScrollViewReader { scrollView in
                    ScrollView {
                        EmptyView()
                    }
                }
                .tabItem {
                    Image(systemName: "building.2")
                    Text("클래스")
                }
                .badge(0)
                ScrollViewReader { scrollView in
                    ScrollView {
                        MoneyTabTopTabView()
                    }
                }
                .tabItem {
                    Image(systemName: "m.square")
                    Text("머니")
                }
                .badge(0)

 

 

 

 

 

4. Picker와 switch를 활용한 간단 상단 탭뷰 4 - 마지막 탭에서 상단 탭바 구현

 

// ContentView.swift

struct MoneyTabTopTabView: View {
    
    @State private var selectedPicker: moneyTapInfo = .my
    
    var body: some View {
        VStack {
            
            Picker("Flavor", selection: $selectedPicker) {
                ForEach(moneyTapInfo.allCases, id: \.self) {
                    Text($0.rawValue)
                }
            }
            .pickerStyle(.segmented)
            .padding()
            
            detailView(moneyTabs: selectedPicker)
        }
    }
}

 

 

 

 

 

5. Picker와 switch를 활용한 간단 상단 탭뷰 5 - 상단 탭바 안의 페이지 구현 예시

 

// ContentView.swift

struct detailView: View {
    var moneyTabs: moneyTapInfo
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            switch moneyTabs {
            case .my:
                ForEach(0..<4) { _ in
                    Text("보유 주식")
                        .padding()
                    Image(systemName: "newspaper")
                        .resizable()
                        .frame(maxWidth: 70, minHeight: 70)
                }
            case .trend:
                ForEach(0..<5) { _ in
                    Text("트렌드 나열")
                }
            case .news:
                ForEach(0..<6) { _ in
                    Text("뉴스 기사 나열")
                }
            }
            // switch 종료
        }
        // ScrollView 종료
    }
}

 

 

 

 

 

6. namespace와 ViewBuilder를 활용한 간단 상단 탭뷰 1 - 기본적인 작업 동일하게 진행

 

1~5번 중 1,2,3,5번은 동일합니다.

 

1번

// ContentView.swift

enum moneyTapInfo : String, CaseIterable {
    case my = "내 보유"
    case trend = "인기 종목"
    case news = "경제 뉴스"
}

 

2번

// ContentView.swift

struct ContentView: View {
    var body: some View {
        MainView()
    }
}

 

3번

// ContentView.swift

struct MainView: View {
    var body: some View {
        NavigationView {
            TabView {
                ScrollViewReader { scrollView in
                    ScrollView {
                        EmptyView()
                    }
                }
                .tabItem {
                    Image(systemName: "house")
                    Text("홈")
                }
                ScrollViewReader { scrollView in
                    ScrollView {
                        EmptyView()
                    }
                }
                .tabItem {
                    Image(systemName: "suitcase")
                    Text("워크")
                }
                .badge(0)
                ScrollViewReader { scrollView in
                    ScrollView {
                        EmptyView()
                    }
                }
                .tabItem {
                    Image(systemName: "building.2")
                    Text("클래스")
                }
                .badge(0)
                ScrollViewReader { scrollView in
                    ScrollView {
                        MoneyTabTopTabView()
                    }
                }
                .tabItem {
                    Image(systemName: "m.square")
                    Text("머니")
                }
                .badge(0)

 

5번

// ContentView.swift

struct detailView: View {
    var moneyTabs: moneyTapInfo
    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            switch moneyTabs {
            case .my:
                ForEach(0..<4) { _ in
                    Text("보유 주식들")
                        .padding()
                    Image(systemName: "newspaper")
                        .resizable()
                        .frame(maxWidth: 70, minHeight: 70)
                }
            case .trend:
                ForEach(0..<5) { _ in
                    Text("트렌드 나열")
                }
            case .news:
                ForEach(0..<6) { _ in
                    Text("뉴스 기사 나열")
                }
            }
            // switch 종료
        }
        // ScrollView 종료
    }
}

 

 

 

 

 

7. namespace와 ViewBuilder를 활용한 간단 상단 탭뷰 2 - 탭뷰 직접 제작해 구현

 

// ContentView.swift

struct MoneyTabTopTabView: View {
    
    @State private var selectedPicker: moneyTapInfo = .my
    @Namespace private var animation
    
    var body: some View {
        VStack {
            animate()
            detailView(moneyTabs: selectedPicker)
        }
    }
    
    @ViewBuilder
    private func animate() -> some View {
        HStack {
            ForEach(moneyTapInfo.allCases, id: \.self) { item in
                VStack {
                    Text(item.rawValue)
                        .frame(maxWidth: .infinity/4, minHeight: 50)
                        .font(.title3)
                        .foregroundColor(selectedPicker == item ? .black: .gray)
                    
                    if selectedPicker == item {
                        Capsule()
                            .foregroundColor(.black)
                            .frame(height: 3)
                            .font(.title3)
                            .matchedGeometryEffect(id: "info", in: animation)
                    }
                }
                .onTapGesture {
                    withAnimation(.easeInOut) {
                        self.selectedPicker = item
                    }
                }
            }
        }
    }
}