[SwiftUI] TabView 페이지 이동시 TabBar , NavigationBar Hidden 처리하기

 

 

 

 

일주일 삽질하고 작성하는 트러블슈팅 ..

 

 

우선 나는 TabView안에 NavigationView를 담아 페이지 이동을 하고 싶었다.

FirstView -> SecondView

struct ContentView: View {
    
    var body: some View {
        TabView {
            NavigationView {
                FirstView()
            }
            .tabItem {
                Text("first")
            }
        }
    }
}

struct FirstView: View {
    var body: some View {
        ZStack{
            Color.yellow
            VStack{
                Text("FirstView")
                NavigationLink {
                    SecondView()
                } label: {
                    Text("Go SecondView")
                }

            }
            
        }
        
    }
}

struct SecondView: View {
    var body: some View {
        ZStack{
            Color.green
            Text("SecondView")
        }
    }
}

 

 

 

그런데 TabView에서 페이지를 이동했을 때는 TabBar를 보이게 하고싶지 않았다.

여기서 중요한건 NavigationView의 범위 !!

 

NavigationView의 범위

NavigationView는 선언된 부분만큼이 범위가 됩니다.

예를들어 다음과 같이 중간에만 NavigationView를 적용하면

struct ContentView: View {
    var body: some View {
        VStack {
            Text("TopLine")
            NavigationView {
                VStack{
                    Text("여기만바꾼다!")
                    NavigationLink {
                        Text("여기만 바뀐다!")
                    } label: {
                        Text("change!")
                    }
                }
            }
            Text("BottomLine")
        }
    }
}

 

다음과 같은 결과를 얻게 됩니다. TopLine과 BottomLine은 NavigationView밖에 있으니깐요!

 

그럼 이제 전체 화면을 전환하고 싶다면 다음과 같이 모든 View를 NavigationView안에 넣으면 된다는 걸 알 수 있겠죠?

struct ContentView: View {
    var body: some View {
        NavigationView{
            VStack {
                Text("TopLine")
                VStack{
                    Text("여기만바꾼다!")
                    NavigationLink {
                        Text("여기만 바뀐다!")
                    } label: {
                        Text("change!")
                    }
                }
                Text("BottomLine")
            }
        }
    }
}

view의 위치도 달라지지만 이 부분은 지금은 중요하지 않으니 넘어갈게요!

 

 

그럼 이제 원래 코드로 돌아가서

TabView위에 NavigationView를 선언한다면 페이지를 이동했을 때 TabBar가 사라지는 것을 확인할 수 있다!

struct ContentView: View {
    
    var body: some View {
        NavigationView{
            TabView {
                FirstView()
                    .tabItem {
                        Text("first")
                    }
            }
        }
    }
}

 

 

그런데 여기서 또 마음에 안드는 점을 발견했다. NavigationView를 쓸 때마다 애먹이는 TitleBar..

 

하지만 우리는 .navigationBarHidden(ture)을 사용해서 윗 부분을 지울 수 있다는 걸 알 수 있잖아요 ?

 

struct ContentView: View {
    
    var body: some View {
        NavigationView{
            TabView {
                FirstView()
                    .navigationBarHidden(true)
                    .tabItem {
                        Text("first")
                    }
            }
            .navigationBarHidden(true)
        }
    }
}

하지만 위 코드처럼 어디에 달아도 TitleBar가 사라지지 않는 이슈 발생..

 

NavigationTitleBar Hidden

집념의 K-개발자는 이것저것 시도해보고 드디어 해결법을 찾았습니다.

해결법은 hidden 전에 .navigationTitle 작성하기 !

중요한건 TabView가 아니라 View에 다 달아줘야 한다는거..!

struct ContentView: View {
    
    var body: some View {
        NavigationView{
            TabView {
                FirstView()
                    .navigationTitle("title") // ""안에 어떤내용이든 hidden처리됨
                    .navigationBarHidden(true)
                    .tabItem {
                        Text("first")
                    }
            }
        }
    }
}

왜 저렇게 해야해?

NavigationView는 네비게이션바가 무조건 존재하는 것은 아니라고해요!

그렇기 때문에 navigationTitle("")을 호출해서 네비게이션바를 만들고 hidden처리를 해주어야 하는거 같아요ㅠㅠ

 

---

하지만..!!

 

iOS 16 이후부터는 NavigationView가 사라지면서 navigationBarHidden도 사라진답니다 ㅎㅎ~

제발 누가 SwiftUI 업데이트좀 막아줘 ~~ 😵‍💫

 

---

2022.12.09 업데이트

 

iOS 16이 나오고 업데이트 되어 더이상 navigationBarHidden()을 사용하지 않게 되었어요..!

대신 toolbar(.hidden)을 사용해서 동일한 동작을 할 수 있습니다 ☺️

그리고 위와 같은 코드를 작성해도 이제는 빈공간이 생기지 않는답니다!!