반응형
#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 👇🏻
참고하면 좋은 게시글👇🏻
'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 |