
#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
에 원하는 사진을 첨부하여 아래와 같이 작성합니다.
//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() } } }

네번째, 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_project5_Map. Contribute to Seogun95/SwiftUI_project5_Map development by creating an account on GitHub....
github.com
참고하면 좋은 게시글👇🏻
SwiftUI : Map View
MapView 에 대해 알아보도록 합시다. Map View SwiftUI의 MapView 를 통해 화면에서 지도를 사용 할 수 있습니다. 시작하려면 먼저 지도에 표시되는 좌표를 추적할 수 있는 일종의 State 를 만들어야 합니...
seons-dev.tistory.com
'PROJECT > Simple' 카테고리의 다른 글
SwiftUI Project8 : WebView and Image (0) | 2021.03.21 |
---|---|
SwiftUI Project7 : Stack / ScrollView / Link (0) | 2021.03.11 |
SwiftUI Project5 : 날씨앱 'SwiftUI 기초 배우기' (0) | 2021.03.06 |
SwiftUI Project4 : Lottie 애니메이션으로 카드만들기 (0) | 2021.02.10 |
SwiftUI Project3 : List view를 사용하여 Grid 만들기 (0) | 2021.02.09 |