hstack-vstack

iOSアプリ開発

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

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

SwiftUIのレイアウトについて

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

UIKitとSwiftUIの違いについては以下の記事を参考にしてください。

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

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

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

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

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

hstack-vstack

垂直方向に並べる「VStack」

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

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

  • center
  • leading
  • trailing

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

水平方向に並べる「HStack」

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

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

  • top
  • center
  • bottom

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

奥行きを持たせる「ZStack」

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

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

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

hstack-vstack

スペースを空ける「Spacer」

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

線を引く「Divider」

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

リスト型はListを使おう

他にもより多くの要素を並べてスクロールするためのリストというものもあります。リストについては以下の記事を参考にしてみてください。

SwiftUIのおすすめ参考書籍

今回紹介したスタック以外にもSwiftUIについて学べる本を紹介しています。ぜひ参考にしてみてください。

SwiftUIで必ず知っておきたいリスト表示の仕方Prev

簡単にウェブページを公開できるFirebase Hostingの使い方を紹介Next

Related post

  1. programming

    iOSアプリ開発

    人気iOSアプリが作れるようになるおすすめの本8選

    アプリ開発にチャレンジできていなかったりアプリ開発に詰まってしまったり…

  2. iOSアプリ開発

    SwiftでJSONデータを使いやすくする!Codableの使い方

    APIからデータを取得する時、JSONでデータを受け取ることがあるかと…

  3. iOSアプリ開発

    iOSアプリ開発が簡単にできるStoryboard入門

    iOSアプリを開発しようとXcodeをダウンロードしてプロジェクト作成…

  4. itunes connect

    iOSアプリ開発

    初心者向けにiOSアプリ開発からリリースまでの手順を丁寧に解説!

    iPhoneやiPadのアプリ作ってリリースをしてみたいけれど、実際に…

  5. iOSアプリ開発

    iOSアプリ開発者になる人が読んでいる12の本を紹介 2020年版

    「iOSエンジニアになるために、どんな本を読んで勉強すれば良いですか?…

  6. xcode

    iOSアプリ開発

    iOSアプリ開発に必要なXcodeについて知ろう

    iPhoneアプリ作ってみたいけど「アプリ開発って難しそう」「作り方が…

PAGE TOP