[SwiftUI] Tutorial 05 - MapKit 사용 기초, Divider

이번에는 MapKit을 사용해서 

이런 화면을 만들어 볼 거에요!

전에 만들어뒀던 ContentView와 CircleImage를 사용하면 되겠다는 생각이 벌써부터 막 듭니다 ㅎ

 

먼저, MapKit 먼저 갈게요

 

[ MapKit ]

설명을 보면 SwiftUI에서는 Map을 마커나 어노테이션, 커스텀 요소들과 함께 보여줄 수 있다고 합니다.

사용자의 위치나 동선등을 옵션으로 보여줄 수 있다고도 합니다. 

여기서는 그런게 있다고만 알고 넘어가고 또 마커를 이용한 기능을 개발할 때 더 자세히 다뤄보겠습니다.

 

우리는 MapKit을 사용한 MapView를 따로 컴포넌트로 빼줄 겁니다.

그러기 위해서 SwiftUI VIew 파일을 새로 하나 생성해주고,

 

MapKit을 import 해 줍니다.

import SwiftUI
import MapKit

 

MapView의 body에 들어갈 Map(initialPosition: ) 은 시작 포지션이 필요해보이고 여러가지 방식이 있지만 Tutorial에서는 

MKCoordinateRegion 타입의 파라미터를 통해서 Map 객체를 initial 해줄 겁니다.

그러기 위해서 먼저, MKCoordinateRegion 타입의 변수를 생성해줍니다.

 

[ MKCoordinagteRegion ]

특정 위도 및 경도를 중심으로 하는 직사각형 지리적 영역입니다.

각각의 파라미터가 나타내는 것을 문서에서 찾아보면,

이렇게 나오는데

 

- center == 지역의 센터 포인트이고

- span == 표시할 지도의 양을 나타내는 수평 및 수직 범위입니다.

  private var region: MKCoordinateRegion {
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
            span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
        )
    }

 

그리고 body 안에 Map 을 생성해줍니다.

 

struct MapView: View {
    var body: some View {
        Map(initialPosition: .region(region))
    }

 

[ Detail View ]

MapView는 준비가 됐으니 이제 맨 처음 보여줬던 화면을 만들기 위해서 ContentView로 다시 돌아옵니다.

 

기존 ContentView의 코드는 다음과 같습니다.

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

 

그리고 화면을 만들기 위해서 변경된 코드는 아래와 같습니다.

 

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)
            
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)
            
            VStack (alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
                
                // Divider == 구분 선
                Divider()
                
                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()
            
            // 최 상단 VStack을 top으로 올리기 위해서 Spacer를 아래쪽에 준다
            Spacer()
                
        }
        
        
    }
}

 

설명하자면,

1. 방금 만들어뒀던 MapView와 이전에 만들어뒀던 Custom ImageView 를 VStack으로 추가합니다.

2. 아래에는 Divider를 사용해서 구분선을 넣어줍니다.

3. 필요한 텍스트를 넣어주고,

4. 마지막에는 최상단의 VStack이 화면의 Top에 붙을 수 있도록 제일 바깥쪽 VStack의 bottom에 Spacer()를 넣어줍니다.

 

이걸로 커스텀 이미지뷰와 MapView를 사용한 화면을 만드는 것 까지 해봤습니다.

감사합니다!

 

출처 

SwiftUI 튜토리얼