Creating and Combining Views

SwiftUI/Tutorials 2019. 7. 23. 10:43
반응형

원문 : SwiftUI Essentials-Creating and Combining Views

뷰를 만들고 결합하기(Creating and Combining Views)

이 튜토리얼은 여러분이 좋아하는 장소를 발견하고 공유할 수 있는 iOS 앱인 랜드마크(Landmarks)를 만드는 가이드입니다. 여러분은 랜드마크의 상세정보를 보여주는 뷰를 작성하는 것으로 시작할 것입니다.

뷰들을 배치하기 위해서 랜드마크(Landmarks)는 스택을 사용해서 이미지와 텍스트뷰 컴포넌트들을 결합하고 계층화합니다. 뷰에 지도(Map)를 추가하기 위해서, 표준 MapKit 컴포넌트를 포함할 것입니다. 뷰의 디자인을 다듬기 위해서, Xcode는 변경사항이 코드로 어떻게 변환되는지 확인할 수 있는 실시간 피드백을 제공합니다.

이 프로젝트를 만드는 것을 시작하기 위해서 프로젝트 파일을 다운로드하고 아래 단계를 따라합니다.

프로젝트 파일 다운로드

Section 1. 새 프로젝트 만들고 캔버스 둘러보기(Create a New Project and Explore the Canvas)

SwiftUI 앱 템플릿을 사용해서 새로운 Xcode 프로젝트를 만들고나서 캔버스(Canvas)를 둘러봅니다.

Xcode에 있는 캔버스 뷰를 미리보기와 상호작용을 위해서, 여러분의 Mac이 macOS 10.15 beta에서 실행중인지 확인합니다.

https://docs-assets.developer.apple.com/published/4b66027b84/create-new-project.mp4

1 단계

Xcode를 열고 Xcode의 시작 윈도우에서 Create a new Xcode project를 클릭하거나 File > New > Project를 선택합니다.

2 단계

템플릿 선택에서, iOS 플랫폼을 선택하고, Single View App 템플릿을 선택하고나서 Next를 클릭합니다.

3 단계

프로젝트 이름에 Landmarks를 입력하고 Use SwiftUI 체크박스를 선택하고 Next를 클릭합니다. 여러분의 Mac에서 랜드마크(Landmarks) 프로젝트를 저장할 위치를 선택합니다.

4 단계

프로젝트 네비게이터에서, ContentView.swift를 선택하기 위해서 클릭합니다.

기본적으로, SwiftUI 뷰 파일은 두개의 구조체를 선언합니다. 첫번째 구조체는 View 프로토콜을 준수하고 뷰의 컨텐츠와 레이아웃을 설명합니다. 두번째 구조체는 해당 뷰에 대한 미리보기 뷰를 선언합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

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

5 단계

캔버스에서, 미리보기를 보여주기 위해서 Resume를 클릭합니다.

Tip
캔버스가 보이지 않은경우에 이를 보기위해서 Editor > Editor and Canvas를 선택합니다.

6 단계

body 프로퍼티 안쪽에 있는 Hello World 환영메시지를 변경합니다.

뷰의 body 프로퍼티에 있는 코드를 변경하면, 미리보기가 업데이트되어 변경사항을 반영합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello SwiftUI!")
    }
}

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

Section 2. 텍스트 뷰 사용자정의(Customize the Text View)

코드를 변경하거나 사용가능한 것을 찾아주기 위해 코드 작성을 도와주는 인스펙터(inspector)를 사용해서 뷰의 화면을 사용자정의 할 수 있습니다.

랜드마크(Landmarks) 앱을 만들때 소스 편집기, 캔버스, 인스펙터같은 모든 편집기의 조합을 사용할 수 있습니다. 어떤 도구를 사용하든 상관없이 코드는 업데이트된 상태를 유지합니다.

https://docs-assets.developer.apple.com/published/65747bda11/customize-text-view.mp4

인스펙터(inspector)를 사용해서 텍스트 뷰를 사용자정의 할 것입니다.

1 단계

미리보기에서, 인사말을 커맨트-클릭(Command-Click)해서 구조화된 편집 팝업을 불러오고, Inspect를 선택합니다.

팝업에는 사용자정의할 수 있는 다양한 속성을 보여주며, 인스펙터(inspector)는 뷰의 타입에 따라 다릅니다.

2 단계

인스펙터를 사용해서 텍스트를 Turtle Rock를 변경합니다. 첫번째 랜드마크의 이름을 앱에서 보게 될것입니다.

3 단계

폰트 수식어(modifier)를 Title로 변경합니다. 
시스템 폰트를 텍스트에 적용해서 사용자가 선호하는 폰트 크기와 설정을 올바르게 반응합니다.

