【SwiftUI】LazyVGridについて

1.LazyVGrid, LazyHGridについて

今回は、SwiftUIのLazyVGridについて取り上げます。
 iOS14からLazyVGridとLazyHGridが利用できるようになりました。UICollectionViewを使って表現していたグリッドデザインをSwiftUIではLazyVGrid,LazyHGridを利用して表現します。以下の表示例をみていきましょう。

---

2.表示例：４列の固定幅のViewを持つLazyVGridの表示

1) スクリーンショット

2) コード

	struct ContentView: View {
	private var colors: [Color] = [.blue, .yellow, .green]
	var gridItems = Array(repeating: GridItem(.fixed(60.0),spacing: 0.0), count: 4)
	var body: some View {
	ScrollView() {
	LazyVGrid(columns: gridItems, alignment:.center ,spacing: 0) {
	ForEach((0...100), id: \.self) { index in
	CellContent(index: index,
	color: colors[index % colors.count])
	}
	}
	}
	}
	}
	struct CellContent: View {
	var index: Int
	var color: Color
	var body: some View {
	Text("\(index)")
	.frame(width:60, height:50)
	.background(color)
	.cornerRadius(8)
	.font(.system(.largeTitle))
	}
	}

view raw LazyVGrid-4列固定幅表示 hosted with ❤ by GitHub

---

3.上記コードについて

1) LazyVGridのインスタンスについて

LazyVGrid(colomns: [GridItem], 
		 alignment: VerticalAlignment, 
		 spacing: CGFloat?, 
	 	 pinnedViews: PinnedScrollableViews, 
		 content: () -> _)

※LazyHGridの場合は、colomnsのラベル名がrowsに変わります

引数の各要素は以下のようになってます

・rows：

　→ GridItem の配列を指定。

・alignment：

　→ 行の配置を .center .top .bottom のいずれかを指定

・spacing：

　→ 行と行の間隔を指定

　→ ・LazyVGridの場合、行間のスペースを変更します。

・pinnedViews：

　→ ヘッダーとフッターを固定するかどうかを指定する。ヘッダーの場合は .sectionHeaders を、フッターの場合は .sectionFooters を指定します。

cf）Apple Documentaion: LazyGridView.init

2) 要素のGridItemについて

GridItemは要素のサイズ、要素数を定義します

GridItem(GridItem.Size, spacing: CGFloat?, alignment: Alignment?)

・GridItem.Sizeについて

→ 以下の種類があるようです。

　fixed：固定サイズを指定

　flexible：可変サイズ（最小・最大指定）をして

　adaptive：可変サイズで、親View内ギリギリまで詰める

・spacing

　→ 次のアイテムまでの距離を指定

・alignment

→ 各ビューを配置するときに使用する配置

cf）Apple Documentaion: GridItem

---

3.2のコードで配置を変更してみる

・右寄せにしてみる

2のコードで、以下の alignmentを「.leading」に変更します。

LazyVGrid(columns: gridItems, alignment:.leading ,spacing: 0) {

変更結果

・列の間のスペースをあける

2のコードで、以下の「 spacing: 20.0」に変更します。

var gridItems = Array(repeating: GridItem(.fixed(60.0),spacing: 20.0), count: 4)

変更結果