[swift] 스택 뷰를 사용하여 지도 표시하기

01 Dec 2023

swift

스위프트(Swift) 언어를 사용하여 iOS 애플리케이션에서 지도를 표시해야 할 때가 있습니다. 이때 스택 뷰(Stack View)를 사용하면 편리하게 지도를 표시할 수 있습니다. 스택 뷰는 간단한 정렬과 위치 지정을 위한 레이아웃 컨테이너로, 여러 뷰를 자동으로 정렬해주는 기능을 제공합니다.

스택 뷰 만들기

먼저 스토리보드 또는 코드로 스택 뷰를 만들어야 합니다. 스토리보드를 사용할 경우 스토리보드에서 스택 뷰를 추가하고 필요한 설정을 진행합니다. 코드로 스택 뷰를 생성할 경우 다음과 같이 작성할 수 있습니다.

import UIKit

class ViewController: UIViewController {
    
    let stackView = UIStackView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 스택 뷰 속성 설정
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        stackView.spacing = 8
        
        // 스택 뷰에 지도 뷰 추가
        let mapView = MKMapView()
        stackView.addArrangedSubview(mapView)
        
        // 스택 뷰를 화면에 추가
        view.addSubview(stackView)
        
        // 스택 뷰의 제약 조건 설정
        stackView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: view.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
    }
}

위 코드에서는 스택 뷰를 만들고 axis, distribution, alignment 등의 속성을 설정합니다. 그리고 addArrangedSubview(_:) 메서드를 사용하여 지도 뷰를 스택 뷰에 추가합니다. 마지막으로 스택 뷰를 화면에 추가하고, 제약 조건을 설정하여 스택 뷰가 화면에 올바르게 표시되도록 합니다.

지도 표시하기

위 코드에서 let mapView = MKMapView() 부분이 지도를 표시하는 부분입니다. MKMapView 클래스는 iOS에서 지도를 표시하고 관리하기 위한 클래스입니다. 따라서 해당 부분을 수정하여 원하는 지도를 표시하면 됩니다.

다음은 let mapView = MKMapView() 부분을 수정하여 지도를 표시하는 예시입니다.

let mapView = MKMapView()
let coordinate = CLLocationCoordinate2D(latitude: 37.541, longitude: 126.986)
let span = MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)
let region = MKCoordinateRegion(center: coordinate, span: span)
mapView.setRegion(region, animated: true)

위 코드에서는 CLLocationCoordinate2D 객체를 사용하여 지도의 중심 좌표를 설정합니다. 그리고 MKCoordinateSpan 객체를 사용하여 지도의 확대/축소 정도를 설정합니다. 이 두 가지를 조합하여 MKCoordinateRegion 객체를 생성하고, setRegion(_:animated:) 메서드를 사용하여 지도를 해당 위치와 확대/축소 정도로 표시합니다.

이제 스택 뷰에 지도가 표시되는 것을 확인할 수 있습니다.

스택 뷰 만들기

지도 표시하기

참고 자료