SwiftUI - TabView

안녕하세요. 그린입니다🟢

이번 포스팅에서는 SwiftUI 내에서 기본 애플에서 제공하는 TabView에 대해 알아보겠습니다🙌

주로 앱을 구성하다보면 하단에 홈 / 설정 등 메뉴로 갈 수 있는 TabBar에 대해 꼭 구성하곤 합니다.
어떻게 보면 없는 앱을 찾기가 더 어려울정도입니다🥲

바로 요런거요!

그래서 이번 포스팅에서 이걸 구성할 수 있는 TabView에 대해 알아보고 구현해볼께요ㅎㅎ

 

TabView?

공식문서를 파해쳐보죠!

탭뷰의 정의는 대화형 사용자 인터페이스 요소를 사용해 여러 하위 뷰 간 전환할 수 있도록 하는 뷰입니다.

즉 다들 흔히 알고 있는 탭바의 항목들을 클릭해 뷰를 전환할 수 있게 해주는것입니다.

 

TabView 선언

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

기본 구현된 선언은 이렇습니다.

SwiftUI에서 제공되는 뷰들은 전부 구조체 타입이죠.

당연히 View 프로토콜을 따릅니다.

 

TabView 기본 구현

우선 애플에서 공식적으로 예시를 든 코드로 구현을 해보면서 살을 붙여보겠습니다.

import SwiftUI

struct ContentView: View {
  var body: some View {
    TabView {
      Text("The First Tab")
        .tabItem {
          Image(systemName: "1.square.fill")
          Text("First")
        }
      Text("Another Tab")
        .tabItem {
          Image(systemName: "2.square.fill")
          Text("Second")
        }
      Text("The Last Tab")
        .tabItem {
          Image(systemName: "3.square.fill")
          Text("Third")
        }
    }
    .font(.headline)
  }
}

기본적으로 TabView를 호출해 탭바를 통해 전환될 뷰에 대해 구성을 해줍니다.

코드 상으로 보면 현재 탭바에서 컨트롤 해줘서 전환되는 뷰는 총 3개입니다.

순서대로 3개의 Text만 올라간 뷰가 있습니다.

.tabItem을 이용해 TabBar를 구현해줍니다.

예시에서는 TabBar 요소에 이미지와 텍스트를 쌍으로 넣어줬습니다.

저 순서는 항상 이미지 다음 텍스트 순으로 나오게됩니다.

바꿔주더라도 자동으로 그렇게 나와요!

자 그러면 이렇게 화면이 나타납니다.

아주 단순하고 쉬워요.

저 탭바 요소를 클릭하면 각자의 정해진 뷰로 지정되어 들어갑니다.

 

TabView 추가 구현

그러면 이제 기본적인 아주 쉬운 구현을 알아봤으니 추가적인 옵션 구현에 대해 알아볼께요!

 

1. Badge

아주 단순히 해당 탭바 버튼 항목에 뱃지를 넣어줄 수 있어요.

Text("The First Tab")
  .badge(10)
  .tabItem {
    Image(systemName: "1.square.fill")
    Text("First")
  }

단순히 badge 메서드를 삽입해줌으로 아래와 같이 뱃지를 얻을 수 있습니다.

지금이야 직접 값을 넣어줬지만 추후 이 뱃지를 통해 정말 알림 수라던지 유의미한 값을 도출하고 싶다면

뷰모델 / 모델들과 연결해 자유롭게 사용할 수 있습니다🙌

 

2. selection / tag

자 우리는 아주 초기에 TabView의 정의를 보면서 인자로 selectionValue에 대해 본적이 있습니다!

이 구성은 뭐냐면, 탭바에서 처음 디폴트로 시작하는 기본값이에요.

아무 구성이 없다면 가장 처음 만들어진 뷰가 기본값이되겠죠!?

그래서 만약 원하는 시작 뷰 지점이 있다면 아래와 같이 selection과 tag로 구현해줄 수 있습니다.

import SwiftUI

struct ContentView: View {
  @State private var selection = 2
  
  var body: some View {
    TabView(selection: $selection) {
      Text("The First Tab")
        .badge(10)
        .tabItem {
          Image(systemName: "1.square.fill")
          Text("First")
        }
        .tag(1)
      Text("Another Tab")
        .badge(20)
        .tabItem {
          Image(systemName: "2.square.fill")
          Text("Second")
        }
        .tag(2)
      Text("The Last Tab")
        .badge(30)
        .tabItem {
          Image(systemName: "3.square.fill")
          Text("Third")
        }
        .tag(3)
    }
    .font(.headline)
  }
}

