SwiftUI - MapUserLocationButton 작동 안될 때

MapUserLocationButton 를 누르게 되면 현재 자신의 위치로 지도가 이동합니다

 

 

문제 인식

MapUserLocationButton 를 MapControls 클로저 내부에도 만들어보았고 scope 를 사용하여 클로저 외부에도 만들어 보았으나 버튼이 눌리는 것은 인식이 되나 지도의 내 위치로 이동하지 않는다는 것을 확인하였습니다.

 

문제 해결 과정

이런 문제들을 해결하기 위해서 코드들을 한줄씩 주석 처리하며 문제해결을 시도하였습니다.

하지만 주석 처리를 하였지만 그래도 문제가 해결되지 않아 코드를 직접 지우면서 테스트를 진행해본 결과 주석을 safeAreaInset 가 에러의 원인이 되었습니다.

 

분명 safeAreaInset 내부에 코드는 모두 주석 처리 되어 있었지만 map과 함께 safeAreaInset 를 사용하게 된다면 지도가 지속적으로 리랜더링되는 현상을 확인할 수 있었습니다.

.safeAreaInset(edge: .bottom) {
//     lookAroundPreview
}

 

1. 발견한 문제점 및 해결방법

🔴 safeAreaInset 를 2번 사용할 시 문제 발생

문제점은 safeAreaInset 를 한번 사용하는 것은 문제되지 않았지만 같은 뷰에서 2번 사용하는 것은 문제가 발생하는 원인이 되었습니다.

safeAreaInset은 SwiftUI에서 뷰의 안전 영역(safe area)에 맞춰 뷰의 여백(inset)을 설정할 수 있는 기능입니다. 안전 영역이란, iPhone의 화면에서 사용자가 컨텐츠와 상호작용할 때 컨텐츠가 가려지지 않도록 보장된 영역을 말합니다. 주로 노치, 홈 인디케이터, 상태 바, MapKit에 존재하는 저작권 표시, 또는 물리적 버튼이 있는 부분을 고려해 화면 상의 컨텐츠가 잘리지 않게 합니다.

.safeAreaInset(edge: .bottom) {
//     lookAroundPreview
}
.safeAreaInset(edge: .bottom, content: {
    HStack {
        Spacer()
        buttonOnMap
    }
})

 

어떻게 보면 당연한거였지만 이런 코드를 실수로 짜게 된다면 참고하여 해결할 수 있을 것입니다.

 

2. 발견한 문제점 및 해결방법 

🔴 onTapGesture 와 MapUserLocationButton 와 함께 인식

이후 발견한 또 다른 문제점입니다. onTapGesture 를 사용하게 된다면 onTapGesture 를 map 에 사용하게 된다면 MapUserLocationButton 를 클릭했을 때 함께 실행되므로 주의해야 합니다.

 

이를 해결하기 위해서는 MapUserLocationButton 을 직접 구현하는 것입니다.

@Observable
class MapViewState {
    
    /// 지도 카메라 위치
    var position: MapCameraPosition = .userLocation(fallback: .automatic)

ZStack {
    Circle()
        .fill(Color(uiColor: .systemGray6))
        .frame(width: 50, height: 50) // 바깥 Circle 크기
    Button {
        mapState.position = .userLocation(fallback: .automatic)
    } label: {
        Image(systemName: mapState.position.followsUserLocation ? "location.fill" : "location")
            .resizable()
            .frame(width: 20, height: 20) // 안쪽 아이콘 크기
            .foregroundColor(.blue) // 아이콘 색상
    }
}

구현된 버튼