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. Pythonでスクレイピング

    BeautifulSoup4でid, classを持つDOMを取得して効率化しよう!

    前回は、"スクレイピングでヘッダー情報を付与する方法とその目的"を紹介…

  2. テクノロジー

    簡単にサーバーを立てたい時におすすめのCloud Functins for Firebaseを紹介!…

    ウェブサービスやアプリで使うからサーバーを立てたいけど、サーバーを立ち…

  3. iOSアプリ開発

    DispatchQueueを使って容量のあるファイルをダウンロードする方法

    アプリなどで画像のようなファイルデータをダウンロードすることはよくあり…

  4. テクノロジー

    ReactiveXで使うStreamとObserverとは?RxJSでわかりやすく解説

    前回は、ReactiveXとは?RxJSの入門と導入手順について話しま…

  5. dark-mode

    iOSアプリ開発

    iOSアプリでダークモードに対応する様々な方法

    アプリやOSのUIを全体的に黒を基調としたデザインにする機能で、201…

  6. テクノロジー

    Appleの新しいMessagesで何ができるのか。

    WWDC 2016では数多くのセッションが行われました。WWDC 20…

PAGE TOP