SwiftUI 요점 - 사용자 입력 처리

Landmarks 앱에서 사용자는 즐겨찾는 장소에 플래그를 지정하고 즐겨찾기만 표시하도록 목록을 필터링할 수 있습니다. 이 기능을 만들려면 먼저 사용자가 즐겨찾기에만 집중할 수 있도록 목록에 스위치를 추가한 다음, 사용자가 랜드마크를 즐겨찾기로 표시하기 위해 탭하는 별 모양 버튼을 추가합니다.

스타터 프로젝트를 다운로드하고 이 튜토리얼을 따르거나 완성된 프로젝트를 열고 코드를 직접 탐색하십시오.

 

HandlingUserInput.zip

5.07MB

예상 시간 : 20분

Xcode version : 13.1 이상

 

 

섹션 1

사용자가 가장 좋아하는 랜드마크 표시

사용자에게 즐겨찾기를 한 눈에 표시하도록 목록을 개선하는 것으로 시작하십시오. 구조에 속성을 추가하여 Landmark랜드마크의 초기 상태를 즐겨찾기로 읽은 다음 즐겨찾기 랜드마크를 표시하는 각각에 별을 추가합니다.LandmarkRow

 

 

 

1 단계

시작점 Xcode 프로젝트 또는 이전 자습서에서 완료한 프로젝트를 열고 프로젝트 탐색기에서 선택합니다.Landmark.swift

2 단계

구조 에 속성을 추가합니다 .isFavoriteLandmark

파일에는 각 랜드마크에 대해 이 이름을 가진 키가 있습니다. 를 준수하기 때문에 키와 이름이 같은 새 속성을 만들어 키와 연결된 값을 읽을 수 있습니다.landmarkData.jsonLandmarkCodable

3단계

프로젝트 네비게이터에서 선택하십시오 .LandmarkRow.swift

4단계

스페이서 뒤에 별 이미지를 문장 안에 추가 if하여 현재 랜드마크가 즐겨찾기인지 테스트합니다.

SwiftUI 블록에서는 if조건부로 보기를 포함하기 위해 명령문을 사용합니다.

5단계

시스템 이미지는 벡터 기반이므로 수정자를 사용하여 색상을 변경할 수 있습니다 .foregroundColor(_:)

랜드마크의 속성이 다음과 같을 때마다 별이 표시 됩니다. 이 자습서의 뒷부분에서 해당 속성을 수정하는 방법을 볼 수 있습니다.isFavoritetrue

 

 

 

섹션 2

목록 보기 필터링

모든 랜드마크를 표시하거나 사용자의 즐겨찾기만 표시하도록 목록 보기를 사용자 정의할 수 있습니다. 이렇게 하려면 유형에 약간의 상태 를 추가해야 합니다.LandmarkList

상태 는 시간이 지남에 따라 변경될 수 있고 보기의 동작, 콘텐츠 또는 레이아웃에 영향을 주는 값 또는 값 집합입니다. 속성과 함께 @State속성을 사용하여 뷰에 상태를 추가합니다.

 

 

 

1 단계

프로젝트 네비게이터에서 선택 하고 미리보기를 되돌려 목록의 단일 버전만 표시합니다.LandmarkList.swift

 

2 단계

초기 값이 로 설정된 @State호출된 속성 을 추가합니다 .showFavoritesOnlyfalse

상태 속성을 사용하여 보기 및 해당 하위 보기와 관련된 정보를 보유하기 때문에 항상 상태를 로 생성합니다 private.

 

3단계

재개를 클릭하여

캔버스를 새로 고칩니다.속성 추가 또는 수정과 같이 보기 구조를 변경할 때 캔버스를 수동으로 새로 고쳐야 합니다.

 

4단계

속성과 각 값 을 확인하여 랜드마크 목록의 필터링된 버전을 계산합니다 .showFavoritesOnlylandmark.isFavorite

 

5단계

List 에 있는 랜드마크 목록의 필터링된 버전을 사용합니다 

 

6단계

목록이 어떻게 반응하는지 보려면 의 초기 값을 변경하십시오 .showFavoritesOnlytrue

 

 

섹션 3

상태를 토글하는 컨트롤 추가 

목록의 필터를 사용자에게 제어하려면 의 값을 변경할 수 있는 제어를 추가해야 합니다 . 토글 컨트롤에 바인딩을 전달하여 이 작업을 수행합니다.showFavoritesOnly

바인딩 은 변경 가능한 상태에 대한 참조 역할을 합니다 . 사용자가 토글을 끔에서 켬으로, 다시 끔으로 탭하면 컨트롤이 바인딩을 사용하여 그에 따라 보기의 상태를 업데이트합니다.

 

 

 

1 단계

중첩 그룹을 만들어 랜드마크를 행으로 변환합니다.ForEach

목록에서 정적 및 동적 보기를 결합하거나 둘 이상의 다른 동적 보기 그룹을 결합하려면 데이터 컬렉션을 에 전달하는 대신 유형을 사용하십시오 .ForEachList

 

 

2 단계

에 바인딩을 전달 Toggle하여 뷰의 첫 번째 자식으로 뷰를 추가합니다 .ListshowFavoritesOnly

접두사를 사용 $하여 상태 변수 또는 해당 속성 중 하나에 대한 바인딩에 액세스합니다.

 

 

3단계

계속 진행하기 전에 기본값을 로 반환 합니다 .showsFavoritesOnlyfalse

 

4단계

실시간 미리보기를 사용하고 토글을 눌러 이 새로운 기능을 사용해 보세요.

 

 

섹션 4

저장을 위해 관찰 가능한 객체 사용

사용자가 특정 랜드마크를 즐겨찾기로 제어할 수 있도록 준비하려면 먼저 랜드마크 데이터를 관찰 가능한 객체에 저장합니다.

