SwiftUI 튜토리얼 6-2 복합 인터페이스 구성하기

App Design and Layout - Composing Complex Interfaces

 

랜드마크 행 추가하기(Add Rows of Landmarks)

랜드 마크는 각 카테고리를 가로로 스크롤하는 행으로 표시합니다. 행을 나타 내기 위해 새로운 뷰타입을 추가 한 다음 새로운 뷰에서 해당 카테고리의 모든 랜드 마크를 표시합니다.

Landmarks displays each category in a row that scrolls horizontally. Add a new view type to represent the row, then display all the landmarks for that category in the new view.

 

 

 

Step 1

새 파일 CategoryRow.swift를 만들어 행 내용을 보유하기위한 새 사용자 정의 뷰를  정의합니다.
이 뷰에는 표시되는 특정 랜드 마크 카테고리에 대한 정보와 랜드 마크 자체를 저장해야합니다.

Define a new custom view for holding the contents of a row.

This view needs to store information about the specific category of landmark that it’s displaying, along with the landmarks themselves.

import SwiftUI

struct CategoryRow: View {
    var categoryName: String
    var items: [Landmark]
    
    var body: some View {
        Text(self.categoryName)
            .font(.headline)
    }
}

struct CategoryRow_Previews: PreviewProvider {
    static var previews: some View {
        CategoryRow(
            categoryName: landmarkData[0].category.rawValue,
            items: Array(landmarkData.prefix(3))
        )
    }
}

 

 

 

 

 

 

Step 2

Home.swift에서 카테고리 정보를 새로운 row type으로 전달하기위해 CategoryHome body를 수정합니다.

Update the body of CategoryHome to pass category information to the new row type.

import SwiftUI

struct CategoryHome: View {
    var categories: [String: [Landmark]] {
        Dictionary(
            grouping: landmarkData,
            by: { $0.category.rawValue }
        )
    }
    
    var body: some View {
        NavigationView {
            List {
                ForEach(categories.keys.sorted(), id: \.self) { key in
                    CategoryRow(categoryName: key, items: self.categories[key]!)
                }
            }
            .navigationBarTitle(Text("Featured"))
        }
    }
}

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

 

 

 

Step 3

CategoryRow body에 HStack을 추가하여 해당 카테고리의 랜드마크를 표시합니다.

Display this category’s landmarks in an HStack.

import SwiftUI

struct CategoryRow: View {
    var categoryName: String
    var items: [Landmark]
    
    var body: some View {
        HStack(alignment: .top, spacing: 0) {
            ForEach(self.items) { landmark in
                Text(landmark.name)
            }
        }
    }
}

struct CategoryRow_Previews: PreviewProvider {
    static var previews: some View {
        CategoryRow(
            categoryName: landmarkData[0].category.rawValue,
            items: Array(landmarkData.prefix(3))
        )
    }
}

 

 

 

 

 

 

 

Step 4

높이관련 frame(width:height:)을 지정하고 스택을 scroll view로 감싸서 행에 숨을 쉴 공간을줍니다.
더 큰 데이터 샘플링으로 뷰 미리보기를 업데이트하면 스크롤 동작이 올바른지보다 쉽게 확인할 수 있습니다.

Give the rows room to breathe by specifying a tall frame(width:height:) and wrapping the stack in a scroll view.

Updating the view preview with a larger sampling of data makes it easier to ensure that the scrolling behavior is correct.

import SwiftUI

struct CategoryRow: View {
    var categoryName: String
    var items: [Landmark]
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(self.categoryName)
                .font(.headline)
                .padding(.leading, 15)
                .padding(.top, 5)
            
            ScrollView(.horizontal, showsIndicators: false) {
                HStack(alignment: .top, spacing: 0) {
                    ForEach(self.items) { landmark in
                        Text(landmark.name)
                    }
                }
            }
            .frame(height: 185)
        }
    }
}

struct CategoryRow_Previews: PreviewProvider {
    static var previews: some View {
        CategoryRow(
            categoryName: landmarkData[0].category.rawValue,
            items: Array(landmarkData.prefix(4))
        )
    }
}