【SwiftUI】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の実装方法についてでした。