SwiftUI Essentials: Creating and Combining Views

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

Creating and Combining Views | Apple Developer Documentation

이 포스트는 apple. developer document 의 swiftui tutorial 을 기반으로 작성되었습니다

제가 모르는 부분이나 헷갈리는 부분을 중심으로 빠르게 공부하고 기록해두려고 작성했습니다

 

#section 1 Create a New project and Explore the canvas

project 를 시작하는 방법입니다.

#step 4

SwiftUI앱 라이프사이클을 사용하는 앱은 앱 프로토콜을 준수하는 구조입니다

struct 의 body -> 하나 이상의 view 반환 0> view : 다시 표시할 content 제공

@main 은 앱의 진입점을 식별합니다

import SwiftUI

@main
struct LandmarksApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

#section 2 Customize the text view

struct ContentView : View {
	var body : some View {
    	Text("Turtle Rock")
        .font(.title)
        .foregroundColor(.green)
     }
}

#section 3 Combine views Using Stack

swiftui 에선 stack을 이용해 view를 조절합니다

cmd + shift + L 을 이용해서 하나씩 넣을 수 있으나 코드에 익숙해지는게 좋기때문에 코드로 구현했습니다

HStack : 가로로 쌓기

VStack: 위->아래로 쌓기

Spacer : 공백 추가하기

padding : padding 추가하기

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

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

이 코드를 통해 위와 같이 구현할 수 있습니다

Section 4

Create a Custom Image View

이미지 등은 xcode의 assets에 넣어두고 Image("파일명")으로 추가할 수 있습니다

var body: some View {
	Image("turtlerock")
    	.clipShape(Circle()) #image 동그라미 모양으로 자르기
        .overlay{
        #동그라미 테두리를 추가, 흰색 굵기는 4
        	Circle().stroke(.white,lineWidth:4)
        }#shadow 추가
        .shadow(radius:7)

Section 5

Use SwiftUI Views From Other Frameworks

다른 프레임워크 사용해서 맵뷰 추가하기

새로운 swiftui file 추가

#@State attirbute는 데이터 수정 등을 할 수 있게함
import SwiftUI
import MapKit

struct MapView: View {
    @State private var region = MKCoordinateRegion(
        center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
        span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    )

    var body: some View {
        Map(coordinateRegion: $region)
    }
}

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

 

Section 6

Compose the Detail View

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
        //mapview를 맨위에 쌓고, 화면에 꽉차도록 ignorsafearea추가
            MapView()
                .ignoresSafeArea(edges: .top)
                .frame(height: 300)
		//Image 동그랗게 만들어온걸 offset(위치조정)하고, 패딩추가)
            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)

                HStack {
                    Text("Joshua Tree National Park")
                    Spacer()
                    Text("California")
                }
                .font(.subheadline)
                .foregroundColor(.secondary)
			//나누는 선추가
                Divider()

                Text("About Turtle Rock")
                    .font(.title2)
                Text("Descriptive text goes here.")
            }
            .padding()

            Spacer()
        }
    }
}

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