SwiftUI) About TabView

대부분의 앱이 요런 탭을 가지고있죠 SwiftUI에서 탭을 만들어주는 TabView에 대해 살펴봅시다

대화형 유저 인터페이스 요소를 사용하여 여러 하위 View 사이를 전환하는 View

쉽게말해 위의 스크린샷같은 탭을 가지는 View입니다.

 

선언을 보면 SwiftUI에서 제공되는 View이기에 struct 타입이고 View프로토콜을 채택합니다

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")
        }
}

예시를 보겠습니다 전환되는 뷰는 총 세개네요 그리고 첫번째 탭 아이템은 숫자2 뱃지를 세번째 탭 아이템은 !를 뱃지로 가지고있는데 .badge("") modifier를 사용해 만들어 줄 수 있습니다. 이후에 알림 개수, 확인 안한 메세지 개수 같이 정보를 표시할 수 있습니다

또 .tabItem을 사용해 TabBar를 구현해줄 수 있는데 TabItem은 Label을 사용하거나 Text,Image를 사용해 만들어줄 수 있습니다.

 

TabView의 정의를 보면 SelectionValue, Content를 받죠? selectValue는 탭바에서 디폴트 값입니다. 

 

import SwiftUI

struct ContentView: View {
    @State private var selection = 3
    
    var body: some View {
        TabView(selection: $selection) {
            ReceivedView()
                .badge(2)
                .tabItem {
                    Label("Received", systemImage: "tray.and.arrow.down.fill")
                }
                .tag(1)
            SentView()
                .tabItem {
                    Label("Sent", systemImage: "tray.and.arrow.up.fill")
                }
                .tag(2)
            AccountView()
                .badge("!")
                .tabItem {
                    Label("Account", systemImage: "person.crop.circle.fill")
                }
                .tag(3)
        }

    }
}

이런 식으로 기본값을 정해줄 수 있습니다.

 

만약 탭바의 컬러를 바꾸고싶다? 

TabView를 호출하는 뷰를 초기화할때 UITabBar.appearance를 이용해야합니다

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

이런 식으로 색을 바꿔줄 수 있습니다

 

그리고 현재 클릭된 버튼에 색상을 줄 수도 있는데 이때는 accentColor를 줍니다

TabView() {
	...
}
.accentColor(.red)

이런 식으로!

--------------------------------------------------- 

추가 

만약 위에 코드에서 SentView의 코드가 이런 식으로 되어있다면 TabView에는 4개가 표시됩니다. 

struct SentView: View {
    var body: some View {
        VStack{
            Text("abc")
        }
        VStack {
            Text("abc")
        }
        VStack {
            Text("abc")
        }
        VStack {
            Text("abc")
        }
    }
}

 

이렇게 말입니다

Stack 하나 하나를 각각의 View로 인식하는 것 같습니다

struct SentView: View {
    @State var isShownSheet = false
    
    var body: some View {
        VStack{
            HStack {
                Text("aaaaa")
            }
            ZStack {
                Text("bbbb")
            }
        }
    }
}

 

이렇게 하면 

이렇게 정상적으로 표시됩니다.

 

 

+++++++++++++++++++ 추가

tabView와 List를 같이 사용하다 보니 스크롤하면 이렇게 색이 달라지는 경우가 보였습니다. 해결하기 위해 이것 저것 찾아보니 투명도 관련 이슈였던 것으로 보였습니다.

해결책을 찾다가 요렇게 onAppear에 이 코드를 써서 해결 할 수 있었습니다.

 

TabView {

}
.onAppear {
            let tabBarAppearance = UITabBarAppearance()
            tabBarAppearance.configureWithOpaqueBackground()
            tabBarAppearance.backgroundColor = .white
            UITabBar.appearance().standardAppearance = tabBarAppearance
            
            if #available(iOS 15.0, *) {
                UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance
            }
        }

UITabBarAppearance()는 UIBarAppearance를 상속하므로 UIBarAppearance의 프로퍼티를 사용할 수 있습니다.

configureWithTransparentBackground()가 아닌 configureWithOpaqueBackground()를 사용해 주시고

tabBarAppearance.backgroundColor는 임의로 넣어주시면 위의 예시처럼 겹쳐서 색깔이 변하는 것을 막을 수 있습니다.

 

그리고 위 사진에서 보면 TabBar의 윗부분에 구분선이 생기는데 이는 스크롤 되는 view를 사용해서 겹쳐질때 생깁니다. 고정적으로 만들어주기 위해서는 아래 보이는 코드를 작성해주시면 됩니다~

 

참고

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

Apple Developer Documentation

https://green1229.tistory.com/234