[SwiftUI] TabView란? 사용 예시, 배경색 및 아이템 색 변경 등

[머릿말]

현재 진행 중인 프로젝트에 TabView를 사용하게 되었다. 사실상 요즘 거의 모든 앱에서 탭뷰를 사용하고 있는 것 같다. 각각의 탭을 구성하는 방법, 선택된 탭의 색과 선택되지 않은 탭의 색을 변경하는 방법, TabBar의 색상을 변경하는 방법을 정리하고자 한다.

---

1. TabView 란?

현재 핸드폰에 있는 앱을 아무거나 켜보더라도 거의 대부분 이 TabView를 사용하고 있을 것이다. 카카오톡, 네이버 지도, 토스 등의 앱에서 TabView를 사용하고 있음을 확인할 수 있다.

카카오톡 / 네이버 지도 / 토스

공식 문서에서의 내용은 다음과 같다. 

"대화형 사용자 인터페이스 요소들을 사용하여 여러 자식 뷰들 사이를 전환하는 뷰"

 

기존의 TabView를 구현할 때는 .tabItem(_:)를 사용하여 구현했었지만 이건 이제 deprecated 되었기 때문에 Tab( )을 사용해야 한다. 아래 포스팅 참고!

[SwiftUI] Deprecated된 tabItem(_:)을 대신하여 Tab()을 사용할 수 있다

 

 

1-1. 직접 만들어보기

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        TabView {
            Tab("홈", systemImage: "house") {}
            Tab("메시지", systemImage: "message") {}
            Tab("설정", systemImage: "gearshape") {}
        }
    }
}

#Preview {
    ContentView()
}

간단한 TabView 예제를 만들어 보았다. 각각의 탭을 구성하기 위해 Tab(_:systemImage:content:)를 사용하였다. 각 탭의 중괄호 안에 뷰를 작성하여 화면을 구성할 수 있다. 이렇게 구성된 탭들을 TabBar라고 한다.

 

 

1-2. tint(_:) - 선택된 탭의 색상 변경하기

탭바는 기본적으로 파란색을 사용하는데 이를 tint(_:) 메서드를 사용하여 다른 색으로도 변경할 수 있다.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        TabView {
            Tab("홈", systemImage: "house") {}
            Tab("메시지", systemImage: "message") {}
            Tab("설정", systemImage: "gearshape") {}
        }
        .tint(.red) // ❗️이 부분 추가됨!
    }
}

#Preview {
    ContentView()
}

 

 

1-3. UITabBar.appearance().unselectedItemTintColor - 선택되지 않은 탭의 색상 변경하기

많은 자료들을 찾아보았지만 SwiftUI에서 기본적으로 제공하는 옵션은 없는 것 같다. 대신 UIKit의 UITabBar를 사용하여 색상을 변경할 수 있다.

공식 문서에서의 UITabBar

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        TabView {
            Tab("홈", systemImage: "house") {}
            Tab("메시지", systemImage: "message") {}
            Tab("설정", systemImage: "gearshape") {}
        }
        .tint(.red)
        .onAppear { // ❗️이 부분 추가됨!
            UITabBar.appearance().unselectedItemTintColor = .green
        }
    }
}

#Preview {
    ContentView()
}

색상을 변경하기 위해 View가 화면에 나타났을 때 호출되는 .onAppear() 메서드를 사용하였다. 현재 선택된 탭인 "홈" 탭은 빨간색으로, 선택되지 않은 나머지 탭은 초록색으로 표시되고 있다.

 

 

1-4. UITabBar.appearance().backgroundColor - TabBar의 배경 색상 변경하기

탭바의 배경 색상을 변경할 수도 있다. 그 전에 우선 홈 탭에 LazyVGrid를 사용하여 내용을 채워보도록 하겠다.

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        
        TabView {
            Tab("홈", systemImage: "house") {
                Label("Home", systemImage: "house")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .padding()
                
                TextColumnView()
            }
            Tab("메시지", systemImage: "message") {}
            Tab("설정", systemImage: "gearshape") {}
        }
        .tint(.red)
        .onAppear {
            UITabBar.appearance().unselectedItemTintColor = .green
        }

    }
}

struct TextColumnView: View {
    
    let columns: [GridItem] = [GridItem(.flexible()),
                               GridItem(.flexible()),
                               GridItem(.flexible())]
    let colors: [Color] = [.red, .green, .blue]
    
    var body: some View {
        
        ScrollView {
            
            LazyVGrid(columns: columns) {
                
                ForEach(1..<31) { index in
                    Text("\(index)")
                        .frame(maxWidth: .infinity, minHeight: 100)
                        .background(colors[index%3])
                }
                
            }
            .padding(5)
        }
        
    }
}

#Preview {
    ContentView()
}

위 사진에서 볼 수 있듯 TabBar 하단에 뷰가 존재하게 되면 TabBar은 투명해진다. 이 투명해질 때의 색상은 UITabBar.appearance().barTintColor 속성을 사용하여 설정할 수 있다.

...
    .onAppear {
    	UITabBar.appearance().unselectedItemTintColor = .green
        UITabBar.appearance().barTintColor = .yellow // ❗️이 부분 추가됨
    }
...

이처럼 TabBar 하단에 뷰가 존재하면 TabBar의 색상이 설정했던 yellow로 바뀌게 된다.

 

TabBar 하단에 뷰가 존재하지 않을 때는 UITabBar.appearance().backgroundColor 속성을 사용하여 색을 설정할 수 있다.

...
    .onAppear {
    	UITabBar.appearance().unselectedItemTintColor = .green
        UITabBar.appearance().barTintColor = .yellow
        UITabBar.appearance().backgroundColor = .black // ❗️이 부분 추가됨
    }
...

 

만약 TabBar의 색상을 항상 흰색으로 하고 싶다면 두 속성에 모두 흰색을 설정하면 된다!

---

SwiftUI로는 설정할 수 없는 TabBar의 색상을 변경해보았다.

이러한 이유 때문에 SwiftUI와 UIKit를 모두 다룰 줄 알아야 한다고들 하는 것 같다...🤣

 

끝!