뷰 내에서 State 변수로 selection을 만들어주고 2라는 값을 줍니다.

그리고 TabView를 구성할때 각 뷰마다 tag를 달아줘요.

감이오시죠!?

이 tag값 2를 가진 뷰가 최초 선택되어 나타날 뷰입니다.

그럼 보시죠!

요렇게 시작되면 두번째 tag값에 매칭되어 기본적으로 나타나게됩니다!

아주 쉽죠 ㅎㅎ

 

3. background

현재 보면 기본적으로 탭바의 배경은 system에 맞춰 white입니다.

이 배경색을 커스텀하게 원하는 색으로 바꿔보죠!

안타깝게도 SwiftUI스럽게 View에 바로 호출해줘서 할 순 없더라구요.

UIKit의 UITabBar UIAppearance 프로토콜에 정의된 appearance 메서드를 호출해서 놀아줘야합니다.

(아직 스유 갈길이 멀긴하네요 이렇게 보니까..)

무튼 스유도 UIKit을 포팅해 사용하는거니 해봅시다!

TabView를 호출하는 뷰를 초기화해줄때 UITabBar의 구성을 심어줘야합니다.

init() {
  UITabBar.appearance().backgroundColor = .black
}

이런식으로 말이죠!

그러면 아래와 같이 보일거에요.

자 원하는 바와같이 블랙으로 나옵니다!

여기서 저 탭바 버튼들에 대해 색상 변경을 해주고 싶은 생각이 마구마구 들지 않아요?

바로 보겠습니다🧐

 

4. accentColor

이 옵션으로 탭바 틴트컬러를 바꿔줄 수 있어요.

단순합니다.

아래와 같이 TabView뒤에 붙이면되요!

TabView() {
...
}
.accentColor(.green)

그러면 요렇게 현재 활성화(클릭된) 버튼에 대해서 색상을 줄 수 있습니다.

 

iOS 15부터 SwiftUI에서의 TabBar 구분선

그런데 혹시 이상한거 눈치 못채셨나요?

보통 다들 흔히 아는 TabBar라 함은 구분선이 있기 마련이였잖아요 보통의 앱에서는?

요런식으로요!

근데 이게 iOS15 부터는 바뀌었다고 해요🥲

그래서 간증들 및 레퍼들을 봐보면..

https://stackoverflow.com/questions/69309689/ios-15-swiftui-tabview-tab-bar-appearance-doesnt-update-between-views

iOS 15 SwiftUI TabView tab bar appearance doesn't update between views

https://developer.apple.com/forums/thread/682432

How do I get a tab bar in iOS15 th… | Apple Developer Forums

이 두 레퍼만 봐도 탭바뿐 아니라 네비게이션바까지도 15부터는 기본적으로 구분선이 없게 나오고 설정해주고 싶다면

직접 건드려줘야한다고 나오네요!

그럼 뭐 한번 건드려줘보죠ㅎㅎ

이것도 되게되게 간단합니다.

뷰 이닛될때 설정해주면 됩니다.

init() {
  UITabBar.appearance().scrollEdgeAppearance = .init()
}

각기 설정하기 나름이겠지만 우선 기본설정으로..ㅎㅎ

요렇게 하면 기존에 알고 있던 탭바의 구분선을 띈 모습을 가질 수 있습니다🙌

참 쉽죠~?

 

물론 이 밖에 더 커스텀한 구성을 해주고 싶다면 물론 한계가 있습니다.

그럴때는 커스텀한 탭뷰를 직접 만들어 사용하면 됩니다!

이게 스유의 장점이자 단점🙃

 

마무리

이렇게 오늘은 탭뷰에 대해 알아봤습니다!

기본적인것이지만 아직 스유에서 한계가 많구나 느꼈던...

저는 그래서 대부분 커스텀하게 직접 만들어 사용합니다.

그게 심신 건강에 이로움...😂

해당 간단히 예제를 구성한 코드는 아래 깃헙에 있습니다🙌

https://github.com/GREENOVER/playground/tree/main/tabView

GitHub - GREENOVER/playground: 학습을 하며 간단한 예제들을 만들어 보는 작고 소중한 놀이터

 

[참고자료]

https://developer.apple.com/documentation/swiftui/tabview

Apple Developer Documentation