[SwiftUI] 네비게이션 Back 버튼 커스텀

네비게이션 Back Button

SwiftUI 에서 NavigationStack 으로 뷰를 만들다보면 아래와 같이 Back Button 의 < 이 이미지를 바꾸고 싶을 때가 있다. 그 방법을 알아보자. 

기존의 Back Button

ToolBar로 바꾸게 되면 문제점

간단하게 .navigationBarBackButtonHidden() 을 한뒤 아래와 같이 ToolBarItem 을 활용하여 뒤로가기를 변경하면 되긴 하지만.. 문제는 기존 navigationBackButton 쪽이나 왼쪽을 드래그해서 dismiss 하는 부분이 지원되지 않게 된다. 

ToolbarItem(placement: .topBarLeading) {
    Button(action: action, label: label)
}

변경하는 방법

아래와 같이 맵의 맨 윗부분에 init() 을 활용하여 변경해준다. 어떠한 이미지든 넣을 수 있다. 아래에서는 기존 SF Symbol 을 넣은 예시이다. 이것 이외에도 다양한 그림을 넣을 수 있다.

import SwiftUI

struct ContentView: View {
    
    init() {        
        let backButtonImage = UIImage(systemName: "chevron.backward.circle.fill")
        UINavigationBar.appearance().backIndicatorImage = backButtonImage
        UINavigationBar.appearance().backIndicatorTransitionMaskImage = backButtonImage
    }
    
    var body: some View {
        SomethingView()
    }
}

아래와 같이 변경된 것을 확인할 수 있다.