iOS Dev/SwiftUI
[SwiftUI] Back Button Custom하기
Mosu(정종인)
2023. 10. 9. 00:46
반응형
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에서 마음에 드는 아이콘을 잘 찾아보자.
반응형