【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()
        }
    }
}

多少見えにくいですが、2つのテキストの間に画面一杯に横向きの区切り線が表示されているのが確認できます。

Dividerの方向

Dividerの方向は以下の2つのパターンによって決まります。

Stackに格納されている場合

DividerがStackに格納されている場合にはStackのメインの軸と逆方向の向きになります。

VStackに格納されている場合

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

HStackに格納されている場合

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に格納されている場合

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の基本的な使い方から、色の変え方や幅の変え方を見てきました。

以下が理解できていればOKです！

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