時刻選択ツール: ユーザーが時刻を選択できます。Google Chat では
TimePicker
コンポーザブルと TimeInput
コンポーザブルを使用して時間を実装する
選択します
型
時間選択ツールには次の 2 種類があります。
- ダイヤル: ダイヤルの周りのハンドルを動かして時刻を設定できます。
- 入力: キーボードを使用して時刻を設定できます。
次の図は、左側のダイヤル時間選択ツールの例を示しています。 右側に入力時間選択ツールがあります。
![ダイヤルと入力時刻選択ツール。](https://developer.android.com/static/develop/ui/compose/images/components/timepickers.png?hl=ja)
API サーフェス
時間選択ツールを実装するには、TimePicker
または TimeInput
を使用します。
コンポーザブル:
TimePicker
: ダイヤル時間選択ツールを実装します。TimeInput
: 入力時刻選択ツールを実装します。
状態
TimePicker
と TimeInput
の両方で、
TimePickerState
。デフォルトの表示時刻を設定できます。
クリックします。また、
選択します。
ダイアログ
時刻選択ツールがダイアログに表示されます。このガイドの例では、ダイアログは使用していません。 ダイアログを使用する例については、時間選択ツールのダイアログのガイドをご覧ください。
ダイヤル時間選択ツール
このスニペットは、基本的なダイヤル時間選択ツールを実装する方法を示しています。
@Composable fun DialExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
このスニペットでは、次の点を考えます。
Calendar.getInstance()
は、TimePickerState
を現在の あります。- この例では
java.util.Calendar
を使用しています。Java を有効にする 8 種類以上の API の desugar をプロジェクト内で使用する すべての Android バージョンでjava.time.LocalTime
。
- この例では
TimePicker
コンポーザブルによって時間選択ツールが表示され、 パラメータとしてtimePickerState
。- 実装には 2 つのボタンがあります。1 つは選択を確定するボタン、もう 1 つは選択を確定するボタン、もう 1 つは選択を確定するボタン、 もう一つは選択ツールを閉じることです
これを実装すると次のようになります。
![ダイヤル時間選択ツール。ユーザーはダイヤルで時刻を選択できます。](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-dial.png?hl=ja)
入力時刻選択ツール
このスニペットは、基本的な入力スタイルの時間選択ツールを実装する方法を示しています。
@Composable fun InputExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimeInput( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
この実装の要点は次のとおりです。
- 構造は基本的にダイヤル時刻選択ツールと同じですが、
違いは、
TimePicker
ではなくTimeInput
を使用していることです。 timePickerState
のis24Hour
パラメータは明示的にtrue
に設定されています。 デフォルト値はfalse
です。
これを実装すると次のようになります。
![入力時刻選択ツール。ユーザーはテキスト フィールドを使用して時刻を入力できます。](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-input.png?hl=ja)
状態を使用する
ユーザーが時間選択ツールで選択した時刻を使用するには、
onConfirm
関数に適切な TimePickerState
を追加します。親
コンポーザブルは、TimePickerState.hour
を介して選択された時間にアクセスし、
TimePickerState.minute
。
次のスニペットは、その方法を示しています。
@Composable fun DialUseStateExample( onConfirm: (TimePickerState) -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = { onConfirm(timePickerState) }) { Text("Confirm selection") } } }
この場合、次のようにコンポーザブルを呼び出すことができます。
var selectedTime: TimePickerState? by remember { mutableStateOf(null) }
// ...
DialUseStateExample(
onDismiss = {
showDialExample = false
},
onConfirm = {
time ->
selectedTime = time
showDialExample = false
},
)
// ...
if (selectedTime != null) {
val cal = Calendar.getInstance()
cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
cal.set(Calendar.MINUTE, selectedTime!!.minute)
cal.isLenient = false
Text("Selected time = ${formatter.format(cal.time)}")
} else {
Text("No time selected.")
}
詳しくは、スニペットの完全な実装をご覧ください アプリ。