반응형
Hacking with Swift 사이트의 강좌 번역본입니다.
[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-position-views-in-a-grid]
How to position views in a grid
SwiftUI는 수직 레이아웃 전용으로 VSStack과 수평 레이아웃 전용으로 HStack을 제공하지만, 두가지 모두 수행하는 것은 없습니다 - 그리드 구조에서 뷰를 배치할 수 있는 것은 없습니다.
다행히 SwiftUI의 뷰 빌더(builder) 시스템을 활용해서 직접 작성할 수 있습니다. 이는 행(row)과 열(count) 갯수를 사용해서 작성해야 하는 타입을 만드는 것을 의미하고, 그리드에서 주어진 셀에 대한 뷰를 찾아 실행하기 위해 클로져를 작성합니다. body의 내부에 모든 행과 열에 대해 반복해서 VStack과 HStack 내부에 셀을 만들어서 그리드를 만들수 있으며, 뷰 클로져를 호출때마다 셀 안에 무엇이 있는지를 묻습니다.
코드는 다음과 같습니다.
struct GridStack<Content: View>: View {
let rows: Int
let columns: Int
let content: (Int, Int) -> Content
var body: some View {
VStack {
ForEach(0 ..< rows) { row in
HStack {
ForEach(0 ..< self.columns) { column in
self.content(row, column)
}
}
}
}
}
init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
self.rows = rows
self.columns = columns
self.content = content
}
}
SwiftUI 뷰에서 사용하고자 할때, 다음과 같이 작성합니다.
GridStack(rows: 4, columns: 4) { row, col in
Image(systemName: "\(row * 4 + col).circle")
Text("R\(row) C\(col)")
}
각 셀안에 이미지와 텍스트가 있는 4x4 그리드를 만듭니다.
반응형
'SwiftUI > View layout' 카테고리의 다른 글
How to create 3D effects like Cover Flow using ScrollView and GeometryReader (0) | 2019.11.18 |
---|---|
How to add horizontal and vertical scrolling using ScrollView (0) | 2019.11.18 |
How to place content outside the safe area (0) | 2019.11.18 |
How to provide relative sizes using GeometryReader (0) | 2019.11.15 |
How to give a view a custom frame (0) | 2019.11.15 |
How to create different layouts using size classes (0) | 2019.11.15 |
How to create views in a loop using ForEach (0) | 2019.11.15 |
How to return different view types (0) | 2019.11.14 |