Swift UI 기초 - EthanK-Dev

뷰 만들기, 병합

기본 프로젝트 튜토리얼

메인화면 스택 및 글쓰기
이미지 뷰 생성 및 이미지파일 삽입
MapKit 사용

CircleImageView

추가할 이미지를 project에 Assets.xcassets 등록하여 사용
원형 layout 사용

import SwiftUI

struct CircleImageView: View {
    var body: some View {
        Image("cat")
            .frame(width: 200.0, height: 200.0)
            .clipShape(Circle())
            .overlay( Circle().stroke(Color.blue, lineWidth: 10))
            .shadow(radius: 5)
    }
}

struct CircleImageView_Previews: PreviewProvider {
    static var previews: some View {
        CircleImageView()
            
    }
}

MapView

Swift UIkit에서 제공하는 Mapkit import
사용함수 작성

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {MKMapView(frame: .zero)
    }
    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D( latitude: 34.011286, longitude: -116.166868)
        
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        
        let region = MKCoordinateRegion(center: coordinate, span: span)
        
        view.setRegion(region, animated: true)
    }
}

struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

ContentView

VStack, HStack을 활용하여 각 뷰 합체
위치 및 크기는 세부조정

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            MapView().frame(height:
            400).edgesIgnoringSafeArea(.top)
            CircleImageView() .offset(y:-100) .padding(.bottom,-130)
            VStack(alignment:.leading){
                Text("EthanKim")
                    .font(.title)
                    .fontWeight(.ultraLight)
                    .foregroundColor(Color.red)
                HStack {
                    Text("Creating App")
                        .font(.subheadline)
                    Spacer()
                    Text("14th. Dec. 2021")
                        .font(.subheadline)
                }
            }.padding()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

1. 이미지 뷰

2. 맵 뷰

3. 전체 구성 뷰

← Previous Post Next Post →