SwiftUI 요점 - View 생성 및 결합

이 튜토리얼은 좋아하는 장소를 발견하고 공유하기 위한 앱인  Landmarks 구축 과정을 안내합니다. 랜드마크의 세부 정보를 보영주는 뷰를 구축하는 것으로 시작합니다. 

보기를 배치하기 위해 Landmarks는 스택을 사용하여 이미지 및 텍스트를 보기 구성요소를 결합하고 계층화합니다. 보기에 지도를 추가하려면 표준 MapKit구성 요소를 포함합니다. 보기의 디자인을 다듬을 때 Xcode는 실시간 피드백을 제공하므로 이러한 변경 사항이 코드로 어떻게 변환되는지 확인할 수 있습니다. 프로젝트 파일을 다운로드 하여 이 프로젝트 빌드 시간 하고 아래 단계를 따르세요

 

예상 시간 : 40 분    

Xcode version : 13.1 이상

 

 

섹션 1

새 프로젝트 생성 및 캔버스 탐색

SwiftUI 를 사용하는 새 Xcode 프로젝트를 만듭니다. 캔버스, 미리보기 및 SwiftUI 템플릿 코드를 살펴보세요.

Xcode에서 캔버스의 보기를 미리 보고 상호 작용하고 자습서 전체에 설명된 모든 최신 기능을 사용하려면 Mac에서 macOS Montery 이상을 실행 중인지 확인하십시오.

 

 

1 단계

 

Xcode를 열골 Xcode의 시작 창에서 "새 Xcode 프로젝트 만들기"를 클릭하거나 파일 > 새로 만들기 > 프로젝트를 선택합니다.

 

2 단계

 

템플릿 선택기에서 플랫폼으로 iOS를 선택하고 앱 템플릿을 선택한 후 다음을 클릭합니다.

 

3 단계

 

제품 이름으로 "Landmarks"를 입력하고 인터페이스로 "SwiftUI"를 언어로 "Swift"를 선택한 후 다음을 클릭합니다. Mac에서 Landmarks 프로젝트를 저장할 위치를 선택하십시오.

 

4 단계

 

프로젝트 네비게이터를 선택합니다. LandmarksApp.swift

SwiftUI 앱 라이프 사이클을 사용하는 앱은 App 프로토콜을 준수하는 구조를 가지고 있습니다. 구조의 body 속성은 하나 이상의 장면을 반환하며, 차례로 표시할 콘텐츠를 제공합니다. 속정은 @main 앱의 진입점을 식별합니다.

 

5 단계

 

프로젝트 네비게이터를 선택합니다. ContentView.swift

기본적으로 SwiftUI 보기 파일은 두 가지 구조를 선언합니다. 첫 번째 구조는 View프로토콜을 따르고 보기의 내용과 레이아웃을 설명합니다. 두 번째 구조는 해당 보기에 대한 미리보기를 선언합니다.

 

6 단계

 

캔버스에서 재개를 클릭하여 미리보기를 표시합니다.

팁 : 캔버스가 표시되지 않으면 편집기 > 캔버스를 선택하여 표시합니다.

 

7 단계

 

속성 내부에서 body "Hello, World!"를 변경합니다. 자신을 위한 인사말.

body 보기 속성에서 코드를 변경하면 미리 보기가 업데이트되어 변경 사항을 반영합니다.

 

 

섹션 2

텍스트 보기 사용자 정의

코드를 변경하거나 검사기를 사용하여 사용 가능한 항목을 찾고 코드 작성에 도움을 주어 보기의 표시를 사용자 정의할 수 있습니다. Landmarks 앱을 빌드할 때 소스 편집기, 캔버스 또는 검사기와 같은 편집기 조합을 사용할 수 있습니다. 사용하는 도구에 관계없이 코드가 업데이트된 상태로 유지됩니다.

 

 

다음으로 인스펙터를 사용하여 텍스트 보기를 사용자 정의합니다.

 

