SwiftUI TabView

Posted on | In

개요

SwiftUI에서 TabView에 대해서 알아보고 사용법을 익혀보겠다.

애플 공식문서



TabView

struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View

탭뷰는 상호작용하는 UI 요소들을 사용한 여러개의 자식뷰들을 서로 스위칭 할 수 있는 뷰이다.

간단하게 탭창으로 여러개의 뷰를 전환할 수 있는 뷰이다. UIKit에서는 UITabBarController인듯

UI를 탭으로 구성하기 위해서 tabItem modifier를 TabView에 적용한다.

badge로 각각의 탭에 알림을 띄울 수 있다.



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
TabView {
    ReceivedView()
        .badge(2)
        .tabItem {
            Label("Received", systemImage: "tray.and.arrow.down.fill")
        }
    SentView()
        .tabItem {
            Label("Sent", systemImage: "tray.and.arrow.up.fill")
        }
    AccountView()
        .badge("!")
        .tabItem {
            Label("Account", systemImage: "person.crop.circle.fill")
        }
    VStack {
        Text("예시 탭뷰")
            .font(.largeTitle)
        Image(systemName: "Swift")
    } .tabItem {
        Image(systemName: "person")
        Text("예시 탭")
    }
}

위의 예시는 공식문서 예시로 뷰를 하나 만든거에 modifier를 붙였다. 그래서 뷰 따로 안만들고 뷰 뒤에 바로 붙여보겠다.

탭 아이템은 Label을 사용하거나 이미지, 텍스트를 원하는 방식으로 구성하면된다.

작동방식으로 탭 아이템이 각각의 뷰와 1대1로 연결된 것처럼 보이지만 사실은 아니다.

특정 뷰에 modifier로 연결된 방식이 아니라 탭뷰에 순서로 연결된다.

그래서 뷰를 3개만들었는데 탭 아이템을 2개만 만들면 마지막것이 안나온다.



Tag

내가 어떤 탭에 있는지 확인할 때 사용한다.

탭뷰의 제네릭 SelectionValue를 관리하는 생성자를 사용해 탭뷰를 만든 뒤 각 탭별로 .tag(SelectionValue)를 넣어주면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
enum TabItems {
        case A, B, C
}
@State private var selected = TabItems.A
    
var body: some View {
    TabView(selection: $selected) {
        Text("A 뷰")
            .tag(TabItems.A)
            .tabItem { Image(systemName: "a.circle").imageScale(.large) }

        Text("B 뷰")
            .tag(TabItems.B)
            .tabItem { Image(systemName: "b.circle").imageScale(.large) }
            
        Text("C 뷰")
            .tag(TabItems.C)
            .tabItem { Image(systemName: "c.circle").imageScale(.large) }
    }
}



탭 색깔 변경

지금은 accentColor로 한다는데 없어진단다.

tint 아니면 asset의 accent color를 사용하란다.



위에 탭 뷰 만들기

탭 뷰를 위에 만들고 싶었다.

아무리 찾아봐도 안나온다.

그래서 ViewRouter 만들고 버튼으로 탭뷰 역할을 하도록 했다.

이게 맞나..??

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Foundation
import Combine
import SwiftUI



class ViewRouter : ObservableObject{
    
    let objectWillChange = PassthroughSubject<ViewRouter,Never>()
    
    var currentPage: String = "page1" {
        didSet{
            objectWillChange.send(self)
        }
    }
}

버튼들
~~~
~~~
Spacer()
                if viewRouter.currentPage == "page1" {
                    SubView(viewRouter: viewRouter)
                }
                else if viewRouter.currentPage == "page2"{
                    SubView2(viewRouter: viewRouter)
                }