[SwiftUI] SwiftUI에서 UINavigationViewController 사용하기 (NavigationView)

안녕하세요, HoonIOS입니다.

이번에는 UIkit에서 제공하는 UINavigationViewController을 SwiftUI에서 어떻게 사용하는지 한번 살펴보겠습니다.

 

내비게이션 뷰는 내비게이션 스택을 통해 콘텐츠 뷰들을 관리하는 컨테이너 뷰입니다.

또 화면을 전환하거나 내비게이션 아이템, 내비게이션 타이틀과 같은 요소들을 이용해  Controller을 쉽고 다양하게 보여줄 수 있습니다.

 

NavigationView 적용 방법

NavigationView {
    Text("ContentView 01")
}

내비게이션 뷰를 적용하기 위해서는 넣고 싶은 컨탠츠들을 내비게이션 뷰로 감싸 주면 됩니다.

 

즉, 저는 내비게이션 뷰 안에 Text 객체를 넣어줘서 표현해줬습니다.

 

NavigationViewTitle 적용 방법

NavigationView {
    Text("ContentView 01")
        .navigationTitle("SwiftUI")
        .navigationBarTitleDisplayMode(.inline)
}

내비게이션 뷰 안에. navigationTitle(타이틀 제목)을 넣어주면 됩니다. 

 

가끔씩 업데이트되지 않은 서적은. navigationBarTitle(타이틀 제목)을 넣어달라는 내용이 있는데 현재. navigationBarTitle은 Descrepted 되었으므로. navigationTitle 메서드를 사용해주셔야 합니다. :)

 

근데 여기서 위 예시 코드 중에. navigationBartTitleDisplayMode메서드가 있는 것을 확인하셨을 겁니다. 

해당 옵션도 한번 확인해보겠습니다.

 

NavigationViewTitle 보여주는 옵션 설정하기

. navigationBarTitleDisplayMode을 통해 보여주는 모드를 설정하는 스타일은 크게 두 가지가 있습니다.

 

만약 디스플레이 모드를 설정해주지 않으면 기본적으로 automatic이 사용됩니다. 

 

• large
  아래와 같이 내비게이션 뷰 안에 큰 제목으로 표현이 되는 Mode입니다.

• inline
  UIKit의 내비게이션 뷰 타이틀과 같이 맨 위 가운데에 들어가는 것을 확인할 수 있습니다.
  
  

NavigationBarItem 설정하기

UIKIt에서 내비게이션 바 버튼 아이템을 설정할 때는 UIBarButtonItem객체를 생성해줘서 구현하도록 설정해줬습니다.

SwiftUI에서는 각 아이템 버튼 객체를 생성해준 후 NavigationBarItems 수식어에 전달을 해줍니다.

 

var body: some View {
        let leftBtn = Button(action: { print("is Left Btn") }) {
            Image(systemName: "bell").imageScale(.large)
        }
        
        let rightBtn = Button(action: { print("is Right Btn") }) {
            Image(systemName: "gear").imageScale(.large)
        }
        
        return NavigationView {
            Text("ContentView 01")
                .navigationTitle("HoonIOS")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(leading: leftBtn, trailing: rightBtn)
        }
    }

• 위 코드를 한번 살펴보면 leftBtn, rightBtn의 Button 타입의 변수를 생성해준후 각 actionEvent, 버튼 이미지를 설정해 주고 이 객체를 NavigationView의 navigationBarItems에 전달해준 것을 확인할 수 있습니다.

그럼 아래와 같이 NavigationBarItems가 설정된 것을 확인할 수 있습니다.

추가적으로 만약 내비게이션 뷰 아이템을 하나로 묶어서 표현을 하고 싶은 HStack에 묶어서 사용하면 가능할 수 있습니다.

let leftBtn = Button(action: { print("is Left Btn") }) {
            Image(systemName: "bell").imageScale(.large)
        }
        
        let rightBtn = Button(action: { print("is Right Btn") }) {
            Image(systemName: "gear").imageScale(.large)
        }
        let makeTrailing = HStack {
            leftBtn
            rightBtn
        }
        
        return NavigationView {
            Text("ContentView 01")
                .navigationTitle("HoonIOS")
                .navigationBarTitleDisplayMode(.inline)
                .navigationBarItems(leading: leftBtn, trailing: makeTrailing)
    	}

 

위와 같이 makeTrailing의 HStack타입 변수에 넣어주면 두 개의 아이템을 한 번에 묶어서 표현되는 것을 확인할 수 있습니다.

 

내비게이션 링크를 통해 다른 화면 이동

내비게이션 링크는 특정 이벤트를 통해 다른 화면으로 이동할 때 사용하는 메서드입니다.

 

뭐... 음...

 

간단하게 UIKit에서 pushViewController 메서드라고 생각하면 쉽습니다.

 

뷰를 추가하여 내비게이션 계층 구조에 스택을 추가하는 것입니다.

NavigationView {
    NavigationLink(destination: Text("Welcome!\n is Another View!")) {
        Text("ContentView 02")
    }
    Text("ContentView 01")
        .navigationTitle("HoonIOS")
        .navigationBarTitleDisplayMode(.inline)
}

 

위 코드를 살펴보면 ContentView 02 텍스트를 누르면 다른 뷰로 이동을 하고 그 뷰 안에는 Welcome! is Another View!라는 텍스트가 보이는 것을 확인할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

현재까지 내비게이션 뷰에 대해 살펴봤습니다.

처음에는 많이 어색할 수 있지만 버튼 아이템이나 바 타이틀을 부여하는 부분에서는 더 간편하고 쉬운 거 같다는 생각이 드네요 :)