Adding TabView and tabItem()

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/adding-tabview-and-tabitem]

 

Adding TabView and tabItem()

[동영상 강좌 : https://youtu.be/e7t3Dor9oxI]

SwiftUI를 사용해서 2개의 분리된 뷰를 보여주고자 할때, 가장 쉽고 가장 사용자 직관적인 접근법은 앱의 하단에 탭바를 사용하는 것입니다. 우리의 경우에, 하나의 탭에 메뉴 뷰와 다른 탭에는 현재 주문서를 사용할 것이라는 의미입니다. SwiftUI는 이런 용도로 TabView를 제공하고, UITabBarController 처럼 동작합니다.

 

새로운 SwiftUI View를 만들기 위해 Cmd+N을 누르고, AppView를 입력하세요. 만드려는 탭은 TabView의 인스턴스에 다른 뷰를 넣는 것만큼 쉽지만, 각 뷰의 탭 바 항목에 이미지와 텍스트를 추가하려면 tabItem()modifier을 사용해야 합니다.

 

다음과 같이 AppView 코드를 변경해 봅시다.

struct AppView: View {
    var body: some View {
        TabView {
            ContentView()
                .tabItem {
                    Image(systemName: "list.dash")
                    Text("Menu")
                }

            OrderView()
                .tabItem {
                    Image(systemName: "square.and.pencil")
                    Text("Order")
                }
        }
    }
}

 

우리의 뷰(views) 중에 하나를 자세히 살펴봅시다.

TabView {
    ContentView()
        .tabItem {
            Image(systemName: "list.dash")
            Text("Menu")
        }

 

ContentView의 인스턴스를 만들고, 이미지와 탭 아이템 라벨을 할당합니다 - 탭 바에 있는 뷰를 표현한 것입니다. 이미지는 systemName 초기화를 사용해서 만들어졌으며, SF Symbol 아이콘 세트에 내장된 이미지를 불러옵니다. 

 

탭 바를 사용하려면 2가지 더 남았습니다. 우선, OrderView가 동작할 수 있도록 미리보기 환경에 Order 인스턴스를 추가해야 합니다.

struct AppView_Previews: PreviewProvider {
    static let order = Order()

    static var previews: some View {
        AppView().environmentObject(order)
    }
}

 

두번째, SceneDelegate.swift를 변경해서 ContentView 대신에 AppView 만들어야 합니다. 다음에 오는 줄을 찾으세요.

let contentView = ContentView().environmentObject(order)

 

그리고 다음으로 교체하세요.

let contentView = AppView().environmentObject(order)

 

이제 마지막으로 Cmd+R을 눌러서 앱을 빌드하고 실행할 수 있어야 하며, 음식 몇개를 선택하고, 주문에 추가하고, Order 탭에 자동으로 해당 정보가 보여야 합니다.

 

이러한 접근 방법에서 내가 좋아하는 것은 UI의 다른 부분을 동기화하는데 정말 많은 노력을 하지 않는 것입니다 - ObservableObject 프로토콜과 @EnvironmentObject 속성은 UI의 거의 모든 부분을 최신 상태로 유지하게 해줍니다. ItemDetail 화면에 주문에 추가된 것이 표시되자마자, OrderView 화면은 변경사항을 보여주기 위해서 자동으로 갱신할 것입니다.

 

백그라운드에서, environment object에서 의존하는 모든 뷰는 변경사항을 알릴때 갱신될 것입니다. SwiftUI는 실제로 body 프로퍼티를 다시 호출하는 것을 의미하며, body 안쪽에 있는 모든 것들이 environment에서 최신 값을 읽을 것이라는 것을 의미합니다.