SwiftUI Tutorials - 1. Creating and combining views

 

 

Section 1 프로젝트 만드는법 (모르시는 분은 펼쳐서 보세요)

---

 

 

Section 2 - text view 커스터마이즈하기

Canvas(캔버스) 기능

스토리보드 때처럼 인스펙터를 제공합니다.

 

 

코드에서 - 모디파이어 사용

 

.foregroundColor() 를 통해 텍스트 색을 바꿀 수 있습니다.

이렇게 구조체를 변경하는 것을 모디파이어라고 합니다.

 

Section 3 - 스택사용하여 결합하기

 

SwiftUI 뷰를 만들 때, 뷰의 본문 속성에서 콘텐츠, 레이아웃 및 동작을 설명하지만, body 속성은 단일 뷰만 반환합니다.

수평(HStack), 수직(VStack) 또는 앞뒤로(ZStack) 를 함께 그룹화하는 스택에 여러 뷰를 결합하고 삽입할 수 있습니다.

이 섹션에서는 VStack을 사용하여 공원에 대한 세부 사항이 포함된 HStack 위에 제목을 배치할 것입니다.

 

 

UIKit 를 스토리보드로 사용할 때도 Embed 하는 편의 기능이 있었는데,

스유에도 비슷하게 있네요. 우클릭을 통해 사용 가능합니다.

 

 

 

1. 라이브러리에서 컴포넌트 추가하기

Xcode 우측상단 + 버튼 혹은 키보드 command + shift + L 눌러서 추가 가능합니다

 

 

 

2. VStack, HStack으로 뷰 구성하기

 

VStack, HStack을 사용하며 수직, 수평으로 뷰를 쌓아주고 있습니다.

Spacer()는 포함 뷰가 부모 뷰의 모든 공간을 사용하도록 확장됩니다.

 

3. padding 지정하기

 

 padding() 모디파이어를 사용하여 랜드마크의 이름과 세부 사항을 외부 가장자리 주변에 조금 더 많은 공간을 제공 가능합니다.

 

 

 

 

1. some 키워드의 의미와 사용법

2. protocol App, Scene, View 삼형제 구경하기

 

Section 4 - 커스텀 이미지 생성하기

이름과 위치 보기가 모두 설정된 상태에서, 다음 단계는 랜드마크에 대한 이미지를 추가하는 것입니다.
이미지에 마스크, 테두리 및 그림자를 적용하는 커스텀뷰를 만들 수 있습니다.

 

turtlerock@2x.jpg

0.26MB

 

1. 에셋 추가하기

2. SwiftUI View, CircleImage.swift 생성하기

3. 이미지 추가하기

 

iOS17, 최신 Xcode 버전의 경우 String 타입으로 접근하지않고 Image(.turtlerock) 과 같이 접근하여도됨

 

 

이미지에 마스크, 테두리 및 그림자를 적용하는 커스텀뷰

 

 

 

 

Section 5 - MapKit 사용

다음으로 당신은 주어진 좌표를 중심으로 지도를 만들 것입니다. MapKit의 지도 보기를 사용하여 지도를 렌더링할 수 있습니다.

 

1. SwiftUI View, MapView.swift 파일 생성

2. 생성 된 MapView.swift 파일에 MapKit 추가

 

 

import SwiftUI
import MapKit


struct MapView: View {
    var body: some View {
        Map(initialPosition: .region(region))
    }

    private var region: MKCoordinateRegion {
        MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
            span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
        )
    }
}

 

 

Section 6 커스텀 뷰 합성하기

import SwiftUI


struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)


            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)
                .foregroundStyle(.secondary)


                Divider()


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


            Spacer()
        }
    }
}

 

1. Divider

 

 

퀴즈

1. 사용자 정의 SwiftUI 뷰를 만들 때 뷰의 레이아웃을 어디에 선언합니까?

a. view 의 생성자 b. body 프로퍼티 c. layoutSubviews() 메서드

 

2. 다음 보기 코드에서 렌더링되는 레이아웃은 무엇입니까?

 

 

3. 다음 중 사용자 정의 보기의 본문 속성에서 세 개의 보기를 반환하는 올바른 방법은 무엇입니까?

 

4. 모디파이어 메서드를 사용하여 뷰를 구성하는 올바른 방법은 무엇입니까?

 

 

 

 

 

Reference

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

Creating and combining views | Apple Developer Documentation

 

https://developer.apple.com/videos/play/wwdc2022/110352/

Embrace Swift generics - WWDC22 - Videos - Apple Developer