公開日:2020/08/26更新日:2020/09/03
【SwiftUI】Stepperの実装方法を解説

- SwiftUIでStepperを実装する方法が知りたい
- Stepperの範囲を指定する方法が知りたい
- Stepperの増減幅を指定する方法が知りたい
- 操作の開始・終了イベントを受け取りたい
- 増減処理を独自に実装する方法が知りたい
SwiftUIには、[-][+]ボタン操作によって値を指定することができる、StepperというViewがあります。
本記事では、Stepperの基本的な実装方法から、範囲や増減幅の指定方法、操作の開始・終了イベントを受け取る方法、そして、増減処理を独自に実装する方法について解説致します。
目次
Stepperの実装
基本的な実装
まずは、Stepperの基本的な実装方法について解説致します。Stepperには、文字列をラベルとするイニシャライザと、Viewをラベルとするイニシャライザがあります。
文字列をラベルとするイニシャライザ
文字列をラベルとするイニシャライザは、以下のように実装します。
Stepper(文字列, value: 値)
第1引数には、ラベルとして表示する文字列を指定します。
第2引数のvalue: には、@Stateで宣言した数値のプロパティを指定します。
以下は、Stepperで変更した値がTextに表示されるサンプルコードです。
Viewをラベルとするイニシャライザ
Viewをラベルとするイニシャライザは、以下のように実装します。
Stepper(value: 値, label: {
View
})
label: の部分に、ラベルとして表示したいViewを実装します。
以下は、ImageとTextをラベルとしたStepperのサンプルコードです。
範囲の指定
続いて、選択できる範囲を指定する方法を紹介致します。範囲を指定するには、in: を追加します。
Stepper(文字列, value: 値, in: 範囲)
in: には、「最小値…最大値」というように、ClosedRangeで範囲を指定します。
以下は、最小値を-3、最大値を3に指定したStepperのサンプルコードです。
増減幅の指定
続いて、ボタン操作時の値の増減幅を指定する方法を紹介致します。増減幅を指定するには、step: を追加します。
Stepper(文字列, value: 値, step: 増減幅)
step: には増減幅を数値で指定します。負の値を指定することも可能です。
また、浮動小数点を指定することもできますが、その場合は、プロパティも浮動小数点型にする必要があります。
以下は、増減幅を0.5に設定したStepperのサンプルコードです。
最大値・最小値に到達すると、ボタンが非活性表示となり、タップしても反応しなります。
操作の開始・終了イベントの取得
操作の開始・終了イベントを取得するには、onEditingChanged: を追加します。
Stepper(文字列, value: 値, onEditingChanged: { bool in
処理
})
onEditingChanged: には、クロージャーで、ユーザーが操作を開始・終了したタイミングで行いたい処理を実装します。onEditingChangedは、ユーザーがボタンを押下したタイミングと離したタイミングの2回呼ばれます。引数として渡ってくる、開始(true)・終了(false)のBool値で、処理を分けることができます。
以下は、編集開始時に「編集中です。」、編集終了時に「編集中ではありません。」と、Textの表示が変わるサンプルコードです。
ちなみに、これまで紹介したin: 、step: 、onEditingChanged: は、以下のように、合わせて使用することもできます。
Stepper(文字列, value: 値, in: 範囲, step: 増減幅, onEditingChanged: { bool in
処理
})
また、文字列ラベルではなく、Viewラベルも使用可能です。
Stepper(value: 値, in: 範囲, step: 増減幅, onEditingChanged: { bool in
処理
}, label: {
View
})
増減処理の独自実装
最後に、[-][+]ボタンタップ時の増減処理を、独自に実装する方法を紹介致します。
増減処理を独自に実装するには、onIncrement: 、onDecrement: を実装します。
Stepper(文字列, onIncrement: {
[+]ボタンタップ時の処理
}, onDecrement: {
[-]ボタンタップ時の処理
})
onIncrement: には、[+]ボタンがタップされたときに行いたい処理を実装します。onDecrement: には、[-]ボタンがタップされたときに行いたい処理を実装します。
独自処理を実装すれば、増加幅と減少幅をそれぞれ指定したり、[+]ボタンタップ時のみ特定の処理を行うなどが可能となります。
なお、独自処理を実装する場合は、value: 、in: 、step: を使用することはできませんが、onEditingChanged: は一緒に使用することができます。
以下は、[+]ボタンタップ時に値を10増加させ、[-]ボタンタップ時に値を1減少させるサンプルコードです。また、操作状況もTextで表示しております。
以上、Stepperの実装方法についてでした。
関連記事