[SwiftUI] Custom navigation back button

Custom navigation back button 을 만들어보자!

 

 

import SwiftUI

struct BackButtonView: View {
    @Environment(\\.presentationMode) var presentationMode: Binding<PresentationMode>
    
    var body: some View {
        Image(systemName: "chevron.backward")
            .frame(width: 24, height: 24)
            .onTapGesture {
                presentationMode.wrappedValue.dismiss()
            }
    }
}

뒤로가기 버튼을 따로 파일을 생성해서 만들어줬다.

처음에는 해당화면에 ToolbarItem부분에 넣으려 했는데 생각해보니 여기저기서 쓸 것 같아서 따로 만들었다.

공통으로 사용하는 네비게이션을 만들 수 있으면 좋을텐데 방법을 찾아봐야겠다.

// 1

import SwiftUI

struct ProductRegisterView: View {
    var body: some View {
        VStack {
            Text("mm")
        }
        .navigationBarTitleDisplayMode(.inline)
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                BackButtonView()
            }
            
            ToolbarItem(placement: .principal) {
                Text("약품 추가")
                    .fontWeight(.semibold)
                    .font(.system(size: 16))
            }
        }
    }
}

그리고 해당화면 코드

네비게이션을 커스텀하는 방법에는 여러가지 방법이 있었다.

// 2

struct ProductRegisterView: View {
    var body: some View {
        
        VStack {
            Text("mm")
        }
        .navigationTitle(Text("약품 추가"))
        .navigationBarBackButtonHidden(true)
        .navigationBarItems(leading: BackButtonView())
        .navigationBarTitleDisplayMode(.inline)
    }
}

이것처럼 해도 아래와 같은 화면이 나온다.

하지만 나는 타이틀부터 모든 것을 다 커스텀하고 싶었기 때문에 1번방법을 사용했다.

삽질💢

위처럼 구현하고 나면 스와이프로 뒤로가는 제스처가 안된다.

.navigationBarBackButtonHidden(true)

위 코드를 사용하게되면 네비게이션 뒤로가기 버튼을 숨기면서 스와이프 제스처도 같이 사라지는 것으로 예상된다.

왜 그렇게 만든건지는 ..... 내가 부족해서 뭘 놓치고 있는거겠지..

해결

extension UINavigationController: ObservableObject, UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self
    }

    public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return viewControllers.count > 1
    }
}

해당 코드를 아무데나 넣어주면 된다.

나는 따로 파일을 만들어서 사용했다.

NavigationView의 엄마..?부모..? 근본인 UINavigationController에 접근한다.

popGesture를 인식하고 전달하는 delegate에 self 로 해준다.

🤔

구글링해도 결과가 잘 안나오기도하고 SwiftUI자체가 빠르게 변하고있기 때문에 정보를 얻기가 쉽지않다.

아니면 내가 못찾는거라던가...

UIKit에서는 간단하게 할 수 있었던게 SwiftUI에서는 복잡하게 해야할 때도 있고,

반대로 SwiftUI에서는 간단하게 할 수 있는 기능들도 있다.

조금씩 적응이 되고있고 하면서 더 나은방법을 찾으면서 계속 공부를 해야겠다.

 

 

 

 

제가 틀렸거나 다른 의견이 있으시다면 댓글로 남겨주시면 감사하겠습니다 :)

참고 사이트

https://medium.com/hcleedev/swift-custom-navigationview%EC%97%90%EC%84%9C-swipe-back-%EA%B0%80%EB%8A%A5%ED%95%98%EA%B2%8C-%ED%95%98%EA%B8%B0-c3c519c59bcb

Swift: Custom NavigationView에서 Swipe-back 가능하게 하기