[SwiftUI] Back Button Custom하기

SwiftUI에서 back button을 커스텀하기 어렵다.

그럴 때는 다음 코드를 넣어주자.

struct BackButton: View {
    @Environment(\.dismiss) private var dismiss
    var color: Color = .black
    var body: some View {
        Button {
            dismiss()
        } label: {
            Image(systemName: "chevron.backward")
                .renderingMode(.template)
                .foregroundColor(color)
                .shadow(radius: 2.0)
                .contentShape(Rectangle())
        }
    }
}

struct BackButtonModifier: ViewModifier {
    let color: Color
    func body(content: Content) -> some View {
        content
            .navigationBarBackButtonHidden(true)
            .toolbar {
                ToolbarItem(placement: .topBarLeading) {
                    BackButton(color: color)
                }
            }
    }
}

public extension View {
    func addBackButton(_ color: Color = .black) -> some View {
        modifier(BackButtonModifier(color: color))
    }
}

 

이제 back button을 넣고 싶은 곳에서 다음과 같이 적용하자.

struct ContentView: View {
	var body: some View {
    	Text("asdf")
        .addBackButton() // ✅
    }
}

 

이렇게만 하면 swipe 해서 뒤로 가기가 되지 않는다. 이럴 때는 다음과 같이 해결하자.

import UIKit

extension UINavigationController: ObservableObject, UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self // swipe로 뒤로 가기 활성화
    }

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

 

참 쉽죠?

 

참고) chevron.backward는 다음과 같이 생겼다.

SF Symbols에서 마음에 드는 아이콘을 잘 찾아보자.