【SwiftUI】ステッパーの使用方法

本記事では、ステッパーの設置方法とステッパーを利用したカウントアップとカウントダウンの方法について解説していきます。

1. ステッパーとは
2. ステッパーの設置方法
3. ステッパーの利用例
4. まとめ

ステッパーとは

ステッパーとは一般的に+と-のボタンがあり、指定の数値のデータに対して、+を押下で加算し-を押下することで減算するような機能のことを示します。

例えば身長や体重などの数値の入力などを求める際に、キーボードで入力を行わなくてもステッパーで基準の数値から増減を行うだけで簡単に入力を行うことが可能です。

以下のようにデザインも操作も直感的でわかりやすく、ラベルをつけることで何を加算減算するのかが一目でわかることがステッパーの良さでもあります。

ステッパーの設置方法

ステッパーを設置するにはviewsライブラリから「Stepper」をソースコードへドラッグ&ドロップします。

以下のようにソースコードにstepperのソースコードが追加されます。あとは、ステッパーに必要なパラメータを追加していきます。

Stepper(value: Value, in: Range) {
            Label
        }

ステッパーに対して指定することのできる値は、value/range/stepの3つになります。

valueは、ステッパーのクリックによって変化させることのできる数値型の変数を指定することができます。valueに指定する値は変化を常に監視して変数の値が変わるごとに画面の表示も切り替える必要があるため、@Stateをつけた変数で宣言します。

また、valueにはバインディング型の値を渡す必要があるため、変数の先頭に「$」をつけて渡してあげる必要があります。

rangeは、valueに入る値の上限/加減を指定することができます。range型の値を指定し、1..10と値を指定した場合には、valueに入っている変数は1~10までの間をステッパーの処理によって増減させることができます。

指定した範囲の数値に達したら自動でそれ以上加算あるいは減算をすることができないようになっています。

stepには、ステッパーのクリックでvalueに加算/減算をする値を指定することができます。例えば、valueに0が入っていて、stepに2を指定した場合には、ステッパーの「+」を押下するごとに0,2,4,6,8…と2ずつ値を増減させることができます。

また、step:は省略することができ、省略した場合には1ずつvalueの値を「増減させることができるようになります。

実際の実装

struct ContentView: View {
    @State var tall:Double = 170
    var body: some View {
        VStack {
            Stepper(value: $tall, in: 130...210) {
                Text("身長：\(Int(tall))")
            }.fixedSize()
        }
        .padding()
    }
}

ステッパーの利用例

ステッパーを実際に使用してBMIの計算を行うアプリケーションを作ってみましょう。BMIは、BMI ＝体重kg ÷ (身長m)²で計算するように作ります。

まず、体重と身長の値は初期値に170cm,60kgをを指定します。それぞれにステッパーをつけて初期値から実際の自分の値に変更させていきます。

struct ContentView: View {
    @State var tall:Double = 170
    @State var weight:Double = 60
    var body: some View {
        VStack {
            Stepper(value: $tall, in: 130...210) {
                Text("身長：\(Int(tall))")
            }.fixedSize()
            Stepper(value: $weight, in: 40...100) {
                Text("体重：\(Int(weight))")
            }.fixedSize()
        }
        .padding()
    }
}

続いて、BMIの計算結果の値を代入するbmiValueを用意します。身長はメートルの値になりますので1/100にして計算した値を代入します。

var bmiValue :Double{
        return weight / ((tall/100) * (tall/100))
    }

計算後のbmiValueの値もText()で画面表示して完成です。身長、体重それぞれのステッパーで数字を増減させれば、BMLの計算結果の値が同時に変更されることが確認できると思います！

struct ContentView: View {
    @State var tall:Double = 170
    @State var weight:Double = 60
    var bmiValue :Double{
        return weight / ((tall/100) * (tall/100))
    }
    var body: some View {
        VStack {
            Stepper(value: $tall, in: 130...210) {
                Text("身長：\(Int(tall))")
            }.fixedSize()
            Stepper(value: $weight, in: 40...100) {
                Text("体重：\(Int(weight))")
            }.fixedSize()
            Text("BMIの値は\(String(format: "%.1f", bmiValue))")
                .bold()
                .font(.title)
        }
        .padding()
    }
}

表示結果