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
: つまみをスナップするスライダーのノッチの数。
次のスニペットでは、3 つのステップを含むスライダーを実装し、
0.0
~50.0
。つまみが各ステップにスナップするため、このスライダーは離散的です。
@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()) } }