[SwiftUI] SwiftUI에서 탭바 숨기기 및 커스텀 백 버튼 만들기

SwiftUI iOS 16 버전에서 탭바를 숨기고 네비게이션 링크를 통해 이동한 후 커스텀 백 버튼을 사용해도 탭바가 사라지지 않도록 설정하는 방법을 알아보겠습니다.

문제 설명

탭바를 숨기기 위해 .toolbar(.hidden, for: .tabbar)를 사용하면 네비게이션 링크를 통해 이동한 후 커스텀 백 버튼을 눌러 뒤로 갈 때 부모 뷰에서 탭이 사라지는 문제가 발생할 수 있습니다.

해결 방법

이 문제를 해결하기 위해, 네비게이션 뷰 계층 구조와 상태 관리를 적절히 사용하여 탭바를 숨기고 복원하는 방법을 적용할 수 있습니다. 아래는 이를 구현하는 예제 코드입니다.

1. 기본 구조 설정

먼저 기본적인 탭바와 네비게이션 링크를 설정합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            NavigationView {
                ParentView()
                    .navigationTitle("Home")
            }
            .tabItem {
                Label("Home", systemImage: "house")
            }

            Text("Settings")
                .tabItem {
                    Label("Settings", systemImage: "gear")
                }
        }
    }
}

struct ParentView: View {
    var body: some View {
        NavigationLink(destination: ChildView()) {
            Text("Go to Detail")
        }
    }
}

2. 탭바 숨기기 및 커스텀 백 버튼 추가

'ChildView' 에서 탭바를 숨기고, 커스텀 백 버튼을 추가합니다.

가장 중요한 것은 tabBarVisible 이라는 상태관리를 통해서 Custom Back Button 을 눌렀을 경우 tabBarVisible을 true로 만들어 부모뷰의 TabView가 다시 활성 하게 만들어야합니다.

struct ChildView: View {
    @Environment(\.presentationMode) var presentationMode
    @State private var tabBarVisible: Bool = false

    var body: some View {
        VStack {
            HStack {
                Button(action: {
                    self.tabBarVisible = true
                    self.presentationMode.wrappedValue.dismiss()
                }) {
                    HStack {
                        Image(systemName: "chevron.left")
                        Text("Back")
                    }
                }
                .padding()

                Spacer()
            }
            .padding(.top, 10)

            Spacer()
            Text("Detail View")
            Spacer()
        }
        .navigationBarBackButtonHidden(true)
        .toolbar(tabBarVisible ? .visible : .hidden, for: .tabBar)
    }
}

이렇게 되면 하위 뷰에서 상위뷰로 돌아가더라도 탭뷰는 유지 될 것입니다.