4 단계

.color(.green) 수식어를 추가하기 위해 코드를 직접 수정합니다. 텍스트의 색상을 녹색으로 변경합니다.

SwiftUI 뷰를 사용자정의하기 위해서 수식어(modifiers)라는 메소드를 호출합니다. 수식어(Modifiers)는 보여주거나 다른 프로퍼티를 변경하기 위해 뷰를 랩핑(wrap)합니다. 각 수식어(modifiers)는 새로운 뷰를 반환하며, 일반적으로 세로로 쌓인 여러개의 수식어들을 연결합니다.

import SwiftUI

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

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

코드는 항상 뷰에 대한 근본이(source of truth) 됩니다. 인스펙터를 사용해서 수식어를 변경하거나 삭제할때, Xcode는 여러분의 코드를 즉시 업데이트해서 일치시킵니다.

5 단계

이번에 인스펙터를 열고 코드 편집기에서 Text 선언을 커맨드-클릭을 한 팝업에서 Inspect를 선택합니다. Color 팝업 메뉴를 클릭하고 텍스트 색상을 검정색으로 다시 변경하기위해 Inherited를 선택합니다.

6 단계

Xcode가 변경사항을 반영하기 위해 코드를 자동으로 업데이트하고, color(.green) 수식어를 제거합니다. 

import SwiftUI

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

    }
}

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

Section 3. 스택을 사용해서 뷰 결합하기(Combine View Using Stacks)

이전 섹션에서 생성된 제목 뷰 이외에, 랜드마크(landmark)에 대한 공원과 주(state)의 이름과 같은, 상세 정보를 포함하는 텍스트 뷰를 추가할 것입니다.

SwiftUI 뷰를 생성할때, 뷰의 body 프로퍼티에 컨텐츠, 레이아웃, 동작을 설명합니다. 하지만, body 프로퍼티는 오직 하나의 뷰만 반환합니다. 스택에 여러개의 뷰들을 결합하고 포함할 수 있으며, 가로, 세로 또는 앞뒤(back-to-front)로 그룹화 할 수 있습니다.

이 섹션에서, 수직(vertical) 스텍을 사용해서 공원에 대한 상세정보가 포함되어 있는 수평 스택을 배치할 것입니다.

Xcode의 구조화된 편집 지원을 사용해서 컨테이너 뷰에 뷰를 포함하거나 다른 유용한 변경하는데 도움이 됩니다. 

1 단계

구조화된 편집 팝업을 보기위해 텍스트 뷰의 초기화를 커맨드-클릭하고, Embed in VStack을 선택합니다.

다음으로, 라이브러리에서 Text 뷰를 드래그해서 스택에 텍스트 뷰를 추가할 것입니다.

2 단계

Xcode 윈도우의 우측 상단에 있는 플러스(+) 버튼을 클릭해서 라이브러리를 열고, Text 뷰를 코드에 있는 Turtle Rock 텍스트 뷰 바로 뒤로 드래그 합니다.

3 단계

Text 뷰의 견본(placeholder) 텍스트를 Joshua Tree National Park로 교체합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
        }
    }
}

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

원하는 레이아웃이 되도록 위치(location)를 사용자정의 합니다.

4 단계

위치의 폰트를 .subheadline으로 변경합니다.

import SwiftUI

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

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

5 단계

뷰를 앞 가장자리로 정렬하기 위해 VStack 초기화를 편집합니다.

기본적으로, 스텍은 컨텐츠를 중심으로 배치하고 상황에 맞는 간격을 제공합니다.

import SwiftUI

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

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

다음으로, 위치(location)의 오른쪽에 다른 텍스트 뷰를 추가할 것이며, 공원의 상태입니다.

6 단계

캔버스에서, Joshua Tree National Park를 커맨드-클릭하고, Embed in HStack을 선택합니다.

7 단계

새로운 텍스트 뷰를 위치(location) 뒤에 추가하고, 견본 텍스트를 공원의 상태로 변경하고나서 폰트를 .subheadline으로 설정합니다.

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)
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

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

8 단계

기기의 전체 넓이를 사용하도록 레이아웃을 지정하려면, 2개의 텍스트 뷰를 가지고 있는 수평 스택에 Spacer을 추가해서 공원(park)과 주(state)를 분리합니다. 

spacer는 컨텐츠의 크기를 사용하는 대신에 뷰가 포함된 부모뷰의 모든 공간을 사용하도록 확장됩니다.

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)
            }
        }
    }
}

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

9 단계

마지막으로, 랜드마크의 이름과 세부 사항의 간격을 주기 위해 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_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Section 4. 사용자정의 이미지 뷰 만들기(Create a Custom Image View)

