SwiftUI Tutorials_ TabView

• KavSoft의 튜토리얼 : Tabbed View

 

KavSoft 채널의 튜토리얼에 대한 내용을 하나씩 해보면서 SwiftUI에 대해 공부해보려고 합니다.

따라서 이 글은 위 튜토리얼에 대한 정리 글입니다.

 

• Xcode 14.0.1
• iOS 16.0

** 코드는 일부 수정하여 영상과 조금 다를 수 있습니다.

이번 내용은 아주 기본적인 탭뷰 사용에 대한 것을 학습합니다.

먼저 탭뷰에 보여질 세 개의 뷰를 준비합니다! 당연히 4개 5개도 준비할 수 있습니다.

struct Page1 : View {
    
    var body: some View {
        Text("Hello from page 1")
            .fontWeight(.heavy)
    }
}

struct Page2 : View {
    
    var body: some View {
        Text("Hello from page 2")
            .fontWeight(.heavy)
    }
}

struct Page3 : View {
    
    var body: some View {
        Text("Hello from page 3")
            .fontWeight(.heavy)
    }
}

 

탭뷰를 만드는 방법은 TabView { } 안에 우리가 보여줄 각각의 탭뷰를 순서대로 넣어주면 됩니다.

그리고 각각의 뷰에 .tabItem 이라는 modifier를 사용하여 하단에 보여질 이미지와 텍스트를 넣어줍니다.

 

이때 VStack을 사용하지 않더라도 Image와 Text를 클로저 내에 넣게 되면 아이콘과 텍스트가 위 아래로 나타나게 됩니다.

신기한 것은 순서가 바뀌어도 위에는 아이콘(이미지), 아래에는 텍스트가 표시됩니다.

또한 텍스트를 두 번 넣는다고 두 번 보여지지 않습니다.

 

또 다른 방식으로는 Label을 사용하는 것인데 Label을 사용하면 Image와 Text를 함께 사용한 것과 동일한 결과를 보여줍니다.

struct TabbedView: View {
    var body: some View {
        TabView {
            Page1()
                .tabItem {
                    Label("Home", systemImage: "house.fill")
                }
            
            Page2()
                .tabItem {
                    Image(systemName: "flame.fill")
                    Text("News").fontWeight(.light)
                }
            
            Page3()
                .tabItem {
                    Image(systemName: "paperplane.fill")
                    Text("Share").fontWeight(.light)
                }
        }
    }
}