【SwiftUI】スライダーの使い方

本記事では、音楽アプリの音量調整などで使用されているようなスライダーをSwiftUIで実現する方法とその活用例を解説していきます。

1. スライダーとは
2. スライダーの設置
3. スライダーの設定
4. スライダーの活用例
5. まとめ

スライダーとは

SwiftUIで今回実現するスライダーとは音量調整や彩度調整のような、一直線上につまみがあり、そのつまみを上下もしくは左右に移動させる機能を指しています。

仕組みとしては、指定した範囲の中でスライダーを調整することによって、　それに対応した数値を変化させて音量を上げたり下げたりするような動きになっています。

スライダーの設置

スライダーは、コントロールパネルのViewsタブから「Slider」をソースコードにドラッグ&ドロップすることでコードを挿入することができます。

このコードが挿入されたらスライダーの設置は完了です。以降で設定値に変更を加えながら使い方を解説します。

struct ContentView: View {
    var body: some View {
        VStack {
            Slider(value: Value)
        }
        .padding()
    }
}

スライダーの設定

スライダーに必要なパラメータはvalueとなっており、valueには小数点を含むDouble型の変数を渡します。

なぜ小数点以下を必要とするDouble型の変数を渡す必要があるかというと、スライダーは最小値の左端が0,最大値の右端が1となっており0~1の範囲の中で値を変更することができる機能であるためです。

スライダーの初期値は0にしておくのがいいでしょう。また、スライダーは0~1の範囲でしか値を変更しないため、初期値に0~1の範囲外の数値を代入すること不具合の原因になる恐れがあるため避けましょう。

また、スライダーはパラメータにバインディング型のデータを要求しているため、変数の値を監視してviewを再描画できる@State変数を定義し、その変数に「$」をつける形でSlider()にパラメータを渡します。

struct ContentView: View {
    @State var number: Double = 0
    var body: some View {
        VStack {
            Text(String(format: "%.2f", number))
            Slider(value: $number)
        }
        .padding()
    }
}

実行結果

スライダーを動かしてみると、0~1の範囲内でテキストに表示している数値が変化しているのが確認できます。Doubule型の変数の値をそのまま表示すると桁数が多くて見えづらくなってしまうため、例では小数点第二位まで表示しています。String(format: “%.2f”, Doubule型変数)の記述で小数点以下第何位まで表示するかを指定することができます。

スライダーの活用例

R・G・Bそれぞれのスライダーを用意し、赤・緑・青のパーセントを調整することで任意の色を作成する機能を実装していきます。

まず3色それぞれの値を入れる@State変数を定義します。

@State var red: Double = 0
@State var green: Double = 0
@State var blue: Double = 0

次に3色の色を調整するためのスライダーを用意します。それぞれのスライダーが赤青緑のどの色を扱うのかがわかりやすいようにスラーダーの横に色のついたラベルを配置しておきます。

ラベルとスライダーを横に並べる際にはHStackを利用してその中にラベルとスライダーを配置します。

            HStack{
                Image(systemName: "pencil.and.scribble")
                    .resizable()
                    .foregroundColor(.red)
                    .frame(width: 30,height: 30)
                Slider(value: $red)
            }
            HStack{
                Image(systemName: "pencil.and.scribble")
                    .resizable()
                    .foregroundColor(.green)
                    .frame(width: 30,height: 30)
                Slider(value: $green)
            }
            HStack{
                Image(systemName: "pencil.and.scribble")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 30,height: 30)
                Slider(value: $blue)
            }

最後に各スライダーの色を反映するためのラベル画像を用意します。Image()に対してforegroundColor(Color())を使用することでRGBでラベルへの色の設定を行うことが可能です。

            Image(systemName: "gamecontroller.fill")
                .resizable()
                .frame(width: 100/,height: 100)
                .foregroundColor(Color(red:red, green: green, blue:blue))

これで各スライダーの位置を調整することでラベルの色をRGBで指定し、自在に色を変更する機能を実装することができました。

赤のスライダーのみを動かした例