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. iOSアプリ開発

    iOSアプリ開発者が本当にオススメする6つの技術系サイト

    今回は、iOSアプリエンジニアとして実際に良く参考にしているサイトを紹…

  2. swiftui

    iOSアプリ開発

    初心者でもiOSアプリ開発ができるSwiftUIを触ってみよう

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

  3. iOSアプリ開発

    Firebase Firestoreを使ってiOSアプリのデータを管理する方法

    アプリを作る・サービスを立ち上げるといったとき、ほとんどの場合はDBや…

  4. dark-mode

    iOSアプリ開発

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

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

  5. xcode

    iOSアプリ開発

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

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

  6. iOSアプリ開発

    IBDesignable、IBInspectableを使ってStoryboardでデザインする方法

    iOSアプリ開発をStoryboardを使って開発している方も増えてき…

PAGE TOP