このページは Cloud Translation API によって翻訳されました。

時刻選択ツール

時刻選択ツール: ユーザーが時刻を選択できます。Google Chat では TimePicker コンポーザブルと TimeInput コンポーザブルを使用して時間を実装する選択します

型

時間選択ツールには次の 2 種類があります。

ダイヤル: ダイヤルの周りのハンドルを動かして時刻を設定できます。
入力: キーボードを使用して時刻を設定できます。

次の図は、左側のダイヤル時間選択ツールの例を示しています。右側に入力時間選択ツールがあります。

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")
        }
    }
}TimePickers.kt

このスニペットでは、次の点を考えます。

Calendar.getInstance() は、TimePickerState を現在のあります。
- この例では java.util.Calendar を使用しています。Java を有効にする 8 種類以上の API の desugar をプロジェクト内で使用するすべての Android バージョンで java.time.LocalTime。
TimePicker コンポーザブルによって時間選択ツールが表示され、パラメータとして timePickerState。
実装には 2 つのボタンがあります。1 つは選択を確定するボタン、もう 1 つは選択を確定するボタン、もう 1 つは選択を確定するボタン、もう一つは選択ツールを閉じることです

これを実装すると次のようになります。

ダイヤル時間選択ツール。ユーザーはダイヤルで時刻を選択できます。 — **図 2.** ダイヤル時間選択ツール

入力時刻選択ツール

このスニペットは、基本的な入力スタイルの時間選択ツールを実装する方法を示しています。

@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")
        }
    }
}TimePickers.kt

この実装の要点は次のとおりです。

構造は基本的にダイヤル時刻選択ツールと同じですが、違いは、TimePicker ではなく TimeInput を使用していることです。
timePickerState の is24Hour パラメータは明示的に true に設定されています。デフォルト値は false です。

これを実装すると次のようになります。

入力時刻選択ツール。ユーザーはテキストフィールドを使用して時刻を入力できます。 — **図 3.** 入力時刻選択ツール。

状態を使用する

ユーザーが時間選択ツールで選択した時刻を使用するには、 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")
        }
    }
}TimePickers.kt

この場合、次のようにコンポーザブルを呼び出すことができます。

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.")
}

詳しくは、スニペットの完全な実装をご覧くださいアプリ。