SwiftUI Project6 : Use Views From Other Frameworks

#1 상세 정보 생성

//ContentView

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading){
            HStack {
                Text("경복궁")
                    .font(.title)
                    .padding(.bottom, 10)
                
                Text("서울")
                    .font(.caption)
                
            }
            VStack{
                Text("161 Sajik-ro, Sejongno, Jongno-gu, 서울특별시 South Korea")
                    .font(.footnote)
            }
        }
    }
}

---

 

#2 사용자 이미지 View 생성

새로운 SwiftUI 파일을 만들어 Asset에 원하는 사진을 첨부하여 아래와 같이 작성합니다.

Gyeongbokgung.jpeg

0.28MB / 0.28MB

//CircleImageView

struct CircleImage: View {
    var body: some View {
        Image("Gyeongbokgung")
            .resizable()
            .frame(width: 200, height: 200)
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 3))
            .shadow(radius: 7)
        
    }
}

---

#3 Map View 생성

경복궁 좌표를 중심으로 하는 지도를 만들어 줍니다. Map View 에 대한 게시물은 여기를 클릭해주세요. 새로운 SwiftUI 파일을 만들어 아래와 같이 작성합니다.

//MapView

import SwiftUI
import MapKit

struct MapView: View {
    
    @State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 37.5797539, longitude: 126.9766809), span: MKCoordinateSpan(latitudeDelta: 0.01, longitudeDelta: 0.01))
    
    var body: some View {
        Map(coordinateRegion: $region, showsUserLocation: true, userTrackingMode: .constant(.follow))
            .edgesIgnoringSafeArea(.all)
    }
}

---

#4 ContentView에 구성요소 결합

첫번째, ContentView상세 텍스트 위에 만들어 놓은 지도를 추가해줍니다.

//ContentView

struct ContentView: View {
    var body: some View {
        //상단에 VStack을 하나더 쌓는다.
        VStack {
            MapView()
                .frame(height: 300)
            
            CircleImage()
            
            VStack(alignment: .leading){
                HStack {
                    Text("경복궁")
                        .font(.title)
                        .padding(.bottom, 10)
                    
                    Text("서울")
                        .font(.caption)
                    
                }
                VStack {
                    Text("161 Sajik-ro, Sejongno, Jongno-gu, 서울특별시 South Korea")
                        .font(.footnote)
                }
            }
        }
    }
}

---

두번째, 이미지를 지도에 겹치에 위치시키려면 .offset 을 사용하면 됩니다.

x 값은 조정 할 필요가 없으므로 y: -110을 넣어주고, padding 또한 -110으로 설정 해야 합니다.

            CircleImage()
                .offset(y: -110)
                //offset의 y값을 준만큼 패딩도 할당해줘야함
                .padding(.bottom, -110)

---

세번째, 상세뷰를 Spacer() 을 사용하여 위쪽으로 배치 시켜 주고, SafeArea부분도 채워줍니다.

struct ContentView: View {
    var body: some View {
       
        VStack {
            MapView()
            //frame 앞에 ignoresSafeArea를 추가해야합니다.
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
                
            CircleImage()
                
                ...
            
            VStack(alignment: .leading) {...}
            
            .padding()
            //뷰를 상단으로 배치
            Spacer()
        }
    }
}            

.ignoresSafeArea(edges: .top) 있고 없음의 차이

---

네번째, Divider로 구분선을 넣고 상세 택스트 추가

struct ContentView: View {
    var body: some View {
        //상단에 VStack을 하나더 쌓는다.
        VStack {
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
                
            
            CircleImage()
                .offset(y: -110)
                //offset의 y값을 준만큼 패딩도 할당해줘야함
                .padding(.bottom, -110)
            
            VStack(alignment: .leading){
                HStack {
                    Text("경복궁")
                        .font(.title)
                        .padding(.bottom, 10)
                    
                    Text("서울")
                        .font(.caption)
                    
                }
                VStack {
                    Text("161 Sajik-ro, Sejongno, Jongno-gu, 서울특별시 South Korea")
                        .font(.footnote)
                        //폰트 색상 변경
                        .foregroundColor(.secondary)
                }
                //구분선 및 텍스트 추가
                Divider()
                    .padding()
                
                    Text("경북궁에 관하여")
                        .font(.title2)
                        .padding(.bottom, 10)
                Text("Gyeongbok Palace, was the main royal palace of the Joseon dynasty.")
            }

            .padding()
            //뷰를 상단으로 배치
            Spacer()
        }
    }
}

---

읽어주셔서 감사합니다🤟

 

본 게시글의 전체코드 GitHub 👇🏻

Seogun95/SwiftUI_project5_Map

참고하면 좋은 게시글👇🏻

SwiftUI : Map View