【SwiftUI】Dividerで区切り線を引く

ロボット
この記事ではDividerの使い方を解説していきます。

SwiftUIで区切り線を引く場合にはDividerを使用します。

Divider自体のイニシャライザは引数がなくシンプルなものになっていますが、ViewModifierを使用して以下のように様々な属性を制御できるようになっています。

  • 固定幅
  • 最大サイズに合わせた幅

この記事ではDividerの基本的な使い方から上記の属性の設定方法までを紹介していきます。

基本的な使い方

まずは基本的な使い方から見ていきましょう。

以下のようにView内でDividerを使用すると区切り線を引くことができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Divider")
                .padding()
            Divider()
            Text("Dividerを使用して区切り線を引くことができます。")
                .padding()
        }
    }
}
Dividerで区切り線を引く

多少見えにくいですが、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()
        }
    }
}
VStack内のDividerの方向

HStackに格納されている場合

  • HStackのメインの軸: 横
  • Dividerの方向: 縦
struct ContentView: View {
    var body: some View {
        HStack {
            Text("Divider")
                .padding()
            Divider()
            Text("Dividerを使用して区切り線を引くことができます。")
                .padding()
        }
    }
}
HStack内のDividerの方向

Stackに格納されていない場合

DividerがStackに格納されていない場合は横向きになります。

struct ContentView: View {
    var body: some View {
        Divider()
    }
}
Stackに格納されていないDividerの方向

Dividerの色を変える

Dividerの色を変える場合は、backgroundmodifierを使用します。

以下の例ではDividerの色を赤に変更しています。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Divider")
                .padding()
            Divider()
                .background(Color.red)
            Text("Dividerを使用して区切り線を引くことができます。")
                .padding()
        }
    }
}
Stackに格納されていないDividerの方向

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()
        }
    }
}
Stackに格納されていないDividerの方向

HStackに格納されている場合

HStackの格納されている場合はDividerの向きは縦向きになるのでheightを指定します。

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

最大サイズに合わせた幅

固定幅では幅を固定値に設定しましたが、Dividerを格納しているStackに対してfixedSizemodifierを使用することで最大サイズのViewに合わせた幅にすることができます。

以下の例では、

Text("区切り線を引く。")

が最大サイズのViewになるため、DividerもこのTextと同じ幅になります。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Divider")
            Divider()
            Text("区切り線を引く。")
        }
        .fixedSize()
    }
}
最大サイズに合わせたDividerの幅

まとめ

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

ロボット
以下が理解できていればOKです!

  • Dividerを使用することで区切り線を引くことができる。
  • background modifier を使用して色を設定できる。
  • frame modifier を使用することで固定幅を設定できる
  • Dividerを格納しているStackに対して fixedSize modifier を指定することで最大サイズに合わせた幅にできる

それではここまでご覧いただき、ありがとうございました。