랜드마크의 카테고리 뷰는 가로 스크롤 리스트와 세로 스크롤 리스트를 표시한다. 이 뷰를 만들고 기존 뷰에 연결해서 다양한 기기 크기와 방향에서 어떻게 대응되는지 살펴보자.

Section 1. Add a Category View

랜드마크를 카데고리별로 정렬하는 뷰를 생성하고 뷰 상단에 주요 랜드마크를 강조 표시해서 랜드마크를 탐색하는 다른 방법을 제공해보자.

Section 2. Create a Category List

카테고리 뷰는 쉽게 찾아볼 수 있도록 세로 스크롤 행에 모든 카테고리 리스트를 표시한다. 이 작업을 수행하기 위해 VStack과 HStack을 결합하고 리스트에 스크롤을 추가해보자.

CategoryHome.swift

struct CategoryHome: View {
    @EnvironmentObject var modelData: ModelData
    
    var body: some View {
        NavigationView {
            List {
                ForEach(modelData.categories.keys.sorted(), id: \\.self) { key in
                    Text(key)
                }
            }
            .navigationTitle("Featured")
        }
    }
}

struct CategoryHome_Previews: PreviewProvider {
    static var previews: some View {
        CategoryHome()
            .environmentObject(ModelData())
    }
}

Section 3. Create a Category Row

가로 스크롤 행에 각 카테고리를 나타내보자.

Section 4. Complete the Category View

카테고리 홈페이지에 행과 추천 이미지를 추가해보자.

Section 5. Add Navigation Between Sections

각 섹션에 도달할 수 있도록 navigation and presentation API를 사용해서 카테고리 홈, 상세 뷰, 즐겨찾기 리스트를 탭뷰에서 탐색할 수 있도록 해보자.

TabView

struct TabView<SelectionValue, Content> where SelectionValue : Hashable, Content : View