SwiftUI 요점 - 목록 작성 및 탐색

기본 랜드마크 세부 정보 보기가 설정되면 사용자가 랜드마크의 전체 목록을 보고 각 위치에 대한 세부 정보를 볼 수 있는 방법을 제공해야 합니다.

 

모든 랜드마크에 대한 정보를 표시할 수 있는 보기를 만들고 사용자가 랜드마크에 대한 세부 정보 보기를 위해 탭할 수 있는 스크롤 목록을 동적으로 생성합니다. UI를 미세 조정하기 위해 Xcode의 캔버스를 사용하여 다양한 장치 크기에서 여러 미리 보기를 랜더링합니다.

 

프로젝트 파일을 다운로드하여 이 프로젝트를 빌드를 시작하고 아래 단계를 따르세요.

BuildingListsAndNavigation.zip

5.06MB

예상 시간 : 35분

Xcode version : 13.1 이상

 

 

섹션 1

랜드마크 모델 생성

첫 번째 자습서에서는 모든 사용자 지정 보기에 정보를 하드 코딩했습니다. 여기에서 보기에 전달할 수 있는 데이터를 저장하는 모델을 만듭니다. 

시작하려면 이전 자습서에서 완성된 프로젝트와 이 자습서의 프로젝트 파일에서 사용할 수 있는 리소스를 사용하십시오.

 

 

1 단계

 

다운로드한 파일의 리소스 폴더를 프로젝트의 탐색 창으로 드래그 합니다. 표시되는 대화 상자에서 "필요한 경우 항목 복사" 와 랜드마크 대상을 선택한 다음 마침을 클릭합니다. landmarkData.json

이 자습서의 나머지 부분과 이 후의 모든 작업에서 이 샘플 데이터를 사용합니다.

 

2 단계

 

파일 > 새로 만들기 > 파일을 선택하여 프로젝트에 새 Swift 파일을 만들고 이름을 Landmark.swift

 

3 단계

 

데이터 파일 랜드마크에 있는 일부 키의 이름과 일치하는 몇 가지 속성으로 구조를 정의합니다. 

landmarkData.json

적합성을 추가 Codable하면 구조와 데이터 파일 간에 데이터를 더 쉽게 이동할 수 있습니다. 이 섹션의 뒷부분에서 파일에서 데이터를 읽기 Decodable 위해 프로토콜의 구성 요소에 의존할 것입니다. Codable

 

 

다음 몇 단계에서는 각 랜드마크와 연결된 이미지를 모델링합니다.

 

 

 

4 단계

 

프로젝트 파일의 Resources 폴더에서 JPG 파일을 프로젝트의 자산 카탈로그로 드래그하십시오. Xcode는 각 이미지에 대해 새로운 이미지 세트를 생성합니다.

새 이미지는 이전 자습서에서 추가한 Turtle Rock에 대한 이미지에 결합됩니다.

 

5 단계

 

데이터에서 이미지 이름을 읽는 속성과 자산 카탈로그에서 이미지를 로드하는 계산 속성을 추가합니다. imageNameimage

랜드마크 구조의 사용자는 이미지 자체에만 관심을 갖기 때문에 속성을 비공개로 설정합니다. 

 

 

 

다음으로 랜드마크의 위치에 대한 정보를 관리합니다.

 

6 단계

coordinatesJSON 데이터 구조의 스토리지를 반영하는 중첩 Coordinates유형을 사용하는 구조에 속성을 추가합니다.

이 속성은 다음 단계에서 공개계산 속성을 생성하는 데만 사용할 것이기 때문에 비공개로 표시합니다.

 

7 단계

MapKit 프레임워크와 상호 작용하는 데 유용한 속성을 계산합니다. location  Coordinate

 

 

마지마으로 파일의 랜드마크로 초기화된 배열을 만듭니다.

 

8 단계

프로젝트에 새 Swift 파일을 만들고 이름을 .ModelData.swift

 

9 단계

load(_:) 앱의 기본 번들에서 지정된 이름의 JSON 데이터를 가져오는 메서드를 만듭니다.

Decodableload 메서드는 프로토콜의 한 구성 요소인 프로토콜에 대한 반환 유형의 준수에 의존 Codable합니다.

 

10 단계

 

초기화하는 랜드마크 배열을 만듭니다. lnadmarkData.json

 

 

