화면이 늘어나면 늘어날수록 적절한 카테고리별로 Tab을 나누면
사용자가 더 편리하게 사용할 수 있죠.
UIKit의 UITabBar를 지나서 ~~~~~ SwiftUI의 TabView 시대가 왔어요.
https://developer.apple.com/documentation/swiftui/tabview

Tab View는 다들 아시겠지만 스크린샷의 초록색 부분이쥬 ?
오늘은 Tab View의 구현뿐만 아니라 App 전체에서 핸들링할 수 있게 구현해보려해요.
가보시죠 ~ 고고씽 ~~~ !
목차
- TabView 구현
- 선택된 Tab을 ObservableObject로 활용해보자.
1. TabView 구현
struct SampleView: View { @State private var currentTab = 0 var body: some View { TabView(selection: $currentTab) { Text("첫 화면").tabItem { Text("하나") } Text("두번째 화면").tabItem { Text("둘") } Text("세번째 화면").tabItem { Text("셋") } Text("네번째 화면").tabItem { Text("넷") } } } }

구현된 코드와 화면은 위와 같아용
반복되긴 하지만 간단한 코드로 구현되죠?
하나하나 살펴봅시다 ~ !
TabView(selection: $currentTab) { // 1 Text("첫 화면").tabItem { // 2 Text("하나") // 3 } Text("두번째 화면").tabItem { Text("둘") } }
1. TabView(selection: $currentTab) {}
– selection
– TabView가 처음 나타났을 때 선택될 Tab을 선택합니다.
– Int property와 바인딩을 해두면 유저가 Tab을 선택할 때마다 바인딩한 property 값이 갱신됩니다.
– {}
– closure 안에서는 Tab 화면들을 정의합니다.
2. Text(“첫 화면”).tabItem {}
– 하나의 탭에 표시할 화면을 정의합니다.
– tabItem {}
– 해당 화면의 tabItem 을 정의합니다.
– closure 안에서는 tabItem 의 아이콘과 제목에 대해서 정의합니다.
3. Text(“하나”)
– tabItem 의 아이콘과 제목에 대해서의 정의입니다.
– Image 는 tabItem의 아이콘, Text는 tabItem의 제목이 됩니다.
선택된 Tab을 ObservableObject로 활용해보자.
App에서는 하나의 Tab이 존재합니다.
개발자는 현재 사용자가 어느 Tab에 위치하고 있는지 알아야할 때가 있습니다.
View의 @State property로 선택된 Tab이 저장되어 있으면 외부에서 접근할 수가 없습니다.
여러 객체에서 참조하기 위해서는 Observable Object 로 존재할 필요가 있습니다.
왼쪽은 TabView 구현에 필요한 struct, class의 코드.
오른쪽은 실제적인 TabView 의 코드입니다.
struct MainView: View { var body: some View { NavigationView { List { Text("1") Text("2") }.navigationBarTitle("Main View") } } } struct SubView: View { var body: some View { VStack(spacing: 10.0) { Text("간단한 소개") .foregroundColor(.orange) .bold() Text("Tab View를 활용한 화면입니다.") } } } final class TabViewManager: ObservableObject { @Published var currentTab = 0 static let shared = TabViewManager() func abc() { let tab = TabView() { MainView().tabItem { Text("Main View") }.tag(0) SubView().tabItem { Text("Sub View") }.tag(1) } } }
struct ToyTabView: View { @EnvironmentObject var tabViewManager: TabViewManager var body: some View { TabView(selection: $tabViewManager.currentTab) { MainView().tabItem { Text("Main View") }.tag(0) SubView().tabItem { Text("Sub View") }.tag(1) } } } struct TabView_Previews: PreviewProvider { static var previews: some View { ToyTabView().environmentObject(TabViewManager.shared) } }
저는 EnvirionmentObject 를 활용해보았어요.
EnvirionmentObject 에 대해 궁금하신 분들은 👉SwiftUI | @State, @Binding, @ObservedObject
간단하게 알아봤어요. 기존의 UITabBarController를 사용했더라도
코드수가 적어서 간단하게 이행할 수 있을 것 같네요 …. !
요즘 저는 계속 SwiftUI를 써보고 있는데 IBOutlet도 신경쓰지않아도 되고 😂
단순한 화면을 만드는게 너무 간단해서 다시 UIKit을 쓸 용기가 필요할 것 같아요 ㅋㅋㅋㅋㅋ
블로그글에서 오랜만에 잡담을 했네요 ,,
자 – 그럼 오늘도 즐거운 iOS 개발 되세용 펭빠 !
