궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
PROJECT/Simple

SwiftUI Project6 : Use Views From Other Frameworks

서근
QUOTE THE DAY

“ 백 권의 책에 쓰인 말보다, 한 가지 성실한 마음이 더 크게 사람을 움직인다. ”

- Franklin (프랭클린)
Written by SeogunSEOGUN

SwiftUI Project6 : Use Views From Other Frameworks

#1 상세 정보 생성

swift
UNFOLDED
//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)
}
}
}
}

SwiftUI Project6 : Use Views From Other Frameworks - #1 상세 정보 생성


 

#2 사용자 이미지 View 생성

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

Gyeongbokgung.jpeg
0.28MB / 0.28MB

swift
UNFOLDED
//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)
}
}

SwiftUI Project6 : Use Views From Other Frameworks - #2 사용자 이미지 View 생성


#3 Map View 생성

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

swift
UNFOLDED
//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)
}
}

SwiftUI Project6 : Use Views From Other Frameworks - #3 Map View 생성


#4 ContentView에 구성요소 결합

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

swift
UNFOLDED
//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)
}
}
}
}
}

SwiftUI Project6 : Use Views From Other Frameworks - #4 ContentView에 구성요소 결합


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

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

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

SwiftUI Project6 : Use Views From Other Frameworks - #4 ContentView에 구성요소 결합


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

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

SwiftUI Project6 : Use Views From Other Frameworks - #4 ContentView에 구성요소 결합
.ignoresSafeArea(edges: .top) 있고 없음의 차이


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

swift
UNFOLDED
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

 


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.