【初心者】Swift UIを勉強する その⑪ ーーー Lazy Grid Layout（= StackView+CollectionView）

# はじめに

前回はCardに関するアニメーションを完璧にし、今回はCardを縦並びのみならず、もっと自由に位置を決めるようにします。

完成品↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/bd73a42f-e3dd-18a7-cd8b-c66871dfc265.gif" width=40%>　　



# 目次
<!-- タイトルとアンカー名を編集 -->
1. [LazyVGrid](#LazyVGrid)
2. [LazyHGrid](#LazyHGrid)
3. [まとめ](#まとめ)
4. [参考文献](#reference)

<!-- 各チャプター -->
<a id="#LazyVGrid"></a>
# LazyVGrid
・Lazy Grid LayoutはWWDC2020に公開されました。CollectionViewでは一日かかる作業は、Lazy Grid Layoutでは昼ごはんくらいの時間でできてしまいます。
html+css+jsからVue+Vuetify+Tailwindに切り替えたように、かなり作業効率がアップ

<br><br>
・例えば`columns[]`配列に`GridItem()`を3つつめば、Cardが3列に並びます。

```swift:CoursesView.swift

LazyVGrid(columns: [GridItem(), GridItem(), GridItem()], spacing: 16) {
    ForEach(courses) { item in
         CourseItem(course: item)
             .matchedGeometryEffect(
                   id: item.id, in: namespace, isSource: !show
             )
             .frame(height: 250)
             .onTapGesture {
                  withAnimation(.spring()) {
                       show.toggle()
                       selectedItem = item
                       isDisabled = true
                   }
              }
              .disabled(isDisabled)
     }
}
.padding(16)
.frame(maxWidth: .infinity)

```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/aaf02b1e-b4e8-813e-d283-1c217ef8b743.gif" width=40%>　　


・GridItem()を一個一個つめるのはスマートじゃないので、
　`GridItem(.adaptive(minimum: )`で最少幅を決めることもできます。
　また、iPadのような画面が大きい端末の場合は、数字ではなく
　`UIScreen.main.bounds.width`を使えば全ての端末は統一できます。
　もう１つのやり方としては`Array()`を使って、`count`の数を決めれば列が決められます。

```swift:CoursesView.swift
LazyVGrid(
   columns: [
       GridItem(
           .adaptive(minimum: 160), 
           spacing: 16
       )
    ], 
spacing: 16
)
---------------------------------------------------
LazyVGrid(
    columns: [
        GridItem(
           .adaptive(minimum: UIScreen.main.bounds.width / 3),
           spacing: 16
        )
     ], 
spacing: 16
)
----------------------------------------------------
LazyVGrid(
    columns: Array(
                repeating: .init(.flexible(), spacing: 16), count: 2
              ),
    spacing: 16
    ), 
spacing: 16
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/584ec1ab-7137-ebd4-031d-687661e2696e.png" width=60%>　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/7affa236-8fe3-b4fc-0ef3-fdc3f0e9f87c.png" width=35%>　





<br>

<a id="#LazyHGrid"></a>
# LazyHGrid
・verticalと同じくhorizontalも簡単にできます。やり方もverticalと全く同じです。

```swift:CoursesView.swift
ScrollView(.horizontal) {
   LazyHGrid(
      rows: [
          GridItem(
              .adaptive(minimum: 160), 
              spacing: 16
          )
       ], 
   spacing: 16
   )
}
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065841/dc357149-226a-4e47-6eae-6b6001afae23.gif" width=35%>　



<a id="#まとめ"></a>
# まとめ
・LazyGridはおそらくフロントのGrid systemを参考にしていると思われます。
　興味がある方は→https://vuetifyjs.com/ja/components/grids/

**ソースコード[Github](https://github.com/wsimple1028/swiftUI_ios14)**

<a id="#reference"></a>
# 参考文献
- https://www.anchorblogs.com/details/4
- [Design Code --- SwiftUI for iOS 14](https://designcode.io/swiftui-ios14)