계속 진행기 전에 관련 파일을 그룹화하여 성장하는 프로젝트를  더 쉽게 관리할 수 있습니다.

 

11 단계

 

ContentView.swift, CircleImage.swift, MapView.swift,  landmarkData.json, Lnadmark.swift, ModelData.swift

를 Views 그룹, Resources 그룹 및 Model 그룹에 넣습니다.

팁

그룹에 추가할 항목을 선택한 다음 Xcode 메뉴에서 파일 > 새로 만들기 > 선택 항목에서 그룹을 선택하여 기존 항목의 그룹을 만들 수 있습니다.

 

 

 

 

 

섹션 2

행 보기 만들기

이 자습서에서 빌드한 첫 번째 보기는 각 랜드마크에 대한 세부 정보를 표시하는 행입니다. 이 행 보기는 표시되는 랜드마크 속성에 정보를 저장하므로 하나의 보기에서 모든 랜드마크를 표시할 수 있습니다. 나중에 여러 행을 랜드마크 목록으로 결합합니다.

 

 

 

1 단계

 

Views 그룹에 새 SwiftUI 보기를 만듭니다.  LandmarkRow.swift

 

2 단계

 

미리 보기가 아직 표시되지 않으면 편집기 > 캔버스를 선택하여 캔버스를 표시한 다음 재개를 클릭합니다.

 

3 단계

 

landmark의 저장 속서으로 추가합니다. LandmarkRow

속성을 추가하면 초기화하는 동안 유형에 랜드마크 인스턴스가 필요 landmark하기 때문에 미리보기가 작동을 멈춥니다.

LnadmarkRow

 

 

미리보기를 수정하려면 미리보기 공급자를 수정해야 합니다.

 

 

4 단계

 

previews정적 속성에서 이니셜라이저에 랜드마크 매개 변수를 추가하여 배열의 첫 번째 요소를 지정합니다

.LandmarkRow_PreviewsLandmarkRowlandmarks   미리 보기에 "Hello, World" 라는 텍스트가 표시됩니다.

 

 

5 단계

 

기존 텍스트 보기를 HStack

 

6 단계

 

lnadmark 속성을 사용하도록 텍스트 보기를 수정합니다 .name

 

7 단계

 

텍스트 보기 앞에 이미지를 추가하고 뒤에 스페이서를 추가하여 행을 완성합니다.

 

 

 

 

 

섹션 3

행 미리보기 사용자 정의

Xcode의 캔버스는 프로토콜을 준수하는 현재 편집기의 모든 유형을 자동으로 인식하고 표시합니다. 미리보기 공급자는 크기 및 장치를 구성하는 옵션과 함께 하나 이상의 보기를 반환합니다. PreviewProvider

미리 보기 공급자에서 반환된 콘텐츠를 사용자 지정하여 가장 유용한 미리 보기를 정확하게 렌더링할 수 있습니다.

 

 

 

1 단계 

 

매개변수를 배열 두번째 요소로 업데이트합니다 .  LandmarksRow_Previewslandmarklandmarks

 

2 단계

 

