[SwiftUI] VStack の使い方

SwiftUI2021

     

TAGS:

⌛️ 2 min.
縦方向にレイアウトする時に使う VStack について 詳細に説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey 12.5 Beta
  • Xcode 14.0 beta
  • iOS 16.0 beta

# 動作確認環境は beta 版ですが、この記事では、beta 版で提供されている新規機能は使っていません。

VStack

VStack は、与えられたビューを縦方向に並べる機能を持ったビューです。

VStack のシンプルな使い方

VStack を使うと 例えば 以下のように 赤 青 黄 の四角いビューを縦方向に並べることができます。

VStackSimple

struct ContentView: View {
    var body: some View {
        VStack {
            Color.red.frame(width: 200, height: 200)
            Color.blue.frame(width: 100, height: 200)
            Color.yellow.frame(width: 300, height: 200)
        }
    }
}

# この後 レイアウト等を変更した時にわかりやすくするために、赤 青 黄 で幅を変えています。

この例では、VStack に 3つのビューを与えられています。VStack は、与えられた3つのビューを順番に縦方向に並べています。

VStack の initializer

VStack は、上記のように 引数なしで作成/使用することもできますが、initializer を使って幾つかのオプションを指定して使用することもできます。

どのようなオプションがあるのか initializer を確認してみます。
Apple のドキュメントは、こちら

ありがたいこと(?)に、1つしかありません。


init(
    alignment: HorizontalAlignment = .center,
    spacing: CGFloat? = nil,
    content: () -> Content
)

引数を3つ目から逆順に見ていきます。

content は、VStack によって並べるビューです。
ですので、最初の例を すべての引数名もつけて指定すると以下のようになります。


struct ContentView: View {
    var body: some View {
        VStack(content: {
            Color.red.frame(width: 200, height: 200)
            Color.blue.frame(width: 100, height: 200)
            Color.yellow.frame(width: 300, height: 200)
        })
    }
}

initializer を確認するとわかりますが、content にはデフォルトは指定されていませんので、VStack を使用する時に省略することはできません。
また、content に与えられるビューは、最大10個です。

# 直接与えられるビューが最大10であるだけで、Group 等を使用して階層化すると実質の数を増やすことは可能です。

content 以外の残りのオプションも見ていきます。

VStack での spacing 指定

2つ目に指定できるオプションは、spacing です。VStack では複数の要素を縦方向に並べることができますが、そのときの要素間のスペースを指定できます。

例えば、隙間なく並べるために spacing: 0 を指定すると以下のようになります。

ZeroSpace

struct ContentView: View {
    var body: some View {
        VStack(spacing:0) { // - spacing:0 指定
            Color.red.frame(width: 200, height: 200)
            Color.blue.frame(width: 100, height: 200)
            Color.yellow.frame(width: 300, height: 200)
        }
    }
}

VStack での alignment 指定

最後に説明するオプションは、alignment です。

VStack では複数の要素を縦方向に並べます。その際 縦方向の並べ方/隙間の開け方は spacing で指定しました。

横方向に対してどのように揃えるかについての指定が、alignment です。
alignment が受け取るデータは、HorizontalAlignment という型で、.leading, .center, .trailing という値を指定できます。initializer を確認すると デフォルト値が、.center になっていることがわかります。

ですので、これまでの配置例をあらためて確認してみると、各色の四角の(横方向の)中心が一致している配置になっています。

AlignCenter

例えば、各色の四角の(横方向の)開始位置を一致するように配置するためには、.leading を指定します。

alignmentLeading


struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Color.red.frame(width: 200, height: 200)
            Color.blue.frame(width: 100, height: 200)
            Color.yellow.frame(width: 300, height: 200)
        }
    }
}

終了位置を一致するように配置するためには、.trailing を指定することになります。

HStack との組み合わせで Excel レイアウトが可能に

ここまでに見てきたものが、VStack のすべてです。

縦方向に配置する VStack と同様に 横方向に配置する HStack というものがあり、この2つの Stack がレイアウトの基本になります。

縦横方向にレイアウトする方法があれば、表計算ソフト Excel を駆使して レイアウトを行う いわゆるエクセルレイアウト と同じように たいていのレイアウトは作成することができます。

まとめ

SwiftUI で UI をレイアウトしようとする時に基本となる VStack をあらためて説明しました。

VStack の使い方
  • VStack は与えられたビューを縦方向に並べる
  • VStack は、縦方向に並べる時に spacing で指定された値のスキマをつくる
  • VStack は、縦方向に並べるときの横方向は、alignment で指定された揃えを行う

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

# SwiftUI2.0 が登場したことで少し古くなってしまいましたが、いまでも 定番本です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です