1 단계

 

미리 보기에서 인사말을 Command 클릭하여 구조화된 편집 팝오버를 불러오고 "SwiftUI inspector 표시" 를 선택합니다.

팝오버는 검사하는 보기 유형에 따라 사용자 정의할 수 있는 다양한 속성을 표시합니다.

 

2 단계

 

인스펙터를 사용하여 텍스트를 앱에 표시할 첫 번째 랜드마크의 이름인 "Turtle Rock" 으로 변경합니다.

 

3 단계

 

글꼴 수정자를 "제목"으로 변경합니다.

이렇게 하면 시스템 글꼴이 텍스트에 적용되어 사용자가 선호하는 글꼴 크기 및 설정에 올바르게 응답하니다.

 

 

SwiftUI 보기를 사용자 정의하려면 modifiers라는 메소드를 호출합니다. 수정자는 보기를 래핑하여 표시 또는 기타 속성을 변경합니다. 각 수정자는 새 보기를 반환하므로 수직으로 쌓인 여러 수정자를 연결하는 것이 일반적입니다.

 

 

4 단계

 

padding() 수정자를 수정자로 변경하려면 코드를 직접 편집하십시오. 이것은 텍스트의 색상을 녹색으로 변경합니다. foregroundColor(.green)

 

 

귀하의 코드는 항상 보기에 대한 진실된 소스입니다. 인스펙터를 사용하여 수정자를 변경하거나 제거하면 Xcode는 일치하도록 코드를 즉시 업데이트합니다.

 

 

5 단계

 

이번에 텍스트는 코드 편집기에서 선언을 Command - 를 클릭하여 인스펙터를 연 다음 팝오버에서 "Show SwiftUI inspector" 를 선택합니다. 색상 팝업 메뉴를 클릭하고 상속됨을 선택하여 텍스트 색상을 다시 검정색으로 변경합니다.

 

6 단계

 

Xcode는 수정자를 제거하여 변경 사항을 반영하도록 코드를 자동으로 업데이트합니다.

.foregroundColor(.green)

 

 

 

섹션 4

스택을 사용하여 보기 결합

이전 섹션에서 만든 제목 보기 외에도 공원 이름 및 상태와 같은 랜드마크에 대한 세부 정보를 포함하는 텍스트 보기를 추가합니다.   

 

SwiftUI view를 만들 때 view의 body 속성에서 내용, 레이아웃 및 동작을 설명합니다. 그러나 body 속성은 단일 보기만 반환 합니다. 보기를 가로, 세로 또는 뒤에서 앞으로 그룹화하는 스택에 여러 보기를 결합하고 포함할 수 있습니다.

 

이 섹션에서는 수직 스택을 사용하여 공원에 대한 세부 정보가 포함된 수평 스택 위에 제목을 배치합니다.

 

 

 

Xcode의 구조적 편집 지원을 사용하여 컨테이너 보기에 보기를 표함하거나, 검사기를 열거나, 기타 유용한 변경을 도울 수 있습니다.

 

 

1 단계

 

텍스트 보기의 이니셜라이저를 Command- 클릭 하여 구조화된 편집 팝오버를 표시한 다음 "VStack에 포함" 을 선택합니다.

 

 

텍스트 다음으로 라이브러리에서 보기를 끌어 스택에 텍스트 보기를 추가합니다.

 

 

 

2 단계

 

Xcode 창의 오른쪽 상단에 있는 더하기 버튼(+)을 클릭하여 라이브러리를 연 다음 텍스트 보기를 "Turtle Rock" 텍스트 보기 바로 아래에 있는 코드의 위치로 드래그합니다.

 

3 단계

 

텍스트 보기의 자리 표시자를 텍스트를 "Joshua Tree National Park" 로 바꿉니다.

 

 

 

원하는 레이아웃과 일치하도록 위치를 사용자 지정합니다.

 

 

 

