화면이 늘어나면 늘어날수록 적절한 카테고리별로 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 개발 되세용 펭빠 !