관찰 가능한 개체는 SwiftUI 환경의 저장소에서 보기에 바인딩할 수 있는 데이터에 대한 사용자 지정 개체입니다. SwiftUI는 뷰에 영향을 줄 수 있는 관찰 가능한 객체의 변경 사항을 감시하고 변경 후 뷰의 올바른 버전을 표시합니다.

 

 

1 단계

프로젝트의 탐색 창에서 을 선택 합니다.ModelData.swift

 

2 단계

Combine 프레임워크 의 프로토콜을 준수하는 새 모델 유형을 선언하십시오 .ObservableObject

SwiftUI는 관찰 가능한 객체를 구독하고 데이터가 변경될 때 새로 고침이 필요한 뷰를 업데이트합니다.

 

3단계

landmarks배열을 모델로 이동합니다 .

 

 

관찰 가능한 개체는 구독자가 변경 사항을 선택할 수 있도록 데이터에 대한 변경 사항을 게시해야 합니다.

 

4단계

배열 에 @Published속성을 추가합니다 .landmarks

 

 

섹션 5

보기에 모델 개체 채택

이제 객체를 생성했으므로 뷰를 업데이트하여 앱의 데이터 저장소로 채택해야 합니다.ModelData

 

1 단계

LandmarkList.swift 에서 속성 선언을 뷰에 추가 하고 수정자를 미리보기에 추가합니다.   @EnvironmentObject environmentObject(_:)

수정자가 부모에게 적용된 한 속성은 자동으로 값을 가져옵니다 .modelDataenvironmentObject(_:)

 

 

2 단계

랜드마크를 필터링할 때 데이터로 사용 합니다.modelData.landmarks

 

 

3단계

환경의 개체 와 함께 작동하도록 보기를 업데이트 합니다.LandmarkDetailModelData

 

4단계

개체 와 함께 작동하도록 미리보기를 업데이트 합니다.LandmarkRowModelData

 

5단계

미리보기를 업데이트하여 환경에 모델 개체를 추가하면 모든 하위 보기에서 개체를 사용할 수 있습니다.ContentView

하위 보기에 환경의 모델 개체가 필요한 경우 미리 보기가 실패하지만 미리 보고 있는 보기에 수정자가 없습니다.environmentObject(_:)

 

 

다음으로 시뮬레이터나 기기에서 앱을 실행할 때 환경에 모델 개체를 배치하도록 앱 인스턴스를 업데이트합니다.

 

 

 

6단계

업데이트하여 모델 인스턴스를 만들고 수정자를 사용하여 제공합니다.LandmarksAppContentViewenvironmentObject(_:)

속성을 사용 하여 앱 수명 동안 한 번만 지정된 속성에 대한 모델 개체를 초기화합니다. 여기에 표시된 것처럼 앱 인스턴스에서 속성을 사용할 때와 보기에서 사용할 때 마찬가지입니다.@StateObject

 

7단계

라이브 미리 보기로 다시 전환 하고 켜서 모든 것이 제대로 작동하는지 확인합니다.LandmarkList.swift

 

 

 

섹션 6

각 랜드마크에 대한 즐겨 찾기 버튼 만들기

랜드마크 앱은 이제 랜드마크의 필터링된 보기와 필터링되지 않은 보기 간에 전환할 수 있지만 즐겨찾는 랜드마크 목록은 여전히 ​​하드 코딩되어 있습니다. 사용자가 즐겨찾기를 추가 및 제거할 수 있도록 하려면 랜드마크 상세 보기에 즐겨찾기 버튼을 추가해야 합니다.

 

먼저 재사용 가능한 .FavoriteButton

 

1 단계

FavoriteButton.swift 이라는 새 뷰를 만듭니다 .

 

 

2 단계

버튼의 현재 상태를 나타내는 바인딩을 추가 하고 미리보기에 상수 값을 제공합니다.isSet

바인딩을 사용하기 때문에 이 보기 내에서 변경한 내용은 데이터 원본으로 다시 전파됩니다.

 

 

3단계

Button상태 를 토글하고 상태에 따라 모양을 변경 하는 작업으로 생성합니다 .isSet

단추의 레이블에 제공한 제목 문자열은 레이블 스타일을 사용할 때 UI에 나타나지 않지만 VoiceOver는 이를 사용하여 접근성을 향상시킵니다.iconOnly

 

4단계

범용 CircleImage.swift, MapView.swift, FavoriteButton.swift  및 를 Helpers 그룹으로 수집하고 랜드마크 보기를 Landmarks 그룹으로 수집합니다.

 

 

다음으로, 버튼의 속성을 주어진 랜드마크 의 속성에 바인딩하여 상세 보기에 추가합니다.FavoriteButtonisSetisFavorite

 

 

 

5단계

LandmarkDetail.swift 로 전환 하고 입력 랜드마크의 인덱스를 모델 데이터와 비교하여 계산합니다.

이를 지원하려면 환경의 모델 데이터에도 액세스해야 합니다.

 

 

6단계

HStack새 로 랜드마크 이름을 포함합니다 . 달러 기호( )를 사용 하여 속성에 대한 바인딩을 제공합니다 .FavoriteButtonisFavorite$

버튼 이 모델 객체에 저장된 랜드마크 의 속성을 업데이트하도록 객체 와 함께 사용 합니다.landmarkIndexmodelDataisFavorite

 

7단계

LandmarkList.swift 로 다시 전환 하고 실시간 미리보기를 켭니다.

목록에서 세부 정보로 이동하고 버튼을 탭하면 목록으로 돌아갈 때 변경 사항이 유지됩니다. 두 보기 모두 환경의 동일한 모델 개체에 액세스하기 때문에 두 보기는 일관성을 유지합니다.