SwiftUI | Tab View

화면이 늘어나면 늘어날수록 적절한 카테고리별로 Tab을 나누면
사용자가 더 편리하게 사용할 수 있죠.

UIKit의 UITabBar를 지나서 ~~~~~ SwiftUI의 TabView 시대가 왔어요.

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

Tab View는 다들 아시겠지만 스크린샷의 초록색 부분이쥬 ?

오늘은 Tab View의 구현뿐만 아니라 App 전체에서 핸들링할 수 있게 구현해보려해요.
가보시죠 ~ 고고씽 ~~~ !



목차

  1. TabView 구현
  2. 선택된 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("넷")
            }
        }

    }
}
Preview 최고 ,,,, ! 🥰


구현된 코드와 화면은 위와 같아용
반복되긴 하지만 간단한 코드로 구현되죠?

하나하나 살펴봅시다 ~ !

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 의 아이콘과 제목에 대해서의 정의입니다.
ImagetabItem의 아이콘, TexttabItem의 제목이 됩니다.




선택된 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 개발 되세용 펭빠 !

펭수 짤 모음(최신업데이트) 인사 웃음 화남 슬픔 상황별 이미지 100장 ...

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중