2022. 8. 16. 16:29ㆍ카테고리 없음
데이터 입력을 위한 다양한 공통 사용자 인터페이스 컨트롤로 작업하고 사용자가 변경 사항을 저장할 때마다 Landmarks 모델 유형을 업데이트합니다.
단계에 따라 이 프로젝트를 빌드하거나 완성된 프로젝트를 다운로드하여 직접 탐색하세요.
예상 시간 : 25분
Xcode version : 13.1 이상
섹션 1
사용자 프로파일 표시
Landmark 앱은 일부 구성 세부 정보 및 기본 설정을 로컬에 저장합니다. 사용자가 세부 정보를 편집하기 전에 편집 컨트롤이 없는 요약 보기에 표시됩니다.
1 단계
프로젝트의 모델 그룹에 추가하는 Profile.swift라는 이름의 새 Swift 파일에서 사용자 프로필을 정의하여 시작합니다
2 단계
그런 다음 보기 그룹 아래에 프로필이라는 새 그룹을 만든 다음 저장된 프로필의 사용자 이름을 표시하는 텍스트 보기를 사용하여 해당 그룹에 프로필 호스트라는 보기를 추가합니다.
프로필 호스트 보기는 프로필 정보의 정적 요약 보기와 편집 모드를 모두 호스팅합니다 .
3단계
프로필 인스턴스를 가져 오고 몇 가지 기본 사용자 정보를 표시 하는 프로필 요약이라는 프로필 그룹에 다른 보기를 만듭니다 .
상위 뷰가 이 뷰의 상태를 관리 하기 때문에 프로필 요약은 프로필에 대한 바인딩 대신 값을 사용합니다.
4단계
새 요약 보기를 표시하도록 프로필 호스트 업데이트 합니다.
5단계
하이킹에 대한 설명 텍스트와 함께 경로 및 모양 그리기 에서 구성하는 Hikes 폴더에 이름이 지정된 새 보기를 만듭니다 .HikeBadgeBadge
배지는 그래픽일 뿐이므로 수식어 와 함께 있는 텍스트는 다른 사용자에게 배지의 의미를 더 명확하게 합니다.HikeBadgeaccessibilityLabel(_:)
메모
배지의 그리기 논리는 배지가 렌더링되는 프레임의 크기에 따라 달라지는 결과를 생성합니다. 원하는 모양을 보장하려면 300 x 300 포인트 프레임으로 렌더링합니다. 최종 그래픽에 대해 원하는 크기를 얻으려면 렌더링된 결과의 크기를 조정하고 비교적 작은 프레임에 배치합니다.
6단계
다양한 색조와 배지 획득 이유가 있는 여러 배지를 추가하려면 프로필 요약 업데이트 하세요.
7단계
뷰 및 전환 애니메이션의 HikeView 포함하여 프로필 요약을 마무리합니다 .
하이킹 데이터를 사용하려면 모델 데이터 환경 개체도 추가해야 합니다.
8단계
CategoryHome.swift 에서 도구 모음 수정자를 사용하여 탐색 모음에 사용자 프로필 버튼을 추가하고 사용자가 탭할 때 프로필 호스트 보기를 표시합니다.
9단계
콘텐츠에 더 잘 맞는 목록 스타일을 선택 하려면 목록 스타일 수정자를 추가하세요.
10단계
실시간 미리보기로 전환하고 프로필 버튼을 눌러 프로필 요약을 살펴보세요.
섹션 2
편집 모드 추가
사용자는 프로필 세부 정보 보기 또는 편집 간에 전환해야 합니다. 기존 프로필 호스트에 편집 버튼을 추가한 다음 개별 값을 편집하기 위한 컨트롤이 있는 보기를 만들어 편집 모드를 추가 합니다.
1 단계
모델 데이터를 환경 개체로 프로필 호스트를 선택 하여 미리보기에 추가합니다.
이 보기는 @EnvironmentObject 속성이 있는 속성 을 사용하지 않지만 이 보기의 자식은 ProfileSummary 사용합니다. 따라서 수정자가 없으면 미리보기가 실패합니다.
2 단계
환경의 \.editMode에서 벗어나는 환경 보기 속성을 추가합니다.
SwiftUI는 @Environment 속성 래퍼 를 사용하여 액세스할 수 있는 값에 대한 환경의 저장소를 제공합니다 . 편집 모드 범위를 읽거나 쓰기 위해 값에 액세스합니다 .
3단계
환경의 editMode 값을 켜고 끄는 편집 버튼을 만듭니다 .
EditButton은 이전 단계에서 액세스한 것과 동일한 editMode 환경 값을 제어 합니다 .
4단계
사용자가 프로필 보기를 닫은 후에도 지속되는 사용자 프로필의 인스턴스를 포함하도록 ModelData 클래스를 업데이트합니다.
5단계
환경에서 사용자의 프로필 데이터를 읽어 데이터 제어권을 프로필 호스트로 넘깁니다.
사용자가 이름을 입력하는 동안과 같이 편집 내용을 확인하기 전에 전역 앱 상태를 업데이트하지 않도록 편집 보기는 자체 복사본에서 작동합니다.
6단계
정적 프로필 또는 편집 모드용 보기를 표시하는 조건부 보기를 추가합니다.
라이브 미리보기를 실행하고 편집 버튼을 누르면 편집 모드로 진입한 효과를 확인할 수 있습니다. 현재 편집 모드 보기는 정적 텍스트 필드입니다.
섹션 3
프로필 편집기 정의
사용자 프로필 편집기는 주로 프로필의 개별 세부 정보를 변경하는 다양한 컨트롤로 구성됩니다. 배지와 같은 프로필의 일부 항목은 사용자가 편집할 수 없으므로 편집기에 표시되지 않습니다.
프로필 요약과의 일관성을 위해 편집기에서 프로필 세부 정보를 동일한 순서로 추가합니다.
1 단계
ProfileEditor라는 새 뷰를 만들고 사용자 프로필의 초안 사본에 대한 바인딩을 포함합니다.
뷰의 첫 번째 컨트롤은 문자열 바인딩(이 경우 사용자가 선택한 표시 이름)을 제어하고 업데이트하는 TextField 입니다. 텍스트 필드를 생성할 때 레이블과 문자열에 대한 바인딩을 제공합니다.
2 단계
프로필 편집기를 포함하고 프로필 바인딩을 전달하도록 프로필 호스트 조건부 콘텐츠를 업데이트합니다 .
이제 편집을 탭하면 편집 프로필 보기가 표시됩니다.
3단계
랜드마크 관련 이벤트에 대한 알림 수신에 대한 사용자의 기본 설정에 해당하는 토글을 추가합니다.
토글은 켜거나 끌 수 있는 컨트롤이므로 예 또는 아니오 기본 설정과 같은 부울 값에 적합합니다.
4단계
랜드마크 사진에 선택할 수 있는 선호하는 계절을 갖도록 컨트롤 Picker과 레이블을 VStack에 배치합니다.
5단계
마지막으로 시즌 선택기 아래에 DatePicker를 추가하여 랜드마크 방문 목표 날짜를 수정할 수 있도록 합니다.
섹션 4
편집 전파 지연
사용자가 편집 모드를 종료할 때까지 편집 내용이 적용되지 않도록 하려면 편집하는 동안 프로필의 초안 사본을 사용한 다음 사용자가 편집을 확인한 경우에만 초안 사본을 실제 사본에 할당합니다.
1 단계
ProfileHost 에 취소 버튼을 추가합니다 .
EditButton이 제공 하는 Done버튼과 달리 Cancel버튼은 클로저의 실제 프로필 데이터에 편집 내용을 적용하지 않습니다.
2 단계
onAppear(perform:) 및 onDisappear(perform:) 수정자를 적용하여 편집기를 올바른 프로필 데이터로 채우고 사용자가 완료 버튼을 탭할 때 영구 프로필을 업데이트합니다.
그렇지 않으면 다음에 편집 모드가 활성화될 때 이전 값이 나타납니다.
https://developer.apple.com/tutorials/swiftui/working-with-ui-controls