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

SwiftUI Project6 : Use Views From Other Frameworks

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

#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_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

 


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


서근


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