SwiftUI Tutorials_ TopBar Style TabView

• KavSoft의 튜토리얼 : TopBar

 

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

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

 

• Xcode 14.1
• iOS 16.1

 

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

 

이번 내용은 Picker를 사용하여 TopBar 스타일의 탭뷰를 만드는 것을 학습합니다.

먼저 탑바 탭뷰에 보여질 세 개의 뷰를 준비합니다. ... 지만! 지난 번에 탭뷰 튜토리얼에서 사용했던 코드를 그대로 쓰겠습니다.

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)
    }
}

 

Picker라는 건 이 튜토리얼을 통해 처음 알았는데 Picker와 selection된 탭에 따라 보여줄 뷰를 VStack 안에 넣어줍니다.

그리고 현재 선택한 탭을 나타낼 State 변수를 추가합니다.

(추가적인 사족을 붙이자면 Picker는 단순히 이런 탭을 만드는데 사용되는 것뿐 아니라 Picker를 담는 방식에 따라 사용방식도 조금씩 달라집니다. 하지만 이번에 사용하는 스타일은 세그먼트 스타일을 적용하여 상단 탑바형식의 탭뷰를 보여주게 됩니다.)

 

이 Picker를 사용할 때 selection에 선택 탭을 관리할 변수를 넣고, 각 뷰에 tag를 붙여줍니다.

이것을 작성하지 않으면 탭 선택이 되지 않습니다.

 

label은 사실 어디에 쓰이는 건지 모르겠네요,,, ㅋㅋㅋㅋㅋ

아무곳에도 안나옴 ㅜㅜ 

struct TopBarView: View {
    
    @State private var currentTab = 0
    
    var body: some View {
        
        VStack {
            Picker(selection: $currentTab) {
                Image(systemName: "house.fill")
                    .tag(0)
                
                Image(systemName: "flame.fill")
                    .tag(1)
                
                Image(systemName: "paperplane.fill")
                    .tag(2)
            } label: {
                Text("대체 어디에 나오는건지 모르겠다...")
            }
            .pickerStyle(SegmentedPickerStyle())
            .padding(.top, 10)
            
            Spacer()
            
            if currentTab == 0 {
                Page1()
            } else if currentTab == 1 {
                Page2()
            } else {
                Page3()
            }
        }
    }
}

 

Picker의 스타일을 작성할 때는 . dot 을 사용하여 스타일을 지정할 수도 있습니다. 

즉 .pickerStyle(.segmented)  와 같이 작성이 가능하다는 의미입니다.

 

Picker의 다양한 사용법에 대해서는 이후에 좀 더 사용해보아야 할 것 같습니다.

 

아래 이미지에서 탑바가 중간에 떠있는 것 처럼 보이는 것은 기본적으로 safeArea만큼의 공간이 떨어져있기 때문으로 보여집니다.

현재는 navigation 뷰 안에 보여지도록 구현을 하여 중간에 떨어져 보이나 이 화면만 구현하게 되면 적절한 위치에 보여지게 됩니다.