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

- SwiftUIでスライダーを実装する方法が知りたい
- Sliderの増減幅を変更したい
- ユーザーが操作を開始・終了したタイミングが知りたい
- Sliderに最大値・最小値を表示したい
SwiftUIでは、Sliderを使用することで、ボリューム操作のように、つまみを左右に操作して値を設定するUIを実装することができます。
本記事では、Sliderの基本的な実装方法から、増減幅の指定や、操作の開始・終了を知る方法、最小値・最大値の表示方法について解説致します。
目次
Sliderの実装
基本的な実装
Sliderには、いくつかイニシャライザが用意されております。以下は、その中でも最もシンプルなイニシャライザです。
Slider(value: 値, in: 範囲)
value: には、@Stateで宣言した、FloatかDoubleのプロパティを指定します。
in: には、0…100のように、Sliderの範囲を指定します。
増減幅の指定
続いて、1目盛毎の増減幅を指定する方法を紹介致します。増減幅を指定するには、step:を追加します。
Slider(value: 値, in: 範囲, step: 増減幅)
step: には増減幅を数値で指定します。負の値や範囲外の値を指定してもビルドは通りますが、実行するとエラーとなります。
操作の開始・終了の取得
ユーザーがSliderの操作を開始・終了したタイミングを知るには、onEditingChanged:を追加します。
Slider(value: 値, in: 範囲, onEditingChanged: { bool in
処理
})
onEditingChanged: には、ユーザーが操作を開始・終了したタイミングで行いたい処理を実装します。また、onEditingChangedには、開始(true)・終了(false)のBool値が渡ってくるので、if文等で開始・終了の処理を分けることができます。
最小値・最大値の表示
Sliderの左右に、最小値・最大値のラベルを表示するには、minimumValueLabel:、maximumValueLabel:、label:を追加します。
Slider(value: 値, in: 範囲, minimumValueLabel: 最小値のラベル, maximumValueLabel: 最大値のラベル, label: {
ラベル
})
minimumValueLabel: には、Sliderの左側に表示するViewを、maximumValueLabel: には、Sliderの右側に表示するViewを実装します。
なお、label: にもViewを実装する必要があるのですが、Viewを実装しても、画面上には表示されません。不必要な引数ですが、minimumValueLabel: とmaximumValueLabel: を含むイニシャライザには、label: も含まれているため、合わせて実装する必要があります。
ちなみに、step: 、onEditingChanged: 、minimumValueLabel: maximumValueLabel: を一緒に使用することもできます。
以上、Sliderの実装方法についてでした。
関連記事