4 단계

 

위치의 글꼴을 설정합니다. subHeadline.

 

5 단계

 

이니셜라이저를 편집하여 VStack 보기를 선행 가장자리로 정렬합니다.

기본적으로 스택은 축을 따라 내용을 가운데에 두고 상황에 맞는 간격을 제공합니다.

 

6 단계

 

캔버스에서 "Joshua Tree Nation Park" 를 Command- 클릭하고 "HStack에 포함" 을 선택합니다.

 

 7 단계

 

위치 뒤에 새 텍스트 보기를 추가하고 자리 표시자 텍스트를 공원의 상태로 변경한 다음 글꼴을  설정합니다 subheadline.

 

8 단계

 

장치의 전체 너비를 사용하도록 레이아웃을 지시하려면 Spacer 두 개의 텍스트 보기를 보유하는 수평 스택에 추가하여 공원과 주를 분리합니다.

 

9 단계

 

마지막으로 padding() modifier 메서드를 사용하여 랜드마크의 이름과 세부 정보에 약간의 공간을 추가합니다.

 

 

 

섹션 4

사용자 정의 이미지 보기 생성

이름과 위치 보기가 모두 설정되면 다음 단계는 랜드마크에 대한 이미지를 추가하는 것입니다.

이 파일에 더 많은 코드를 추가하는 대신 마스크, 테두리 및 그림자를 이미지에 적용하는 사용자 지정 보기를 만듭니다.

 

 

프로젝트의 자산 카탈로그에 이미지를 추가하여 시작하십시오

 

1 단계

 

프로젝트 파일의 Resources 폴더에서 찾으십시오. 자산 카탈로그의 편집기로 끌어다 놓습니다. Xcode는 이미지에 대한 새 이미지 세트를 생성합니다. turtlerock@2x.jpg

 

 

다음으로 사용자 정의 이미지 보기에 대한 새 SwiftUI 보기를 만듭니다.

 

 

2 단계

 

파일 > 새로 만들기 > 파일을 선택하여 템플릿 선택기를 다시 엽니다. 사용자 인터페이스 섹션에서 "SwiftUI 보기" 를 선택하고 다음을 클릭합니다. 파일 이름을 지정 하고 만들기를 클릭합니다. CircleImage.swift

 

 

이미지를 삽입하고 원하는 디자인과 일치하도록 디스플레이를 수정할 준비가 되었습니다.

 

 

3 단계

 

Image(_:) 이니셜라이저를 사용하여 텍스트 보기를 Turtle Rock 이미지로 교체하고 표시할 이미지 이름을 전달합니다.

 

4 단계

 

