【SwiftUI】Sliderの使用方法とデザイン変更

今回はSliderの基本的な使用方法とデザインについて紹介します。

Sliderはボリュームや明るさなどの値を指定するのに便利です。ドラッグ操作で範囲内の値を指定することができます。

valueのみを指定したSliderの使用方法
Sliderの値を表示する
Sliderの値の範囲を指定して使用する
まとめ
SwiftUI勉強中の方へ

valueのみを指定したSliderの使用方法

まずはSliderの基本的な使用方法です。

Sliderの値に使用する変数を@Stateを使用して定義しています。

struct ContentView: View {
    @State var sliderValue: Double = 0.0

    var body: some View {
        Slider(value: $sliderValue)
    }
}

Sliderの値を表示する

@Stateを使用して定義したSliderの値を表示します。

Sliderの値はDouble型で定義しているため浮動小数点です。

値を見やすく整数で表示するために、format(_ num: Double)という関数を使用して、Textで表示しています。

関数の役割は、値を100倍して、Double型→整数のInt型→文字列のString型に変換しています。

struct ContentView: View {
    @State var sliderValue: Double = 0.0

    var body: some View {
        HStack {
            Text("\(format(sliderValue))")
            Slider(value: $sliderValue)
        }
        .frame(width: 300)
    }
}

func format(_ num: Double) -> String {
    let result = String(Int(round(num*100)))
    return result
}

Sliderの値を浮動小数点（Double）→整数（Int）→文字列（String）に変換してで表示する方法

Sliderの値の範囲を指定して使用する

Sliderの第二引数で範囲を指定することができます。

今回は範囲を0〜255にして、RGBの色指定をできる様にするサンプルを紹介します。

また、accentColorを使用するとSliderに色をつけることができます。

struct ContentView: View {
    @State var redValue: Double = 0
    @State var greenValue: Double = 0
    @State var blueValue: Double = 0

    var body: some View {
        VStack {
            Circle()
                .foregroundColor(Color(red: redValue/255, green: greenValue/255, blue: blueValue/255))
                .frame(width: 200, height: 200)
            HStack {
                Text("R: \(String(Int(redValue)))")
                Slider(value: $redValue, in: 0...255)
                    .accentColor(.red)
            }
            HStack {
                Text("G: \(String(Int(greenValue)))")
                Slider(value: $greenValue, in: 0...255)
                    .accentColor(.green)
            }
            HStack {
                Text("B: \(String(Int(blueValue)))")
                Slider(value: $blueValue, in: 0...255)
                    .accentColor(.blue)
            }
        }
        .frame(width: 300)
    }
}