Zenn
🍎

【SwiftUI】基本的なViewとレイアウトを学ぶ

2024/12/19に公開
iOS
Swift
SwiftUI
tech

このChapterのゴール

テキスト、画像を縦や横に並べて配置できること

達成までのステップ

基本的なViewについて学ぶ

SwiftUIで言う「View」とは、アプリの画面に表示されるものを指します。画面の中で見たり触ったりするすべてのもの（文字、画像、ボタンなど）は「View」として扱われます。

画像の表示方法を学ぶ

Image(systemName: "star")

アイコンや画像を画面に表示します。
Image(systemName: "アイコン名") を使うと、Appleが用意したアイコンを表示することができます。

実際にコードを書き換えてみる

前のChapterで作ったプロジェクトのコードを変更して確認してみましょう！

- Image(systemName: "globe") // 変更前
↓
+ Image(systemName: "star")  // こっちに書き換える
書き換えたコード全体
struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "star")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

以下のように変更されていればOKです！

レイアウトを整える方法を学ぶ

画面に複数の要素を並べるときに「スタック」という仕組みを使います。
「スタック」がなければ、要素を1つずつバラバラに配置しないといけなくなり、非常に大変になります。

ここでは基本となる2種類のスタックを説明します。

  • VStack：要素を縦に並べる
  • HStack：要素を横に並べる

イメージとしては以下の通りです。

実際に手元でコードを変更しながら確認してみましょう！

VStack

VStack {
    Text("1つ目")
    Text("2つ目")
    Text("3つ目")
}
書き換えたコード全体
struct ContentView: View {
    var body: some View {
        VStack {
            Text("1つ目")
            Text("2つ目")
            Text("3つ目")
        }
    }
}

HStack

HStack {
    Image(systemName: "star")
    Image(systemName: "globe")
}
書き換えたコード全体
struct ContentView: View {
    var body: some View {
        HStack {
            Image(systemName: "star")
            Image(systemName: "globe")
        }
    }
}

スタックを組み合わせる

VStack（縦に並べる）とHStack（横に並べる）を組み合わせることで、複雑なレイアウトを簡単に作ることができます。

VStackだけ、またはHStackだけだと、単純に縦か横にしか並べられません。しかし、アプリの画面はもっと複雑な配置が必要になることが多いです。

イメージとしては以下の通りです。

どんなコードか気になる方向け
struct ContentView: View {
    var body: some View {
        VStack {
            Rectangle()
                .frame(width: 236, height: 80)
                .foregroundColor(.purple)

            Rectangle()
                .frame(width: 236, height: 80)
                .foregroundColor(.orange)

            HStack {
                Rectangle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(.red)
                
                Rectangle()
                    .frame(width: 70, height: 70)
                    .foregroundColor(.blue)
                
                Rectangle()
                    .frame(width: 50, height: 50)
                    .foregroundColor(.green)
            }
        }
    }
}

いざ実践

ではこれまでに学んだTextとImageを使って実践していきましょう！

まずは見よう見まねで、以下のコードを書いてみましょう。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("私の名前はAppleです")

            Text("木から生まれてきました")

            HStack {
                Image(systemName: "ladybug")
                Image(systemName: "ant")
                Image(systemName: "leaf")
            }
        }
    }
}

以下の画像のように表示できればOKです！

ただ、このChapterのゴールと見比べてみると、それぞれの要素が詰まっているように見えます。
要素同士の間隔を適切に調整して、見た目が良くなるように仕上げましょう！

仕上げ

要素同士の間隔を調整する方法はいくつかありますが、今回はスタック（VStackやHStack）を使って間隔を調整する方法を説明します。

以下のコードのように、スタックにspacing: 16を指定すると、スタック内に並べた要素同士の間に16ポイント分の余白が自動で設定されます。

// AとBとCの間に16pt分の余白を自動で設定される
VStack(spacing: 16) {
  A
  B
  C
}

HStack(spacing: 16) {
  ...略
}

先ほどのコードのVStackとHStackを変更してみましょう。

以下のように表示できれば、今回のChapterはゴールです🚩

Discussion