이미지에 원형 자르기 모양을 적용하는 호출을 추가합니다. clipShape(Circle()_

유형은 Circle 마스크로 사용하거나 원에 획 또는 채우기를 제공하여 보기로 사용 할 수 있는 모양입니다.

 

 

5 단계

 

회색획으로 다른 원을 만든 다음 오버레이로 추가하여 이미지에 테두리를 지정합니다.

 

6 단계

 

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

 

7 단계

 

테두리 색상을 흰색으로 변경합니다.

이것으로 이미지 보기가 완료됩니다.

 

 

 

섹션 5

다른 프레임워크에서 SwiftUI 보기 사용

다음으로 주어진 좌표를 중심으로 지도를 생성합니다.

MapKIt의 보기를 사용 Map하여 지도를 렌더링할 수 있습니다.

 

 

 

시작하려면 지도를 관리할 새 사용자 지정 보기를 만듭니다.

 

 

 

1 단계

 

파일 > 새로 만들기 > 파일을 선택하고 플랫폼으로 iOS를 선택하고 "SwiftUI 보기" 템플릿을 선택하고 다음을 클릭합니다. 새 파일의 이름을 지정하고 만들기를 클릭합니다. MapVIew.swift

 

2 단계

 

import에 대한 문을 추가합니다. MapKit

같은 파일에서 SwiftUI 및 특정 다른 프레임워크를 가져오면 해당  프레임워크에서 제공하는 SwiftUI 관련 기능에 액세스할 수 있습니다.

 

3 단계

 

지도에 대한 지역 정보를 보유하는 개인 상태 변수를 만듭니다.

속성을 사용하여 @State 둘 이상의 보기에서 수정할 수 있는 앱의 데이터에 대한 정보 소스를 설정합니다. 

SwiftUI는 기본 저장소를 관리하고 값에 의존하는 뷰를 자동으로 업데이트합니다.

 

4 단계

 

텍스트 기본 보기를 지도 영역에 바인딩하는 보기로 바꿉니다.

상태변수에 접두사를 붙이면 $기본 값에 대한 참조와 같은 바인딩을 전달합니다. 사용자가 지도와 상화작용할 때 지도는 

사용자 인터페이스에 현재 표시되는 지도 부분과 일치하도록 지역 값을 업데이트합니다.

 

 

미리보기가 정적 모드인 경우 기본 SwiftUI 보기만 완전히 렌더링합니다. 보기의 지도 경우 렌더링을 보려면 라이브 미리 보기로 전환해야 합니다.

 

 

5 단계

 

라이브 미리보기를 클릭하여 미리보기를 라이브모드로 전환합니다. 미리보기 위에 있는 다시 시도 또는 재개를 클릭해야 할 수도 있습니다.

잠시 후 Turtle Rock을 중심으로 지도가 표시됩니다. 실시간 미리보기에서 지도를 조작하여 약간 축소하고 주변 지역을 볼 수 있습니다.

 

 

 

섹션 6

상세도 작성

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

 

지금까지 사용한 도구로 사용자 정의 보기를 결합하여 랜드마크 상세 보기의 최종 디자인을 만듭니다.

 

 

 

1 단계

 

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

 

2 단계

 

VStack 3개의 텍스트 보기를 포함 하는 다른 보기를 포함 VStack 합니다.

 

3 단계

 

스택의 맨 위에 사용자 정의를 추가하십시오. . 으로 크기를 설정합니다. MapviewMap

viewframe(width:height:)

매개변수만 지정하면 height 보기의 크기가 콘텐츠 너비에 맞게 자동을 조정됩니다. 이 경우 사용 가능한 공간을 채우도록 확장됩니다. MapView

.

4 단계 

 

실시간 미리보기를 클릭하여 구성된 보기에서 렌더링된 지도를 봅니다.

실시간 미리보기를 표시하는 동안 보기를 계속 편집할 수 있습니다.

 

5 단계

 

스택에 보기를 추가합니다. CircleImage

 

6 단계

 

지도 보기 위에 이미지 보기를 레이어링하려면 이미지에 수직으로 -130 포인트의 오프셋을 지정하고 보기 하단에서 -130 포인트의 패딩을 지정합니다. 이러한 조정은 이미지를 위쪽으로 이동하여 텍스트를 위한 공간을 만듭니다.

 

7 단계

 

외북 하단에 스페이서를 추가하여 VStack 콘텐츠를 화면 상단으로 밀어 넣습니다.

 

8 단계

 

지도 콘텐츠가 화면 상단 가장자리까지 확장되도록 하려면 지도 보기에 수정자를 추가합니다. ignoreSafeArea(edges:.top)

 

 

9 단계

 

랜드마크에 대한 구분선과 추가 설명 텍스트를 추가합니다.

 

 

10 단계

 

마지막으로, 각 텍스트 보기에서 부제목 글꼴 수정자를 HStack 포함하는 보기로 이동하고 부제목 텍스트에 보조 색상을 적용합니다. 스택과 같은 레이아웃 뷰에 수정자를 적용하면 SwiftUI는 그룹에 포함된 모든 요소에 수정자를 적용합니다.

 

 

 

 

 

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