SwiftUIでレイアウトを簡単にするHStackとVStackの使い方

初めてSwiftUIを使ってアプリ開発するとき、まだ慣れていなくてレイアウトの仕方がわからないという方向けに、簡単にレイアウトするためのクラスとその使い方について紹介していきます。

SwiftUIのレイアウトについて

SwiftUIでは、複数のレイアウト用クラスを使って画面パーツをレイアウトしていくことができます。UIKitを使っていた時とは異なり、より直感的にレイアウトしやすくなっています。また、SwiftUIではレイアウトした画面をプレビューという機能を使ってリアルタイムにレイアウトを確認することができるのも特徴です。

スタックを使うとレイアウトが劇的に簡単になる

SwiftUIにはスタックというレイアウトをサポートしてくれる機能が存在します。このスタックを利用すると、縦横にビューを並べることがとても簡単にできます。SwiftUIで画面を構成するときは、このスタックを積極的に使うことで画面作成が大幅に短縮できます。スタックの主な特徴は以下の通りです。

• 複数のビューを並べるときは基本この機能を使う
• 水平(X)・垂直(Y)・奥行(Z)に対応している
• 特定のコンポーネントを使うことでスペースを空けたりできる
• スタックに入っているビューにAlignment指定することができる

レイアウトを簡単にする「VStack」「HStack」

SwiftUIでは、VStack・HStack・ZStackといったレイアウトするためのクラスを使うことができます。これらを使うことで、要素を縦横に並べたり奥行きを持たせたりすることができます。

垂直方向に並べる「VStack」

VStackは、要素を縦に並べることができます。スタックした要素は、右寄せ・中央寄せ・左寄せが指定できます。

指定できるのは次の３つです。

• center
• leading
• trailing

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Text 1")
            Text("Text 2")
        }
    }
}

水平方向に並べる「HStack」

HStackは、要素を横に並べることができます。HStackでスタックした要素は、上寄せ・中央寄せ・下寄せが設定できます。

指定できるのは次の３つです。

• top
• center
• bottom

struct ContentView: View {
    var body: some View {
        HStack(alignment: .tops) {
            Text("Text 1")
            Text("Text 2")
        }
    }
}

奥行きを持たせる「ZStack」

ZStackは、要素を重ねることで奥行きを持たせることができます。次の例は、ZStackを使って実装してみたものです。

SwiftUIでVStackとHStackをよく触るけれど、ZStackというのもあるらしい。 VStackがY軸方向、HStackがX軸方向とすると、ZStackはZ軸方向にコンポーネントを配置できるもので実際にやってみるとこんな感じで表示される。 背景に画像を設定して、ユーザーが触るUIとは別のレイヤーにする時良さそう。 pic.twitter.com/aUUZodrPF8 — Hiro | Swift (@nagami_hiro) November 24, 2019

リストや他のコンポーネントを使って工夫しよう

スタックではコンポーネントを使うことで、要素の間にスペースを設定したり線を引いたりすることができます

スペースを空ける「Spacer」

Stack Viewに積むことができるコンポーネント

線を引く「Divider」

ボーダーラインを引くことができるコンポーネント

リスト型はListを使おう

SwiftUIのおすすめ参考書籍