SwiftUI - TabView 사용하기

안녕하세요. Diana 입니다!

오늘은 많은 앱들에서 사용하고 있는 TabView를 SwiftUI를 사용해서 구현하는 방법을 알아보려고 합니다.

빠르게 시작해볼게요~

 

---

 

우선 구현에 앞서 공식문서를 확인하고 시작하겠습니다.

공식문서에 따르면 TabView는 Interactive 유저 인터페이스 요소들을 사용하여 여러 자식 뷰 사이를 스위칭하는 것이라고 합니다.

아래 설명을 보니 선택한 값을 구분할 SelectionValue와 선택에 따라 변경될 자식뷰인 Content를 필요로 하네요!

이건 UIKit 등을 통해 TabView를 구현해본 입장으로써 어느 정도 이해가 됐습니다.

 

그럼 이제 구현해볼까요?

 

var body: some View {
        TabView {
            Text("First View")
                .tabItem {
                    Image(systemName: "globe")
                    Text("First")
                }
            Text("Second View")
                .tabItem {
                    Image(systemName: "heart")
                    Text("Second")
                }
            Text("Third View")
                .tabItem {
                    Image(systemName: "star")
                    Text("Third")
                }
                .badge(10)
        }
    }

 

위의 코드를 보면 우선 TabView를 통해 자식 뷰를 감쌀 Container를 구현한 뒤 내부에 Child View를 구현해 주었습니다.

그리고 각각의 ChildView에 tabItem 속성을 사용하여 TabBar에 표시될 아이콘 이미지와 Tab Title을 지정해주었습니다.

 

여기서 우리는 badge 속성을 사용하여 Tab Item에 표시될 badge도 커스텀하게 설정해줄 수 있습니다.

 

해당 코드의 결과는 위와 같습니다.

굉장히 간단하게 TabView가 구현된 것을 확인할 수 있습니다.

 

여기까지는 우리가 흔히 보던 TabBar의 형태죠.

하지만 SwiftUI의 TabView에는 TabViewStyle이라는 재미있는 속성이 존재합니다.

TabView {
            Text("First View")
                .foregroundStyle(.white)
            Text("Second View")
                .foregroundStyle(.white)
            Text("Third View")
                .foregroundStyle(.white)
        }
        .background(.black)
        .tabViewStyle(.page)

이 속성에는 page라는 스타일이 존재하는데 사용해보면 아래와 같이 TabView가 페이지 형태로 나타납니다.

옆으로 스크롤 가능한 형태가 되는거죠.

 

그럼 page 스타일의 TabView에서 tabItem을 설정하게 되면 어떻게 될까요?

Text("First View")
                .foregroundStyle(.white)
                .tabItem {
                    Image(systemName: "star")
                }
            Text("Second View")
                .foregroundStyle(.white)
                .tabItem {
                    Image(systemName: "heart")
                }
            Text("Third View")
                .foregroundStyle(.white)
                .tabItem {
                    Image(systemName: "square")
                }

 

이렇게 각 ChildView에 tabItem 속성을 적용시키면 아래와 같이 페이징 인디케이터의 형태를 커스텀할 수 있습니다.

 

이렇게 오늘은 TabView의 사용에 대해 알아보았습니다.