Slider コンポーザブルを使用すると、ユーザーは値の範囲から選択できるようになります。スライダーを使用して、ユーザーが以下の操作を行えるようにできます。
- 音量や明るさなど、さまざまな値を使用する設定を調整します。
- 価格帯を設定するときのように、グラフのデータをフィルタします。
- レビューに評価を設定するなどのユーザー入力。
スライダーには、トラック、つまみ、値のラベル、目盛りが含まれています。
- トラック: トラックは、スライダーが取ることのできる値の範囲を表す水平のバーです。
- つまみ: ユーザーがトラックで定義された範囲内の特定の値を選択できるようにする、スライダー上のドラッグ可能なコントロール要素です。
- 目盛り: 目盛りは、スライダーのトラックに沿って表示されるオプションの視覚的なマーカーまたはインジケーターです。
基本的な実装
完全な API 定義については、Slider リファレンスをご覧ください。Slider コンポーザブルの主なパラメータは次のとおりです。
value: スライダーの現在の値。onValueChange: 値が変更されるたびに呼び出されるラムダ。enabled: ユーザーがスライダーを操作できるかどうかを示すブール値。
次の例は、わかりやすいスライダーです。これにより、ユーザーは 0.0 から 1.0 までの値を選択できます。ユーザーはこの範囲内の任意の値を選択できるため、スライダーは連続です。
@Preview
@Composable
fun SliderMinimalExample() {
var sliderPosition by remember { mutableFloatStateOf(0f) }
Column {
Slider(
value = sliderPosition,
onValueChange = { sliderPosition = it }
)
Text(text = sliderPosition.toString())
}
}
これを実装すると次のようになります。
高度な実装
より複雑なスライダーを実装する場合は、さらに次のパラメータを使用できます。
colors: スライダーの色を制御できるSliderColorsのインスタンス。valueRange: スライダーが取ることができる値の範囲。steps: つまみをスナップするスライダーのノッチの数。
次のスニペットでは、0.0～50.0 の範囲の 3 つのステップを持つスライダーを実装しています。つまみが各ステップにスナップするため、このスライダーは「離散」になります。
@Preview
@Composable
fun SliderAdvancedExample() {
var sliderPosition by remember { mutableFloatStateOf(0f) }
Column {
Slider(
value = sliderPosition,
onValueChange = { sliderPosition = it },
colors = SliderDefaults.colors(
thumbColor = MaterialTheme.colorScheme.secondary,
activeTrackColor = MaterialTheme.colorScheme.secondary,
inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
),
steps = 3,
valueRange = 0f..50f
)
Text(text = sliderPosition.toString())
}
}
実装は次のようになります。
範囲スライダー
専用の RangeSlider コンポーザブルを使用することもできます。これにより、ユーザーは 2 つの値を選択できます。これは、ユーザーが最低価格と最高価格を選択したい場合などに便利です。
次の例は、連続範囲スライダーの比較的簡単な例です。
@Preview
@Composable
fun RangeSliderExample() {
var sliderPosition by remember { mutableStateOf(0f..100f) }
Column {
RangeSlider(
value = sliderPosition,
steps = 5,
onValueChange = { range -> sliderPosition = range },
valueRange = 0f..100f,
onValueChangeFinished = {
// launch some business logic update with the state you hold
// viewModel.updateSelectedSliderValue(sliderPosition)
},
)
Text(text = sliderPosition.toString())
}
}
