Compose for Wear OSではさまざまな入力インターフェースも提供されています。 一部は horologist というライブラリに切り出されていますが、標準のインターフェースもいくつかあります。
Picker
ウェアラブルの入力形式でよく見るであろうPickerの実装をしていきます。
androidx.wear.compose.material 内にあります。
@Composable fun PickerExample() { val items = listOf("One", "Two", "Three", "Four", "Five") val state = rememberPickerState(items.size) Picker( modifier = Modifier .fillMaxWidth() .height(100.dp), state = state ) { Text(text = items[it]) } }
rememberPickerState の引数に選択肢の数を渡します。
Pickerの選択肢はデフォルトでリピート表示になっているので、リピートさせたくない場合は引数に repeatItems = falseを渡すと良いです。
PickerのstateにrememberPickerState を渡します。
PickerのContents部分はComposableになっているので、任意のUIが組めます。
PickerScope形式になっておりselectedOption がラムダで帰ってくるので、items[it]で選択肢を受け取れます。
rememberPickerState
PickerStateという@Stable なクラスを記憶しています。
PickerStateは下記の変数を持っています。
numberOfOptionsoptionsOffsetscalingLazyListStateselectedOption
選択されているアイテムを取りたい場合は、selectedOption を呼ぶと取得できます。
val state = rememberPickerState(items.size) // ... Text(text = "selected item = ${items[state.selectedOption]}")
ScalingLazyColumn
Pickerは中でScalingLazyColumn を利用してます。
PickerStateにscalingLazyListStateがあるので、スクロールに関する情報を取りたい場合はscalingLazyListStateから取得できます。
PickerStateにはisScrollInProgressがあり、scalingLazyListState.isScrollInProgressを返しています。
スクロール中の時に処理を分けたい場合は、isScrollInProgressを見て分岐させてあげれば良いです。
// Pickerが止まったら選択アイテムを表示する if(!state.isScrollInProgress) { Text(text = "selected item = ${items[state.selectedOption]}") }
以上です。
