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))
)
}
}
'IT > Swift' 카테고리의 다른 글
SwiftUI 튜토리얼 6-1 복합 인터페이스 구성하기 (0) | 2019.11.24 |
---|---|
SwiftUI 튜토리얼 5-2 뷰 애니메이션과 트랜지션 (0) | 2019.11.17 |
SwiftUI 튜토리얼 5-1 뷰 애니메이션과 트랜지션 (0) | 2019.11.06 |
SwiftUI Tutorials 4 Drawing Paths and Shapes (0) | 2019.11.02 |
SwiftUI 튜토리얼 3 사용자 입력 다루기 (0) | 2019.10.26 |