앱 디자인 및 레이아웃 - 복잡한 인터페이스 구
랜드마크의 카테고리 보기는 수평으로 스크롤되는 랜드마크의 수직 스크롤 목록을 보여줍니다. 이 보기를 빌드하고 기존 보기에 연결할 때 구성된 보기가 다양한 장치 크기 및 방향에 적응할 수 있는 방법을 탐색합니다.
예상 시간 : 20분
Xcode version : 13.1 이상
섹션 1
카테고리 뷰 추가
범주별로 랜드마크를 정렬하는 보기를 만들고 보기 상단에서 주요 랜드마크를 강조 표시하여 랜드마크를 탐색하는 다른 방법을 제공할 수 있습니다.
1 단계
프로젝트의 보기 그룹에 범주 그룹을 만들고 새 그룹을 호출하는 사용자 지정 보기를 만듭니다.CategoryHome
2 단계
다른 카테고리를 호스팅하려면 추가하세요 .NavigationView
인스턴스 및 관련 수정자 와 함께 탐색 보기를 사용 하여 앱에서 계층적 탐색 구조를 빌드합니다.NavigationLink
3단계
탐색 모음의 제목을 추천으로 설정합니다.
보기는 상단에 하나 이상의 주요 랜드마크를 보여줍니다.
섹션 2
카테고리 목록 만들기
범주 보기는 더 쉽게 탐색할 수 있도록 수직 열에 정렬된 별도의 행에 모든 범주를 표시합니다. 수직 및 수평 스택을 결합하고 목록에 스크롤을 추가하여 이를 수행합니다.
파일 에서 범주 데이터를 읽는 것으로 시작 합니다.landmarkData.json
1 단계
Landmark.swift 에서 랜드마크 구조에 카테고리 열거형 및 카테고리 속성을 추가합니다 .
파일에는 세 가지 문자열 값 중 하나가 포함된 각 랜드마크에 대한 값이 이미 포함되어 있습니다. 데이터 파일의 이름을 일치시키면 구조의 적합성 에 의존 하여 데이터를 로드할 수 있습니다.landmarkData.jsoncategoryCodable
2 단계
ModelData.swift 에서 범주 이름을 키로 사용 하여 계산된 카테고리 사전을 추가하고 각 키에 연결된 랜드마크 배열을 추가합니다.
3단계
CategoryHome.swift 에서 modelData 환경 개체를 만듭니다 .
지금은 카테고리에 액세스해야 하며 나중에는 다른 랜드마크 데이터에도 액세스해야 합니다.
4단계
List 를 사용하여 Landmarks의 범주를 표시합니다.
사례 이름은 목록 의 각 항목을 식별하며, 이는 열거형이므로 다른 범주 간에 고유해야 합니다.Landmark.Category
섹션 3
범주 행 만들기
랜드마크는 가로로 스크롤되는 행에 각 카테고리를 표시합니다. 행을 나타내는 새 보기 유형을 추가한 다음 새 보기에서 해당 범주에 대한 모든 랜드마크를 표시합니다.
보기 새성 및 결합 Landmark 에서 생성한 보기의 일부를 재사용 하여 랜드마크의 친숙한 미리보기를 생성합니다.
1 단계
행의 내용을 유지하기 위한 새 사용자 정의 보기 를 정의하십시오.CategoryRow
2 단계
범주 이름 및 해당 범주의 항목 목록에 대한 속성을 추가합니다.
3단계
카테고리 이름을 표시합니다.
4단계
범주의 항목을 에 HStack넣고 범주 이름과 함께 해당 항목을 VStack.
5단계
tall 을 지정하고 패딩을 추가 하고 스크롤 보기에서 래핑하여 콘텐츠에 공간을 제공합니다.frame(width:height:)HStack
더 큰 데이터 샘플링으로 보기 미리보기를 업데이트하면 스크롤 동작이 올바른지 더 쉽게 확인할 수 있습니다.
6단계
하나의 랜드마크를 표시하는 이라는 새 사용자 지정 보기를 만듭니다 .CategoryItem
7단계
CategoryRow.swift 에서 랜드마크 이름을 담고 있는 Text 을 새 CategoryItem 뷰로 바꿉니다.
섹션 4
카테고리 뷰 완료
카테고리 홈 페이지에 행과 추천 이미지를 추가합니다.
1 단계
행 유형의 인스턴스에 범주 정보를 전달 하려면 의 본문을 업데이트하십시오 .CategoryHome
다음으로, 보기의 맨 위에 추천 랜드마크를 추가합니다. 이렇게 하려면 랜드마크 데이터에서 더 많은 정보가 필요합니다.
2 단계
Landmark.swift 에서 새로운 isFeatured 속성을 추가합니다.
추가한 다른 랜드마크 속성과 마찬가지로 이 부울 값은 이미 데이터에 존재합니다. 새 속성을 선언하기만 하면 됩니다.
3단계
ModelData.swift에서 Featured 로 설정된 랜드마크만 포함 하는 새 계산 배열을 추가합니다 .
4단계
CategoryHome.swift 에서 첫 번째 주요 랜드마크의 이미지를 목록 맨 위에 추가합니다.
이후 자습서에서 이 보기를 대화형 회전 목마로 전환합니다. 지금은 크기가 조정되고 잘린 미리 보기 이미지가 있는 주요 랜드마크 중 하나를 표시합니다.
5단계
콘텐츠가 디스플레이의 가장자리까지 확장될 수 있도록 두 종류의 랜드마크 미리 보기에서 가장자리 삽입을 0으로 설정합니다.
섹션 5
섹션 간 탐색 추가
보기에 다르게 분류된 모든 랜드마크가 표시되므로 사용자는 앱의 각 섹션에 도달할 수 있는 방법이 필요합니다. 탐색 및 프레젠테이션 API를 사용하여 탭 보기에서 카테고리 홈, 상세 보기 및 즐겨찾기 목록을 탐색할 수 있도록 합니다.
1 단계
CategoryRow.swift 에서 기존CategoryItem을 NavigationLink로 래핑합니다.
카테고리 항목 자체는 버튼의 레이블이고 대상은 카드가 나타내는 랜드마크에 대한 랜드마크 세부 정보 보기입니다.
CategoryRow 에서 다음 단계의 효과를 볼 수 있도록 미리보기를 고정합니다 .
2 단계
renderingMode(_:) 및 foregroundColor(_:) 수정자를 적용하여 범주 항목의 탐색 모양을 변경합니다 .
탐색 링크의 레이블로 전달한 텍스트는 환경의 강조 색상을 사용하여 렌더링되고 이미지는 템플릿 이미지로 렌더링될 수 있습니다. 설계에 가장 적합하도록 두 동작을 수정할 수 있습니다.
다음으로 사용자가 방금 만든 카테고리 보기와 기존 랜드마크 목록 중에서 선택할 수 있는 탭 보기를 표시하도록 앱의 기본 콘텐츠 보기를 수정합니다.
3단계
미리 보기를 고정 해제하고 로 전환한 다음 표시할 탭의 열거를 추가합니다.ContentView
4단계
탭 선택에 대한 상태 변수를 추가하고 기본값을 지정합니다.
5단계
LandmarkList 와 새로운 CategoryHome을 래핑하는 탭 보기를 만듭니다.
각 보기의 tag(_:) 수정자는 속성이 취할 수 있는 가능한 값 중 하나와 일치 하므로 TabView는 사용자가 사용자 인터페이스에서 선택할 때 표시할 보기를 조정할 수 있습니다.
6단계
각 탭에 레이블을 지정합니다.
7단계
실시간 미리보기를 시작하고 새로운 탐색 기능을 사용해 보세요.
https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces