iOS/SwiftUI

TabView and NavigationLink

당근쥬스 2023. 10. 19. 09:48
반응형

SwiftUI는 iOS, macOS, watchOS 및 tvOS용 사용자 인터페이스를 구축하기 위한 선언적 프레임워크입니다. 

SwiftUI는 앱에서 복잡한 탐색 패턴을 쉽게 생성할 수 있는 여러 가지 보기와 수정자를 제공합니다. 

오늘은 TabView와 NavigationLink라는 두 가지를 살펴보겠습니다.

 

 

TabView

TabView는 화면 하단에 탭 막대를 표시되며, 사용자가 탭바의 아이텝을 탭하여 다른 보기 간에 전환할 수 있도록 합니다. TabView는 홈, 설정, 즐겨찾기 등과 같은 다양한 섹션이나 카테고리로 앱을 구성하는 데 유용합니다.

TabView를 생성하는 예제: 

struct ContentView: View {
    @State private var selection: Int = 0
    
    var body: some View {
        TabView(selection: $selection) {
            FirstView()
                .tabItem {
                    Label("First", systemImage: "1.square.fill")
                }
                .tag(0)
            
            SecondView()
                .tabItem {
                    Label("Second", systemImage: "2.square.fill")
                }
                .tag(2)
            
            ThirdView()
                .tabItem {
                    Label("Third", systemImage: "3.square.fill")
                }
                .tag(1)
        }
    }
}

 

위 탭뷰는 "FirstView", "SecondView", "ThridView"로 구성되어 있으며 각 뷰는 tabItem()를 사용해서 각 탭의 레이블과 아이콘을 지정하고 있습니다.

또한, "selection" 현재의 탭을 저장하고 추적을 가능하게 하고 있습니다.

 

struct FirstView: View {
    var body: some View {
        ListView(items: [
            "First View List 01",
            "First View List 02",
            "First View List 03",
            "First View List 04",
            "First View List 05",
            "First View List 06",
            "First View List 07",
            "First View List 08",
            "First View List 09",
            "First View List 10",
        ])
    }
}

struct SecondView: View {
    var body: some View {
        ListView(items: [
            "Second View List 01",
            "Second View List 02",
            "Second View List 03",
            "Second View List 04",
            "Second View List 05",
            "Second View List 06",
            "Second View List 07",
            "Second View List 08",
            "Second View List 09",
            "Second View List 10",
        ])
    }
}

struct ThirdView: View {
    var body: some View {
        ListView(items: [
            "Third View List 01",
            "Third View List 02",
            "Third View List 03",
            "Third View List 04",
            "Third View List 05",
            "Third View List 06",
            "Third View List 07",
            "Third View List 08",
            "Third View List 09",
            "Third View List 10",
        ])
    }
}

각 탭의 뷰는 "ListView"에 아이템을 전달해서 리스트 화면을 만들고 있습니다.

 

 

 

NavigationLink

 

NavigationLink는 화면 전환을 제어하는 ​​뷰입니다. NavigationLink는 Navigation Stack 내의 한 화면에서 다른 화면으로 이동하는 데 사용됩니다. NavigationLink는 앱에서 리스트-상세 뷰와 같은 계층적 탐색 패턴을 생성하는 데 유용합니다.

 

NavigationLink를 생성하는 예제: 

struct ListView: View {
    var items: [String]
    
    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                NavigationLink(destination: DetailView(item: item)) {
                    Text(item)
                }
            }
        }
    }
}

struct DetailView: View {
    var item: String
    
    var body: some View {
        Text(item)
    }
}

 NavigationLink를 생성하려면 이동하려는 뷰("DetailView")와 이동을 하기위해 버튼 역할을 하는 뷰("Text(item)")를 제공해야 합니다.예를 들어 다음 코드는 항목 목록에서 항목의 세부정보 보기로 이동하는 NavigationLink를 만듭니다.

 

 

Combining TabView and NavigationLink

 

TabView와 NavigationLink를 결합하여 앱에서 더욱 고급 탐색 패턴을 만들 수 있습니다. 예를 들어 TabView를 사용하여 앱의 다양한 섹션을 표시하고, 각 탭 내의 NavigationLink를 사용하여 하위 보기 또는 세부정보로 이동할 수 있습니다.

 

TabView 와 NavigationLink를 생성한 예제: 

struct ContentView: View {
    @State private var selection: Int = 0

    var body: some View {
        TabView(selection: $selection) {
            FirstView()
                .tabItem {
                    Label("First", systemImage: "1.square.fill")
                }
                .tag(0)

            SecondView()
                .tabItem {
                    Label("Second", systemImage: "2.square.fill")
                }
                .tag(2)

            ThirdView()
                .tabItem {
                    Label("Third", systemImage: "3.square.fill")
                }
                .tag(1)
        }
    }
}

 

TabView 및 NavigationLink는 SwiftUI 앱에서 복잡한 탐색 패턴을 생성할 수 있는 두 가지 강력한 뷰입니다.

이것 들을 결합하면 사용자 경험을 향상시키는 풍부하고 직관적인 사용자 인터페이스를 만들 수 있습니다.

 

반응형