수정자를 사용하여 목록의 행과 비슷한 크기를 설정합니다. previewLayout(_:_

 

 

Group 미리 보기를 사용하여 공급자에서 여러 미리 보기를 반환할 수 있습니다.

 

 

3 단계

 

반환된 행으로 감싸고 Group 첫 번째 행을 다시 추가합니다.

Group 보기 콘텐츠를 그룹화하기 위한 컨터이너입니다. Xcode는 그룹의 자식 보기를 캔버스에서 별도의 미리 보기로 랜더링합니다.

 

 

4 단계

 

코드를 단순화하려면 그룹의 자식 선언 외부로 호출을 이동합니다. previewLayout(_:)

보기의 자식은 미리 보기 구성과 같은 보기의 컨텍스트 설정을 상속합니다.

 

 

미리 보기 공급자에서 작성한 코드는 Xcode가 캔버스에 표시하는 내용만 변경합니다.

 

 

 

 

섹션 4

랜드마크 목록 만들기

SwiftUI의 List 유형을 사용하면 플랫폼별 보기 목록을 표시할 수 있습니다. 목록의 요소는 지금까지 생성한 스택의 자식 보다기와 같이 정적이거나 동적으로 생성될 수 있습니다. 정적 뷰와 동적으로 생성된 뷰를 혼합할 수도 있습니다.

 

 

1 단계

 

Views 그룹에 새 SwiftUI보기를 만듭니다. LandmarkList.swift

 

2 단계

기본 텍스트 보기를 바꾸고 처음 두 랜드마크가 있는 인스턴스를 목록의 자식으로 List 제공합니다. LandmarkRow

미리보기는 iOS에 적합한 목록 스타일로 렌더링된 두 개의 랜드마크를 보여줍니다.

 

 

 

 

섹션 5

목록을 동적으로 만들기

목록의 요소를 개별적으로 지정하는 대신 컬렉션에서 직접 행을 생성할 수 있습니다. 

 

데이터 컬렉션과 컬렉션의 각 요소에 대한 보기를 제공하는 클로저를 전달하여 켈렉션의 요소를 표시하는 목록을 만들 수 있습니다. 목록은 제공된 클로저를 사용하여 컬렉션의 각 요소를 자식 보기로 변환합니다.

 

 

1 단계

 

두 개의 정적 랜드마크 행을 제거하고 대신 모델 데이터의 landmarks 배열을 List 이니셜라이저에 전달합니다.

 

목록은 식별 가능한 데이터로 작동합니다. 각 요소를 고유하게 식별하는 속성에 대한 키 경로를 데이터와 함계 전달하거나 데이터 유형이 identifiable 프로토콜을 준수하도록 하는 두 가지 방법 중 하나로 데이터를 식별할 수 있도록 만들 수 있습니다.

 

2 단계

 

클로저에서 반환하여 동적으로 생성된 목록을 완성합니다. LandmarkRow

이렇게 하면 배열의 각 요소에 대해 하나씩 생성됩니다. LandmarkRowlandmarks

 

 

 

다음으로 형식에 적합성을 List 추가하여 코드를 단순화합니다 . IdentifiableLandmark

 

 

3 단계

 

프로토콜로 전환 하고 선언합니다. Landmark.siwft     Identifiable

데이터에는 프로토콜에 필요한 속성 랜드마크가 이미 있습니다. 데이터를 읽을 때 디코딩할  속성만 추가하면됩니다.

 

4 단계

 

다시 전환 하여 매개변수를 제거합니다. LandmarkList.siwft 

이제부터 요소 컬렉션을 직접 사용할 수 있습니다.

 

 

 

 

섹션 6

목록과 세부 정보 간의 탐색 설정

목록이 제대로 랜더링되지만 아직 개별 랜드마크를 탭하여 해당 랜드마크의 세부정보 페이지를 볼 수는 없습니다.

 

목록에 포함시킨 다음 각 행을 중첩하여 대상 보기로 전환을 설정하여 목록에 탐색 기능을 추가합니다.

NavigationVIew    NavigationLink

 

 

 

이전 튜톻리얼에서 생성한 콘텐츠를 사용하여 상세 보기를 준비하고 대신 목록 보기를 표시하도록 기본 콘첸츠 보기를 표시하도록 기본 콘텐츠 보기를 업데이트합니다.

 

 

1 단계

 

새 SwiftUI 뷰를 만듭니다. LandmarkDeatil.swift

 

2 단계

 

body 속성의 내요을  ContenVIew에서 LandmarkDetail로 복사합니다.

 

3 단계

 

대신 표시로 변경합십시오. ContentViewLandmarksList

 

 

다음 몇 단계에서는 목록 및 세부 정보 보기 간에 탐색을 추가합니ㅏㄷ.

 

4 단계

 

동적으로 생선된 랜드마크 목록을    .NavigationView

 

5 단계

 

목록을 표시할 때 탐색 모음의 제목을 설정하려면 modifier 메서드를 호출합니다

.navigationTitle(_:)

 

6 단계

 

목록의 클로저 내에서 반환된 행을 a로 래핑하고 보기를 대상으로 지정합니다.   

NavigationLink   LandmarkDetail

 

7 단계

 

라이브 모드로 전환하여 미리보기에서 직접 탐색을 시도할 수 있습니다. 실시간 미리보기 버튼을 클릭하고 랜드마크를 탭하면 상세 페이지로 이동합니다.

 

 

 

 

섹션 7

자식 뷰에 데이터 전달

보기는 여전히 하드  코딩된 세부 정보를 사용하여 랜드마크를 표시합니다. 마찬가지로 유형 및 이를 구성하는 보기는 속성을 데이터 소스로 사용해야 합니다. LandmarkDetial   LandmarkRow

 

자식 뷰부터 시작하여 각 행을 하드 코딩하는 대신 전달된 데이터를 표시하도록  CircleImageMap, ViewLandmarkDetailf를

차례로 변환합니다.

 

 

1 단계

 

CircleImage.swift에서  imageCircleImage에 저장 속성을 추가합니다.

이것은 SwiftUI를 사용하여 뷰를 빌드할 때 일반적인 패턴입니다. 사용자 정의 보기는 종종 특정 보기에 대한 일련의 수정자를 래핑하고 캡슐화합니다.

 

2 단계

 

Turtle Rock의 이미지를 전달하도록 미리보기 제공자를 업데이트하십시오.

미리보기 논리를 수정했시잠ㄴ 빌드가 실패하여 미리 보기각 업데이트되지 않았습니다. 이미지를 인스턴스화하는 디테일뷰에도 입력 매개변수가 필요합니다.

 

3 단계 

 

MapView.swift 에서 속성을 추가하고 미리보기 공급자를 업데이트하여 고정좌표를 전달합니다. 

상세보기에는 새 매개변수가 필요한 맵 보기가 있기 때문에 이 변경은 빌드에도 영향을 줍니다. 곧 상세 보기를 수정할 수 있습니다.

 

4 단계

 

좌표 값을 기반으로 영역을 업데이트하는 메서드를 추가합니다.

 

5 단계

 

현재 좌표를 기반으로 지역 계산을 트리거하는 뷰 수정자를 지도에 추가합니다 .onAppear

 

6 단계

 

LandmarkDetail.swift 에서 유형에 속성을 추가합니다.   LandmarkLandmarkDetail

 

7 단계

 

LandmarkList.swift 에서 현재 랜드마크를 목적지로 전달합니다.  LandmarkDetail

 

8 단계

 

파일 에서 필요한 데이터를 사용자 지정 유형에 전달합니다.LandmarkDetail

모든 연결이 설정되면 미리보기가 다시 작동하기 시작합니다.

 

9 단계 

 

사용자가 설명 콘텐츠를 스크롤할 수 있도록 컨테이너를 a에서 로 변경하고 VStack더 이상 필요하지 않은 을 삭제합니다.  ScrollViewSpacer

 

10 단계 

 

마지막으로 수정자를 호출하여 세부 정보 보기를 표시할 때 탐색 모음에 제목을 지정 하고 수정자를 호출하여 제목을 인라인으로 표시합니다.  navigationTitle(_:)   navigationBarTitleDisplayMode(_:)

탐색 변경 사항은 보기가 탐색 스택의 일부인 경우에만 적용됩니다.

 

11 단계 

 

목록에서 탐색할 때 세부 정보 보기에 올바른 랜드마크가 표시되는지 보려면 라이브 미리 보기로 전환합니다.

 

 

 

 

 

섹션 8

동적으로 미리보기 생성

다음으로 미리 보기 공급자에 코드를 추가하여 다양한 장치 크기에서 목록 보기의 미리 보기를 렌더링합니다. 기본적으로 미리 보기는 활성 구성표의 장치 크기로 렌더링됩니다. modifier 메서드 를 호출하여 미리보기 장치를 변경할 수 있습니다 .LandmarkList_PreviewspreviewDevice(_:)

 

 

 

1 단계 

 

iPhone SE 크기로 렌더링하도록 현재 목록 미리보기를 변경하여 시작합니다. Xcode의 구성표 메뉴에 표시되는 모든 장치의 이름을 제공할 수 있습니다.

 

2 단계 

 

목록 미리보기 내에서 장치 이름 배열을 데이터로 사용하여 인스턴스에 를 포함 합니다 .LandmarkListForEach

ForEach목록과 동일한 방식으로 컬렉션에서 작동합니다. 즉, 스택, 목록, 그룹 등과 같이 자식 보기를 사용할 수 있는 모든 곳에서 사용할 수 있습니다. \.self데이터 요소가 여기서 사용하는 문자열과 같은 단순한 값 유형인 경우 식별자에 대한 키 경로로 사용할 수 있습니다 .

 

 

3 단계 

 

수정자를 사용 하여 미리 보기에 대한 레이블로 장치 이름을 추가합니다.previewDisplayName(_:)

 

 

4 단계 

 

다양한 장치로 실험하여 캔버스에서 모두 보기의 렌더링을 비교할 수 있습니다.

 

 

 

 

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation