SwiftUI의 NavigationView 정보

SwiftUI로 작성된 코드는 Apple 플랫폼에서 공통으로 이용할 수 있습니다.
(iPhone에서도 iPad에서도 macOS에서도 watchOS에서도 컴파일만 통과하면 같은 코드가 동작합니다)

많은 경우, 앱 개발이라고 하면 iPhone 앱의 개발이 됩니다만 SwiftUI에는 Apple 플랫폼에서 공통 이용할 수 있다고 하는 전제가 있어 고려해야 할 것이 늘어나고 있습니다.

본고에서는 iPhone 앱 개발을 실시하는데 있어서의 NavigationView를 이용하는 경우를 보고 싶습니다.

기본 거동 정보

다음은 단순히 NavigationView를 사용하는 구현입니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Hello")
        }
    }
}

SwiftUI는 Apple 플랫폼 공통으로 사용할 수 있도록 하기 위해 NavigationView는 기본적으로 UINavigationController 의 기능 외에 UISplitViewController 의 기능을 가지고 있습니다.

구현을 다음과 같이 변경하여 iPhone과 iPad에서의 표시를 보면 차이를 확인할 수 있습니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        }
    }
}

화면 방향

아이폰

iPad






세로




수평





이와 같이 화면의 가로폭에 의해 표시되는 내용이 달라지는 것을 확인할 수 있습니다.

또한, iPhone은 12 pro max를 이용하고 있습니다만, iPhone12 mini와 같이 사이즈가 작은 단말이라고 가로 방향의 경우도 세로 방향의 경우도 같은 표시가 됩니다.

NavigationLink 거동

NavigationLink를 사용할 때의 동작은 다음 패턴으로 나뉩니다.



Primary의 NavigationLink
Secondary의 NavigationLink


화면의 가로폭(소)
Primary에 대해 다음 화면이 푸시됨
표시되지 않음

화면의 가로폭(대)
Secondary의 내용이 바뀐다
Secondary에 대해 다음 화면이 푸시됨

UISplitViewController 비활성화

상기 내용을 근거로 하면 가로 방향으로 한 케이스로 단말의 사이즈에 의해 거동이 바뀌어 오는 iPhone의 경우, 화면이 분할되는 케이스와 그렇지 않은 케이스로 보이는 방법을 생각할 필요가 나와 버리기 때문에 실장 난이도가 높다 됩니다.

이를 방지하기 위해 SplitView를 비활성화하는 옵션이 있습니다.navigationViewStyle라는 수정자를 사용하여 NavigationView의 동작을 변경할 수 있습니다.

NavigationView는 기본적으로 DoubleColumnNavigationViewStyle을 설정하는 것처럼 동작합니다.navigationViewStyle 의 인수에 StackNavigationViewStyle 을 설정하면 UISplitViewController 설정을 무효화하고 화면 표시를 통일할 수 있습니다.

struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("Primary")
            Text("Secondary")
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

위와 같이 설정하면 화면의 크기가 아무래도 SecondaryView가 표시되지 않고 화면 크기에 따른 거동이 통일됩니다.

iPhone에서 SwiftUI를 이용하는 경우, UISplitViewController가 무효가 되어 있지 않으면 그 밖에도 문제가 나오기 때문에 안정적인 개발을 하기 위해서도 NavigationView에는 StackNavigationViewStyle 를 설정해 두는 것이 무난합니다.