こんにちは！！一年も！期間を空けての！動画投稿になりました！！
ブランクが空きすぎて、挨拶は忘れ、編集は遅くなり大変でした。
今後は投稿頻度を元に戻すべく頑張りたいと思います。。
今回はSwiftUIを使用してLazyVGrid, LazyHGridの簡単なアプリを作成しました。
目次
1. 動画解説
GridItem
まず、GridItemです。
これはLazyVgrid, LazyHGridどちらにも使用します。
使い方は以下のようになっています。
GridItem(
_ size: GridItem.Size = .flexible(),
spacing: CGFloat? = nil,
alignment: Alignment? = nil
)
https://developer.apple.com/documentation/swiftui/griditem/init(_:spacing:alignment:)
設定できるSizeはenumになっていて、全部で３通りあります。
.adaptive(minimum: CGFloat, maximum: CGFloat)
.fixed(CGFloat)
.flexible(minimum: CGFloat, maximum: CGFloat)
https://developer.apple.com/documentation/swiftui/griditem/size-swift.enum
上から、
- 幅に応じて複数のItemを生成
- 指定したサイズで一つのItemを生成
- 幅に応じた一つのItemを生成
となっています。
spacingはGridItem同士の間隔
alignmentはレイアウトの種類（その他Viewのalignmentと同様）になります。
おまけとして、動画では扱いませんでしたが、以下のコードはどちらも同じGridItemの配列を生成します。
Array(repeating: .init(.fixed(minimum: 50)), count: 3)
[GridItem(.fixed(50)), GridItem(.fixed(50)), GridItem(.fixed(50))]
（最小50のGridItemを3つ生成 ）
LazyVGrid
LazyVGridはその名の通り、ItemがVertical(垂直)に伸びていきます。
設定する内容は
LazyVGrid(
columns: [GridItem],
alignment: HorizontalAlignment,
spacing: CGFloat?,
pinnedViews: PinnedScrollableViews,
content: () -> Content
)
https://developer.apple.com/documentation/swiftui/lazyvgrid
今回使用した部分だけ切り抜くと
LazyVGrid(
columns: [GridItem],
alignment: HorizontalAlignment,
spacing: CGFloat?
)
となります。
columnsにはGridItemの配列を、これは直接書いてもいいですし、動画のように変数に入れても大丈夫です。
そしてspacingはGridItemの縦の間隔を設定します。
（GridItemのspacingはGridItemの横の間隔）
使用方法はListと同じで、中に表示したいViewを入れます（今回はImageとText）
配列や指定数分回すのはForEachで簡単に実装できます。
一番重要なこととして、LazyVGridは単品でScrollしません
固定表示ではなく、CollectionViewやListのようにスクロールさせたい場合はScrollViewの中に配置してください。
LazyHGrid
LazyHGridも同じように、ItemがHorizontal(平行)に伸びていきます。
設定する内容は
LazyHGrid(
columns: [GridItem],
alignment: HorizontalAlignment,
spacing: CGFloat?,
pinnedViews: PinnedScrollableViews,
content: () -> Content
)
https://developer.apple.com/documentation/swiftui/lazyhgrid
今回使用した部分だけ切り抜くと
LazyHGrid(
columns: [GridItem],
alignment: HorizontalAlignment,
spacing: CGFloat?
)
となります。
columnsにはGridItemの配列を入れて、spacingはGridItemの横の間隔を設定します。
（GridItemのspacingはGridItemの縦の間隔）
もちろん、LazyHGridも単品でScrollしません
大事なことなのでもう一度言います。
LazyHGridだけではびくともしません。
スクロールさせたい場合は必ずScrollViewの中に配置してください。
2. 今回のまとめ
UICollectionViewにあたるのはLazyHGridとLazyVGridの2種類
UICollectionViewの代わりに、HorizontalとVerticalで挙動を調整できるGridが用意されました。
動作で言えばLazyVGridがUICollectionViewとほぼ同じです。
今まで実装に苦労していた、横スクロールViewや、さまざまな形のセルを組み合わせたデザインがより柔軟に組めるようになると思います。
GridItemで設定できるもの
UICollectionViewの場合、統一されえたcellとして一挙に設定していたものをSwiftUIでは個々のGridItemとして設定します。
LazyHGridに使用するGridItemではGridの高さと上下のスペースを
LazyVGridに使用するGridItemではGridの幅と左右のスペースを設定することができます。
3. あとがき
CollectionViewやりますと言ってから一年…本当に全てが久しぶりすぎて…
ゆっくりSwiftを触れたのも久しぶりだったのですごく楽しかったです（ただの感想）
最初LazyGridを知った時は、ややこしくなったなぁなんて思っていたのですが、実際使ってみると痒いところに手が届くのなんの。
もちろん、今後使っていくうちに不便なことも出てくるとは思いますが、最近流行りの複雑なGridがSwiftで実装できると思うとワクワクしました。
NoCodeが進出してきている今、やっぱりネイティブの良さを推していきたいです！
この一年の間、実はクロスプラットフォームやNoCodeにも触れてきたのでそちらもいつか動画で扱えたら、なんて考えています。
とりあえずは肩慣らしも兼ねて、SwiftUI網羅を目指していきますので、次回もみてみてください！
4. 参考にしたサイト
SwiftUI Lazy Grid Tutorial
How to position views in a grid using LazyVGrid and LazyHGrid
SwiftUI configure LazyVGrid with no spacing
