[SwiftUI] HStack の使用方法

スポンサーリンク
SwiftUI Swift5

SwiftUI で画面デザインをするには、HStack(※) の理解が欠かせません。

※ HStack とは UI部品を水平方向に配置するためのビューです。 今回は、HStack の使用方法をみていきます。

VStack の使用方法については、前回の記事「[SwiftUI] VStack の使用方法」を参照ください。

また、SwiftUI のプロジェクト作成方法については以下の記事を参照ください。

[SwiftUI] SwiftUI を使ったプロジェクトを作成してみよう

スポンサーリンク

環境

macOS: Mojave 10.15.1

Swift: 5.1.2 Xcode: 11.2 (110A420a)

スポンサーリンク

HStack の基本使用方法

新規でプロジェクトを作成すると、以下のように「Hello, World」が配置された状態になっています。

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}
新規プロジェクト作成直後の画面

新規プロジェクト作成直後の画面

水平方向に複数の UI 部品を複数配置したい場合には、HStack を使用します。

例えば、もう一つ Text を配置したい場合は、以下の例のように HStack の中に Text を追加します。ここでは、「こんにちは、世界」という Text を追加しています。

struct ContentView: View {
    var body: some View {
        HStack {  // HStack を使用して複数の部品を横方向に配置
            Text("Hello, World!")
            Text("こんにちは、世界")
        }
    }
}
HStack の使用例

HStack の使用例

UI 部品を横方向に複数配置する時は HStack を使おう
スポンサーリンク

分割線を入れるには?

HStack に配置する部品と部品の間には、Divider  を使用して分割線を入れることができます。 Divider の使用例を以下に示します。

struct ContentView: View {
    var body: some View {
        HStack {
            Text("Hello, World!")
            Divider()  // 分割線の表示
            Text("こんにちは、世界")
        }
    }
}
Divider の使用例

Divider の使用例

分割線を入れたい時は Divider を使おう
スポンサーリンク

部品間の余白を設定するには?

部品間の余白を均等に設定するには、spacing を使用します。

spacing を使用して余白を作成

上図のように、部品間の余白を 15 にしたい場合のコード例を以下に示します。

struct ContentView: View {
    var body: some View {
        HStack(spacing: 15) {  // 余白を 15 に設定
            Text("Hello, World!")
            Text("你好,世界")
            Text("こんにちは、世界")
        }
    }
}
spacing の使用例

spacing の使用例

部品間の余白を均等に設定するには spacing を使おう
スポンサーリンク

部品間の余白を個々に設定するには?

部品間の余白を個々に設定したい場合は Spacer() を使用します。

部品と部品の間に「Spacer().frame(width: 余白)」を記述することで、任意の余白を空けることができます。

Sapcing() の使用例

上図のように、余白を 5 と 15で設定したい場合のコード例を以下に示します。

struct ContentView: View {
    var body: some View {
        HStack() {
            Text("Hello World!!")
            Spacer().frame(width: 5)  // 余白を 5 に設定
            Text("你好,世界")
            Spacer().frame(width: 15) // 余白を 15 に設定
            Text("こんにちは、世界")
        }
    }
}
Spacer.frame() の使用例

Spacer.frame() の使用例

部品間の余白を任意の幅にしたい時は Spacer().frame(width: 余白) を使おう
スポンサーリンク

画面の左端や右端に部品を配置するには?

spacer や Spacing() を使用することで余白を空けることができます。しかし、部品を画面の左端や右端に配置したい場合はどのようにしたら良いでしょうか?

画面の幅サイズから部品の幅サイズを引いて計算で出すこともできますが、先ほど学んだ Spacer() を使用すれば簡単に設定することができます。  

Spacer() は画面と部品の余白を自動的に埋めてくれるという機能を持ちます。

このため、部品の後ろに Spacing() を配置すると部品が左端に配置され、部品の前にSpacer() を配置すると部品が右端に配置されます。

部品を画面の左端に配置

部品を左寄せ配置

部品を左寄せ配置

部品を画面の右端に配置

部品を右寄せ配置

部品を右寄せ配置

 

はじめに、部品を左端に配置する場合のコード例を示します。

struct ContentView: View {
    var body: some View {
        HStack() {
            Text("Hello World!!")
            Spacer()
        }
    }
}
部品の左寄せ

部品の左寄せ

 

続いて、部品を右端に配置する場合のコード例を示します。

struct ContentView: View {
    var body: some View {
        HStack() {
            Spacer()
            Text("Hello World!!")
        }
    }
}
部品の右寄せ

部品の右寄せ

部品を画面の左端や右端に配置したい場合は Spacer を使おう
スポンサーリンク

VStack と組み合わせて、部品を左上や右下に配置する

VStack と組み合わせれば、部品を左上、左下、右上、右下に配置することができます。

以下にコード例を示します。VStack の中に HStack を内包しおり、Spacer を適切な位置に書くことで配置位置を設定しています。

まずは左上に配置する例を示します。VStack 内のはじめに HStack を置き、その後ろに Spacer() を配置することで上端寄せにします。HStack 内は、はじめに Text を配置し、その後ろに Spacer を配置して左端に寄せます。

struct ContentView: View {
    var body: some View {
        VStack() {
            HStack() {
                Text("Hello World!!")
                Spacer()
            }
            Spacer()
        }
    }
}
部品を左上に配置

部品を左上に配置

 

右上に配置する例を以下に示します。VStack 内のはじめに HStack を置き、その後ろに Spacer() を配置することで上端寄せにします。HStack 内は、はじめに Spacer() を配置し、その後ろに Text を配置して右端寄せにします。

struct ContentView: View {
    var body: some View {
        VStack() {
            HStack() {
                Spacer()
                Text("Hello World!!")
            }
            Spacer()
        }
    }
}
部品を右上に配置

部品を右上に配置

 

左下に配置する例を以下に示します。VStack 内のはじめに Spacer() を置き、その後ろに HStack を配置することで下端寄せにします。HStack 内は、はじめに Text を配置し、その後ろに Spacer() を配置して左端寄せにします。

struct ContentView: View {
    var body: some View {
        VStack() {
            Spacer()
            HStack() {
                Text("Hello World!!")
                Spacer()
            }
        }
    }
}
部品を左下に配置

部品を左下に配置

 

右下に配置する例を以下に示します。VStack 内のはじめに Spacer() を置き、その後ろに HStack を配置することで下端寄せにします。HStack 内は、はじめに Spacer() を配置し、その後ろに Text を配置して左端寄せにします。

struct ContentView: View {
    var body: some View {
        VStack() {
            Spacer()
            HStack() {
                Spacer()
                Text("Hello World!!")
            }
        }
    }
}
部品を右下に配置

部品を右下に配置

実行例を以下に示します。 

スポンサーリンク

まとめ

HStack を使用することで、UI 部品を横方向に並べて配置することができます。分割線は Divider() で表示することができ、また spacing や Spacer() を使用して余白を設定することができます。

さらに、VStack と組み合わせることで、部品を左上、右上、左下、右下に配置することもできます。

コメント

タイトルとURLをコピーしました