👷 ⚗️ 👩🏿‍⚕️ SwiftUIでグリッドをマスターする 🚣🏼 👵🏼 👨🏽‍🚒

花火、habr。記事に移る前に、iOS開発の基本コースと上級コースの開始前夜に教師が行った2つの非常に役立つレッスンの記録を完全に無料で共有したいと思います。

iOS開発のクイックスタート

マルチスレッドのKotlinマルチプラットフォームアプリケーションの作成

それでは、記事に移りましょう。

今週は、SwiftUIで最も期待されている新機能の1つであるグリッドについてお話ししたいと思います。誰もがUICollectionViewSwiftUIの代替案を熱心に待っていましたが、ついに今年登場しました。SwiftUIはを提供してくれますLazyVGridとLazyHGridビュー我々はアイテムのグリッドでレイアウトを作成するために使用することができます。

基礎

LazyVGridとLazyHGridは、SwiftUIがアイテムのグリッドに基づいてスーパーカスタムレイアウトを作成するために提供する2つの新しいビュータイプです。それらの唯一の違いは、充填軸です。LazyVGridは、使用可能なスペースを垂直方向に埋めます。LazyHGridは、子を水平に配置します。軸は、これら2つのビューの唯一の違いです。したがって、あなたが学ぶすべてLazyVGridはに適用されLazyHGridおよびその逆。最初の例を見てみましょう。

struct ContentView: View {
    private var columns: [GridItem] = [
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16),
        GridItem(.fixed(100), spacing: 16)
    ]

    var body: some View {
        ScrollView {
            LazyVGrid(
                columns: columns,
                alignment: .center,
                spacing: 16,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section(header: Text("Section 1").font(.title)) {
                    ForEach(0...10, id: \.self) { index in
                        Color.random
                    }
                }

                Section(header: Text("Section 2").font(.title)) {
                    ForEach(11...20, id: \.self) { index in
                        Color.random
                    }
                }
            }
        }
    }
}

上記の例では、各列が100ptの固定サイズである3列のグリッドを作成しています。この例を使用して、使用可能なすべての構成オプションについて説明します。

パラメータcolumnsは、グリッドレイアウトの列を定義する配列です。列を説明するために、SwiftUIはGridItemタイプを提供します。それについては少し後で話します。
パラメータは、alignment私たちが列挙を使用して、グリッドの内容を整列させることができますHorizontalAlignmentためLazyVGridとVerticalAlignmentするためにLazyHGrid。と同じように機能しstack alignmentます。
このパラメーターspacingは、LazyVGrid内の各行間の距離、またはLazyHGrid内の各列間のスペースを指定します。
このパラメーターをpinnedViews使用すると、セクションのヘッダーとフッターを固定するためのオプションを指定できます。デフォルトでは空です。つまり、ヘッダーとフッターはコンテンツのように動作し、スクロールすると消えます。ヘッダーとフッターの固定を有効にできます。その場合、それらはコンテンツと重複し、永続的に表示されます。

GridItem

グリッドの各列は、構造で定義する必要がありますGridItem。このタイプをGridItem使用すると、各列のサイズ、配置、および間隔を指定できます。小さな例を見てみましょう。

private var columns: [GridItem] = [
    GridItem(.fixed(50), spacing: 16, alignment: .leading),
    GridItem(.fixed(75)),
    GridItem(.fixed(100))
]

ご覧のとおり、各列には異なるサイズ、間隔、配置オプションを設定できます。ここで最も興味深いのはサイズです。グリッド内の列のサイズを決定する方法は3つあります。固定、柔軟性、または適応性があります。

固定列は最も明白なものです。グリッドは、指定したサイズに従って列を配置します。前の例では、列がそれぞれ50pt、75pt、および100ptに固定されている3列のレイアウトを作成しました。柔軟な

オプション使用可能なスペースに応じて拡大または縮小する列を定義できます。最小および最大の柔軟な列サイズも提供できます。デフォルトでは、最小値の10ptを使用し、最大値には上限がありません。

private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 250)),
    GridItem(.flexible())
]

ここでは、使用可能なスペースを2つの柔軟な列に分割するレイアウトを作成しています。最初の列は最小サイズの250ptを占め、2番目の列には残りの使用可能なスペースがすべてあります。

最も興味深いオプションは適応です。レスポンシブオプションを使用すると、1つの柔軟な列のスペースに複数の要素を配置できます。例を挙げて理解してみましょう。

private var columns: [GridItem] = [
    GridItem(.adaptive(minimum: 50, maximum: 100)),
    GridItem(.adaptive(minimum: 150))
]

ご覧のとおり、2つの応答列があります。最初の列には、最小サイズが50pt、最大サイズが100ptの要素がいくつか含まれています。レスポンシブ列は、列内のアイテムの数を使用可能なスペースに基づく必要がある場合に役立ちます。

グリッドの真の力は、列タイプの混合を開始するときです。2列のレイアウトを作成できます。最初のレイアウトは固定され、2番目のレイアウトは応答性があります。それがどのように見えるか見てみましょう。

private var columns: [GridItem] = [
    GridItem(.fixed(100)),
    GridItem(.adaptive(minimum: 50))
]

結論

グリッドを使用すると、さまざまなタイプを組み合わせて、非常に複雑で興味深いレイアウトを作成できますGridItem。メッシュへのすべての変更をアニメーション化できることに注意してください。この記事を楽しんでいただけたでしょうか。Twitterで私をフォローして、このトピックに関連する質問をしてください。ご清聴ありがとうございました、またね！

以下のリンクを使用して、コースの詳細を確認できます。

SwiftUIでグリッドをマスターする

基礎

GridItem

結論

More articles: