[SwiftUI] TabView 사용해보기

https://developer.apple.com/documentation/swiftui/tabview

Apple Developer Documentation

 

SwiftUI에서는 TabView를 이용해서 탭간 이동을 할 수 있습니다.

공식문서의 예제 코드를보면 탭뷰안에 뷰를 넣고 tag에 따라 뷰가 표시되는 방식입니다.

 

하지만, 저는 별도의 selection을 이용하여 탭뷰를 구성해보겠습니다.

 

// Constants

enum Constants {

	enum HomeTabItem: String, Hashable {
    	case Home
        case Champion
        case Setting
        
        // NavigationView 사용시 타이틀 설정
        var title: String {
        switchc self {
        case .Home:
        	return "홈"
        case .Champion:
        	return "챔피언"
        case .Setting:
        	return "설정"    
    }

}

// ContentView

import SwiftUI

struct ContentView: View {

	typealias TabItemType = Constants.HomeTabItem
    
    // 탭 셀력선
    @State private var tabSelection: TabItemType = .Home

	var body: some View {
    	TabView(selection: $tabSelection) {
        	HomeView()
            	.tag(TabItemType.Home)
                .tabItem {
                	Label("홈", systemImage: "house.fill")
                }
                
            ChampionView()
            	.tag(TabItemType.Champion)
                .tabItem {
                	Label("홈", systemImage: "crown.fill")
                }
                
                
            SettingView()
            	.tag(TabItemType.Setting)
                .tabItem {
                	Label("홈", systemImage: "gearshape")
                }
        }
        // 탭바 색 설정
        .accentColor(.purple)
        .onAppear {
        	// 탭바 배경색 설정
            UITabBar.appearance().backgroundColor = .gray
            // 미선택 탭바 색 설정
            UIBarBar.appearance().unselectedItemTintColor = .red
        }
    }

}

 

예시 코드는 위와 같습니다.

탭뷰 안에 표시할 뷰를 넣고 tag()를 통해 셀렉션을 설정해주고 tabItem을 통해 이미지와 텍스트를 표시해줍니다.

 

이때, accentColor()를 통해 선택된 탭바의 색을 변결할 수 있습니다.

 

또한 탭바의 배경색이나 미선택 탭바의 색을 바꿀 수 있는데 이는 SwiftUI TabView에서는 할 수 없으므로 UIKit 문법을 이용해 onAppear에서 설정해줄 수 있습니다.