🔴 Let's Build UBER with SwiftUI | iOS 16 & Xcode 14

UberClone: MapView

구현 목표

• 커스텀 맵뷰 구현

구현 태스크

• UIKit 컴포넌트의 SwiftUI 내 사용을 위한 UIViewRepresentable
• 홈뷰 내 사용되는 로케이션 매니저

핵심 코드

import Foundation
import CoreLocation

class LocationManager: NSObject, ObservableObject {
    private let locationManager = CLLocationManager()
    
    override init() {
        super.init()
        locationManager.delegate = self
        locationManager.desiredAccuracy = kCLLocationAccuracyBest
        locationManager.requestWhenInUseAuthorization()
        locationManager.startUpdatingLocation()
    }
}

extension LocationManager: CLLocationManagerDelegate {
    func locationManager(_ manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) {
        guard !locations.isEmpty else { return }
        locationManager.stopUpdatingLocation()
    }
}

• 맵뷰 내에서 사용되는 ObservableObject로 선언되는 로케이션 매니저
• CLLocationManagerDelegate 함수를 사용, 유저 정보에 따라 지도를 업데이트한 뒤 업데이트된 이후 곧바로 업데이트 중지

import SwiftUI
import MapKit

struct UberMapViewRepresentable: UIViewRepresentable {
    
    let mapView = MKMapView()
    let locationManager = LocationManager()
    
    func makeCoordinator() -> MapCoordinator {
        return MapCoordinator(parent: self)
    }
    
    func makeUIView(context: Context) -> some UIView {
        mapView.delegate = context.coordinator
        mapView.isRotateEnabled = false
        mapView.showsUserLocation = true
        mapView.userTrackingMode = .follow
        return mapView
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
}

• SwiftUI에서 UIKit 컴포넌트를 사용하기 위한 UIViewRepresentable을 준수하는 클래스 선언
• 해당 프로토콜을 따르기 위한 함수 선언을 통해 델리게이트와 조율하는 makeCoordinator, 사용할 커스텀 뷰 클래스를 던지는 makeUIView 함수 적용
• 클래스 내 커스텀으로 선언되는 곳(맵뷰, 로케이션 매니저 등)을 델리게이트 함수에서도 접근 가능
• 즉 현재 UIView 입장에서는 사용하고자 하는 특정한 뷰의 델리게이트 함수는 알지 못하고, Coordinator을 경유해서만 사용 가능(현재 맵뷰의 델리게이트에 컨텍스트의 coordinator를 넘기기 때문)

extension UberMapViewRepresentable {
    class MapCoordinator: NSObject, MKMapViewDelegate {
        let parent: UberMapViewRepresentable
        
        init(parent: UberMapViewRepresentable) {
            self.parent = parent
            super.init()
        }
        
        func mapView(_ mapView: MKMapView, didUpdate userLocation: MKUserLocation) {
            let region = MKCoordinateRegion(center: .init(latitude: userLocation.coordinate.latitude, longitude: userLocation.coordinate.longitude), span: .init(latitudeDelta: 0.05, longitudeDelta: 0.05))
            parent.mapView.setRegion(region, animated: true)
        }
    }
}

• 커스텀 뷰에서 선언되는 Coordinator 클래스
• 위의 커스텀 뷰를 self로 주기 때문에 델리게이트 함수 사용 가능
• 현재 사용 중인 맵킷의 델리게이트 함수는 유저 위치한 값을 통해 맵뷰의 지역을 세팅하는 함수

import SwiftUI

struct HomeView: View {
    var body: some View {
        UberMapViewRepresentable()
            .ignoresSafeArea()
    }
}

• 위의 맵킷 자체를 전체 지도로 올리는 코드

구현 화면