
SwiftUIで区切り線を引く場合にはDividerを使用します。
Divider自体のイニシャライザは引数がなくシンプルなものになっていますが、ViewModifierを使用して以下のように様々な属性を制御できるようになっています。
- 色
- 固定幅
- 最大サイズに合わせた幅
この記事ではDividerの基本的な使い方から上記の属性の設定方法までを紹介していきます。
基本的な使い方
まずは基本的な使い方から見ていきましょう。
以下のようにView内でDividerを使用すると区切り線を引くことができます。
struct ContentView: View {
var body: some View {
VStack {
Text("Divider")
.padding()
Divider()
Text("Dividerを使用して区切り線を引くことができます。")
.padding()
}
}
}

多少見えにくいですが、2つのテキストの間に画面一杯に横向きの区切り線が表示されているのが確認できます。
Dividerの方向
Dividerの方向は以下の2つのパターンによって決まります。
- Stackの格納されている場合
- Stackに格納されていない場合
Stackに格納されている場合
DividerがStackに格納されている場合にはStackのメインの軸と逆方向の向きになります。
VStackに格納されている場合
- VStackのメインの軸: 縦
- Dividerの方向: 横
struct ContentView: View {
var body: some View {
VStack {
Text("Divider")
.padding()
Divider()
Text("Dividerを使用して区切り線を引くことができます。")
.padding()
}
}
}

HStackに格納されている場合
- HStackのメインの軸: 横
- Dividerの方向: 縦
struct ContentView: View {
var body: some View {
HStack {
Text("Divider")
.padding()
Divider()
Text("Dividerを使用して区切り線を引くことができます。")
.padding()
}
}
}

Stackに格納されていない場合
DividerがStackに格納されていない場合は横向きになります。
struct ContentView: View {
var body: some View {
Divider()
}
}

Dividerの色を変える
Dividerの色を変える場合は、backgroundmodifierを使用します。
以下の例ではDividerの色を赤に変更しています。
struct ContentView: View {
var body: some View {
VStack {
Text("Divider")
.padding()
Divider()
.background(Color.red)
Text("Dividerを使用して区切り線を引くことができます。")
.padding()
}
}
}

Dividerのサイズを変える
ここまで見てきた例ではDividerのサイズを指定していなかったため、画面サイズ一杯に表示されていました。
ここからはDividerのサイズを変更する方法を見ていきます。
固定幅
Dividerのサイズを固定幅にする場合には以下のようにframemodifierを使用します。
DividerはStackの軸とは逆向きになるため、widthとheightもそれぞれStackの軸と逆のものを指定します。
- VStackに格納されている場合: widthを指定
- HStackに格納されている場合: heightを指定
VStackに格納されている場合
VStackの格納されている場合はDividerの向きは横向きになるのでwidthを指定します。
struct ContentView: View {
var body: some View {
VStack {
Text("Divider")
.padding()
Divider()
.frame(width: 200)
Text("Dividerを使用して区切り線を引くことができます。")
.padding()
}
}
}

HStackに格納されている場合
HStackの格納されている場合はDividerの向きは縦向きになるのでheightを指定します。
struct ContentView: View {
var body: some View {
HStack {
Text("Divider")
.padding()
Divider()
.frame(height: 200)
Text("Dividerを使用して区切り線を引くことができます。")
.padding()
}
}
}

最大サイズに合わせた幅
固定幅では幅を固定値に設定しましたが、Dividerを格納しているStackに対してfixedSizemodifierを使用することで最大サイズのViewに合わせた幅にすることができます。
以下の例では、
Text("区切り線を引く。")
が最大サイズのViewになるため、DividerもこのTextと同じ幅になります。
struct ContentView: View {
var body: some View {
VStack {
Text("Divider")
Divider()
Text("区切り線を引く。")
}
.fixedSize()
}
}

まとめ
ここまでDividerの基本的な使い方から、色の変え方や幅の変え方を見てきました。

- Dividerを使用することで区切り線を引くことができる。
- background modifier を使用して色を設定できる。
- frame modifier を使用することで固定幅を設定できる
- Dividerを格納しているStackに対して fixedSize modifier を指定することで最大サイズに合わせた幅にできる
それではここまでご覧いただき、ありがとうございました。