WooKoo Blog

물과 같이

개발/개발

[SwiftUI] - TabView 어떻게 만들지?

WooKoo 2022. 7. 26. 23:20

안녕하세요 오늘은 SwiftUI의 TabView에 대해서 간단하게 정리해볼거에요

UIKit 에서는 TabbarViewcontroller 를 사용해서 탭바를 만들었는데요

 

SwiftUI에서는 TabView라는 이름으로 하나의 뷰처럼 이용할 수 있어요

 

바로 알아볼께요

 

먼저 탭바를 선택했을 때 사용할 selection을 하나 만들어주죠

 

@State private var selection = 1

 

그 후에 아래와 같은 형태로 만들어주면됩니다.

    TabView(selection: $selection) {
      Text("홈")
        .tabItem {
          Text("홈탭")
        }.tag(1)

      Text("두번 째 탭")
        .tabItem {
          Text("둘탭")
        }.tag(2)

      Text("셋탭")
        .tabItem {
          Text("셋탭")
        }.tag(3)
    }

탭뷰안에 셀렉션 인덱스 변수를 담아주고

Text로 각 뷰에 해당하는 뷰를 그려주고 (탭뷰는 뷰컨트롤러 교체가 아닌 뷰 교체)

 

각 탭의 Label이나 이미지는 tabItem에 추가해주면됩니다.

이미지를 추가하려면 아래와 같이 추가하면됩니다.

 Text("홈")
        .tabItem {
          Image("사진이름")
          Text("홈탭")
        }.tag(1)