WWDC22で発表されたSwiftUIのGridとVStack・HStackの違い #iOS

WWDC22でSwiftUIにまつわる様々な発表がありました。
NavigationStackやChartsなどが話題ですが、ここではGridについて解説します。
一見、元々あるVStack・HStackとの違いが分かりづらい (Gridを使わなくてもVstack・HStackで完結するように思える) のですが、具体例を交えて紹介していきます。

実装するデザイン

今回実装するデザインは以下のようなTextが並んだものです。

Designed inとAssembled inが右揃えで並んでおり (CaliforniaとChinaも同様)、Designed inとCaliforniaが下揃えで並んでいます。
また、CaliforniaとChinaは変数であり、横幅は可変とします。

VStack・HStackとGridを使った実装例

VStack・HStackを使った実装としては2種類の方法が考えられます。
HStackの中にVStackをレイアウトする方法と、Vstackの中にHStackをレイアウトする方法です。
それぞれの実装したものは次のようになります。

spacingなどを全く設定していないのでVStack・HStackを使った実装はかなりデザインとは異なるものとなってしまっています。

コードは以下のようになります。

① HStackの中にVStackを入れた場合

HStack(alignment: .bottom) {
    VStack(alignment: .trailing) {
        Text("Designed in")
        Text("Assembled in")
    }
    VStack(alignment: .trailing) {
        Text("California")
            .font(.title)
        Text("China")
            .font(.title)
    }
}

② VStackの中にHStackを入れた場合

VStack(alignment: .trailing) {
    HStack(alignment: .bottom) {
        Text("Designed in")
        Text("California")
            .font(.title)
    }
    HStack(alignment: .bottom) {
        Text("Assembled in")
        Text("China")
            .font(.title)
    }
}

③ Gridを使った場合

Grid(alignment: .trailing) {
    GridRow(alignment: .bottom) {
        Text("Designed in")
        Text("California")
            .font(.title)
    }
    GridRow(alignment: .bottom) {
        Text("Assembled in")
        Text("China")
            .font(.title)
    }
}

View Hierarchyを見ると違いが分かりやすいです。

VStack・HStackを使ったものはそれぞれのStack内ではalignmentが効いているのですが、上位のStackとalignmentを効かせることができません。

ただ、VStack・HStackのそれぞれにspacingを入れることで近づけることは可能です。
以下は、①の1つ目のVStackにspacing: 15を設定し、②の２つ目のHStackにspacing: 50を設定した例です。

①も②もかなりデザインに沿った実装になりました。
ただ、この場合はspacingの値をハードコードしているため、テキストの内容が変数の場合は、それを計算してspacingを設定する必要が発生します。

SwiftUIのGridについて

実装例を通してVStack・HStackとGridの違いを見てきました。
Gridは一言で表すとTableのようなもので (WWDC22でTableというレイアウトも発表されましたね)、Tableのように並んだレイアウトをalighmentなど設定するのが得意なものと思います。

逆に以下のようなデザインはGridでは難しく、VStack・HStackを使って実装することになると思います。

今回の実装では使いませんでしたが、Grid内のspacingの設定も可能です。
例えば以下のように設定できます。

Grid(alignment: .trailing,
     horizontalSpacing: 20,
     verticalSpacing: 10) {
        GridRow(alignment: .bottom) {
        Text("Designed in")
        Text("California")
            .font(.title)
        }
        GridRow(alignment: .bottom) {
        Text("Assembled in")
        Text("China")
            .font(.title)
    }
}

また、複数のCellを結合する.gridCellColumns(_ count:)などを使えば、より柔軟にレイアウトを構築することができます。

より詳しい仕様はこちらにまとまっています。

まとめ

本記事では、VStack・HStackとGridの違いを紹介しました。
今まで表現しづらかったレイアウトも簡単に表現できるようになったと思います。

本記事では紹介しなかった機能も多くあるため、使えるようになったら積極的に活用していきたいと思います。