이름과 위치 뷰가 모두 설정하고나서 할 일은 랜드마크에 대한 이미지를 추가하는 것입니다.

이 파일에 코드를 더 추가하는 대신에, 이미지에 마스크(mask), 테두리(border), 그림자(drop shadow)를 적용하는 사용자정의 뷰를 만들것입니다.

http://(https://docs-assets.developer.apple.com/published/8b7a2a710a/custom-image-view.mp4

먼저 프로젝트의 asset catalog에 이미지를 추가합니다.

1 단계

프로젝트의 Resources 폴터에 있는 turtlerock.png를 찾아서, asset catalog의 편집기 안으로 드래그 합니다. Xcode는 그 이미지에 대한 새로운 이미지 세트(set)를 생성합니다.

다음으로, 여러분의 사용자정의 이미지 뷰에 대한 새로운 SwiftUI 뷰를 만들 것입니다.

2 단계

템플릿 선택기를 다시 열기 위해서 File > New > File를 선택합니다. User Interface 섹션에서, SwiftUI View를 선택을 클릭하고 Next를 클릭합니다. CircleImage.swift 로 이름을 주고 Create를 클릭합니다.

여러분은 이미지를 삽입하고 원하는 디자인과 일치하도록 보여주는 것을 수정할 준비가 되었습니다.

3 단계

Image(_:) 초기화를 사용해서 Turtle Rock 이미지로 텍스트 뷰를 교체합니다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

4 단계

이미지에 클립핑된 원을 적용하기 위해 clipShape(Circle()) 호출을 추가합니다.

Circle 타입은 마스킹으로 사용하거나 원에 선이나 채우기를 제공할 수 있는 도형입니다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

5 단계

회색 선으로 다른 원을 만들고 나서 이미지의 테투리를 주기위해 오버레이로 추가합니다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.gray, lineWidth: 4))
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

6 단계

다음으로 10포인트 반경으로된 그림자를 추가합니다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 10)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

32032

7 단계

테두리 색상을 흰색으로 교체합니다.

이미지 뷰가 완료되었습니다.

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 10)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

Section 5. UIKit과 SwiftUI 뷰를 함께 사용하기(Use UIKit and SwiftUI Views Together)

이제 지도(map) 뷰를 생성할 준비가 되었습니다. 지도를 그리기 위해서 MapKit의 MKMapView 클래스를 사용할 수 있습니다.

SwiftUI에서 UIView 하위 클래스를 사용하기 위해, UIViewRepresentable 프로토콜을 준수하는 SwiftUI 뷰에서 다른 뷰로 래핑합니다. SwiftUI는 WatchKit과 AppKit 뷰와 비슷한 프로토콜을 포함합니다.

시작하기 위해, MKMapView를 보여줄수 있는 새로운 사용자정의 뷰를 만들것입니다.

1 단계

File > New > File를 선택하고, 플랫폼을 iOS를 선택하고, SwiftUI View 템플릿을 선택하고, Next를 클릭합니다. 새로운 파일은 MapView.swift로 이름짓고 Create를 클릭합니다.

2 단계

MapKit에 대한 import 문을 추가하고 MapView 타입에 대해 UIViewRepresentable 준수하는 것을 선언합니다. 

Xcode에서 보여주는 오류에 대해서 신경쓰지 마세요. 다음 단계에서 수정할 것입니다.

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    var body: some View {
        Text("Hello World")
    }
}

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

UIViewRepresentable 프로토콜은 두개의 요구사항을 추가해야 합니다: MKMapView를 만드는 UIView(context:) 메소드와 뷰를 설정하고 변경사항에 대응하는 updateUIView(_: context:) 메소드

3 단계

body 프로퍼티를 비어있는 MKMapView를 만들고 반환하는 UIView(context:) 메소드로 교체합니다. 

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
}

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

4 단계

Turtle Rock를 지도 가운데에 배치하기 위해 맵뷰의 지역을 올바른 좌표로 설정하는 updateUIView(_:context:) 메소드를 만듭니다. 

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_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

미리보기가 고정모드 일때, SwiftUI 뷰만 랜더링합니다. MKMapView가 UIView의 하위클래스이기 때문에, 지도에서 보기 위해서 실시간 미리보기로 전환해야 합니다.

5 단계

미리보기를 실시간 모드로 전환하기 위해 Live Preview 버튼을 클릭합니다. 미리보기 위의 Try Again 또는 Resume 버튼을 클릭해야 할 수도 있습니다.

잠시 후, Turtle Rock가 있는 Joshua Tree National Park의 지도를 보게 될 것입니다.

Section 6. 상세 뷰 구성하기(Compose the Detail View)

이제 모든 구성요소를 가지고 있습니다 - 이름과 장소, 원형 이미지, 위치에 대한 지도.

지금까지 사용했던 도구를 사용해서, 랜드마크 상세 뷰에 대한 마지막 디자인을 만들기 위해 사용자정의 뷰를 결합(combine)합니다.

1 단계

프로젝트 네비게이터에서, ContentView.swift 파일을 선택합니다.

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_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

2 단계

3개의 텍스트 뷰를 가지고 있는 VStack를 저장하는 다른 VStack을 포함합니다.

import SwiftUI

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

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

3 단계

스텍의 맨 위에 사용자정의 MapView를 추가합니다. frame(width:height:)로 MapView의 크기를 설정합니다.

height 매개변수를 지정할때, 뷰는 컨텐츠의 넓이에 맞게 자동적으로 크기가 조정됩니다. 이 경우에, MapView는 사용가능한 전체 공간으로 확장됩니다.

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

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

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

4 단계

구성된 뷰에 지도를 랜더링하기 위해 Live Preview 버튼을 클릭합니다.

실시간 미리보기가 보여지는 동안에 편집을 계속 할 수 있습니다.

5 단계

스택에 CircleImage 뷰를 추가합니다. 

import SwiftUI

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

            CircleImage()

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

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

6 단계

지도 뷰의 상단에 이미지 뷰를 겹쳐서 보이기 위해, 이미지에 -130 포인트 수직 offset을 주고, 뷰의 하단에 -130 포인트의 padding을 줍니다.

이러한 조정은 이미지를 위로 움직여서 텍스트가 들어갈 공간을 만듭니다.

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(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        }
    }
}

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

7 단계

화면의 상단에 넣기위해 바깥쪽 VStack의 하단에 spacer를 추가합니다.

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(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

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

8 단계

마지막으로, 지도 컨텐츠가 화면 상단 가장자리로 확장되도록하기 위해, 맵뷰에 edgesIgnoringSafeArea(.top) 수식어를 추가합니다.

import SwiftUI

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

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack(alignment: .top) {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()

            Spacer()
        }
    }
}

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

이해하는지 확인하기(Check Your Understanding)

퀴즈 1. 사용자정의 SwiftUI 뷰를 생성할때, 뷰의 레이아웃을 어디에 선언하나요?

  1. 뷰의 초기화(initializer) 안
  2. 본문(body) 프로퍼티 안
  3. layoutSubviews() 메소드 안

[정답 : 2]
사용자정의 뷰는 본문 프로퍼티를 구현하며, 이는 View 프로토콜의 요구사항입니다.

퀴즈 2. 다음에 오는 코드가 그려지는 것은 어떤 것인가요?

var body: some View {
    HStack {
        CircleImage()
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
        }
    }
}

 

[정답 : 3]
중첩된 수평과 수직 스택은 이미지를 두개의 텍스트뷰 왼쪽에 정렬합니다.

퀴즈 3. 사용자정의 뷰의 본문 프로퍼티에서 3개의 뷰를 반환하는 올바른 방법은 무엇인가요?

VStack {
   Text("Turtle Rock")
      .font(.title)
   Divider()
   Text("Joshua Tree National Park")
}
[
    Text("Turtle Rock").font(.title),
    Divider(),
    Text("Joshua Tree National Park")
]
Text("Turtle Rock")
    + Divider()
    + Text("Joshua Tree National Park")

[정답 : 1]
본문 프로퍼티에서 여러개의 뷰를 반환하기 위해 스택을 사용할 수 있습니다.

퀴즈 4. 뷰를 구성하기 위한 올바른 수식어 메소드를 사용방법은?

var text = Text("Hello world!")
text.font(.title)
text.color(.purple)
return text

var text = Text("Hello world!")
text.font = .title
text.color = .purple
return text
Text("Hello world!")
   .font(.title)
   .color(.purple)

[정답 : 3]
수식어는 새로운 동작이나 시각적 변경을 적용하는 뷰를 반환합니다. 여러개의 수식어를 연결해서 필요한 효과를 얻을 수 있습니다.

반응형
저작자표시

'SwiftUI > Tutorials' 카테고리의 다른 글

Interfacing with UIKit  (0) 2019.08.13
Working with UI Controls  (0) 2019.08.13
Composing Complex Interfaces  (0) 2019.08.13
Animating Views and Transitions  (0) 2019.08.13
Drawing Paths and Shapes  (0) 2019.08.13
Handling User Input  (0) 2019.08.13
Building Lists and Navigation  (0) 2019.07.23
Posted by 까칠코더
,

티스토리툴바