Swift UI TabBar

Swift UI  TabView

 

오늘은 SwiftUI에서 간단하게 TabView를 구현하는 방법을 알아보겠습니다.

 

TabView를 이용하여서 TabBar를 만들어줄 수 있는데요

 

탭바가 어떤것인지는 다들 잘 아실거라고 생각합니다.

 

이 친구들이죠

 

이 탭바의 특징이라면 해당 탭을 클릭하면 그 화면으로 넘어간다는것인데요.

 

간단한 예제를 통하여 탭바를 한번 만들어보겠습니다.

 

우선 전에 공부했던 Navigation처럼 탭바를 사용하기위한 부분을 우선 TabView { // ...  } 로 감싸주어야 합니다.

 

그 안에 화면을 구상할 코드와 각 TabBar에 타이틀과 이미지를 넣어주면 되는데요.

 

이러한 뷰는 어떻게 만들수 있을까요?

 

 

먼저 전체 코드를 보여주고 설명해보겠습니다.

 

import Foundation
import SwiftUI

struct MyTabView : View {
    var body: some View {
        TabView {
            Text("첫번째 화면")
                .tabItem{
                    Image(systemName: "flame.fill")
                    Text("first")
                }
            Text("두번째 화면")
                .tabItem{
                    Image(systemName: "person.fill")
                    Text("second")
                }
            Text("세번째 화면")
                .tabItem{
                    Image(systemName: "circle.fill")
                    Text("third")
                }
        }
    }
}

struct Previews_MyTabView_Previews: PreviewProvider {
    static var previews: some View {
        MyTabView()
    }
}

 

위에서 TabView를 구상하고자하는 곳을 TabView{}로 감싸주어야 된다고 했는데요.

 

그 TabView안에 각 화면을 구상할 소스를 입력해주시고 마지막에

.tabItem{
    Image(systamName: "")  // 해당 TabView tag의 이미지
    Text("")               // 해당 TabView tag의 타이틀
    }

.tabItem{ } 을 이용하여 각 탭의 아이콘과 타이틀을 부여해줍니다.

 

여기까지만 해도 코드를 입력한 순서대로 잘 TabView가 구성되게 됩니다.

 

그치만 조금더 편하게 할 수 있는 방법도 있습니다.

 

.tabItem {
    Label("first", systemImage: "flame.fill")
    }

이 처럼 Label을 사용하여 한 줄로 정리도 가능합니다.

 

여기까지 간단한 TabView를 만들어보았습니다.

 

 

그럼 TabView에 대해서 조금 더 다양한 예제를 통하여 알아보겠습니다.

 

1. badge

 

.badge 를 통하여 탭뷰의 badge를 설정할 수 있습니다.

 TabView {
            Text("첫번째 화면")
                .badge(4)
                .tabItem{
                    Image(systemName: "flame.fill")
                    Text("first")
                }
            Text("두번째 화면")
                .tabItem{
                    Image(systemName: "person.fill")
                    Text("second")
                }
            Text("세번째 화면")
                .tabItem{
                    Image(systemName: "circle.fill")
                    Text("third")
                }
        }

 

2. 선택 tab 색 변경 accentColor

 TabView {
            Text("첫번째 화면")
                .badge(4)
                .tabItem{
                    Image(systemName: "flame.fill")
                    Text("first")
                }
                
            Text("두번째 화면")
                .tabItem{
                    Image(systemName: "person.fill")
                    Text("second")
                }
            Text("세번째 화면")
                .tabItem{
                    Image(systemName: "circle.fill")
                    Text("third")
                }
        }
        .accentColor(.yellow)
    }

 

3. tag()

tag와 TabView의 selection 파라미터를 사용하여 해당 tabItem 페이지에 접근이 가능합니다.

 

struct MyTabView : View {
    @State private var selection = 0
    var body: some View {
        TabView {
            Text("첫번째 화면")
                .badge(4)
                .tabItem{
                    Image(systemName: "flame.fill")
                    Text("first")
                }
                .tag(0)
                
            Text("두번째 화면")
                .tabItem{
                    Image(systemName: "person.fill")
                    Text("second")
                }
                .tag(1)
            Text("세번째 화면")
                .tabItem{
                    Image(systemName: "circle.fill")
                    Text("third")
                }
                .tag(2)
        }
        .accentColor(.yellow)
    }
}

 

이렇게만 보면 tag를 왜 쓰는지 이해를 잘 못하실겁니다.

 

하지만 만약 특정 버튼을 눌렀을 때 다음 탭으로 전환되는 버튼을 만들어야한다면

 

이렇게 해주시면됩니다.

 

struct MyTabView : View {
    @State private var selection = 0
    var body: some View {
        ZStack(alignment: .topTrailing) {
            TabView(selection: $selection) {
                Text("첫번째 화면")
                    .badge(4)
                    .tabItem{
                        Image(systemName: "flame.fill")
                        Text("first")
                    }
                    .tag(0)
                    
                Text("두번째 화면")
                    .tabItem{
                        Image(systemName: "person.fill")
                        Text("second")
                    }
                    .tag(1)
                Text("세번째 화면")
                    .tabItem{
                        Image(systemName: "circle.fill")
                        Text("third")
                    }
                    .tag(2)
            }
            .accentColor(.yellow)
            Button(action: {
                selection = (selection + 1) % 3
            }){
                Text("다음")
                    .font(.system(.headline))
                    .padding()
                    .foregroundColor(.white)
                    .background(Color.blue)
                    .cornerRadius(10)
                    .padding()
            }
        }
        
    }
}

 

4. PageTabView

 

이런 기존형식의 TabView말고 페이지뷰 형시으로 바꾸어줄 수 도 있습니다.

 

import Foundation
import SwiftUI

struct MyTabView : View {
  
    var body: some View {
            TabView{
                Color.red
                Color.blue
                Color.green
                Color.yellow
            }
            .tabViewStyle(PageTabViewStyle())
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
        }
}

struct Previews_MyTabView_Previews: PreviewProvider {
    static var previews: some View {
        MyTabView()
    }
}

 

 

여기까지 이상 SwiftUI에서 TabView에 대하여 알아보았습니다.