時刻選択ツール

時刻選択ツールを使用すると、ユーザーが時刻を選択できます。`TimePicker`TimePickerと `TimeInput`TimeInputコンポーザブルを使用して、アプリに時刻 選択ツールを実装できます。

型

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

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

次の画像は、左側にダイヤル式の時刻選択ツール、右側に入力式の時刻選択ツールの例を示しています。

ダイヤルと入力時間選択ツール。
図 1.ダイヤル式の時刻選択ツールと入力式の時刻選択ツール。

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 の脱糖を有効にすると、すべての Android バージョンで java.time.LocalTimeを使用できます。
  • TimePicker コンポーザブルは、timePickerState をパラメータとして受け取り、時刻選択ツールを表示します。
  • この実装には、選択内容を確定するボタンと選択ツールを閉じるボタンの 2 つが含まれています。

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

ダイヤル式の時刻選択ツール。ユーザーはダイヤルを使用して時間を選択できます。
図 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.入力式の時刻選択ツール。

状態を使用する

時刻選択ツールでユーザーが選択した時刻を使用するには、適切な TimePickerState を onConfirm 関数に渡します。親コンポーザブルは、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.")
}

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

参考情報