Окна выбора времени

Выбор времени позволяет пользователям выбирать время. Вы можете использовать композиции TimePicker и TimeInput, чтобы реализовать в приложении выбор времени.

Типы

Существует два типа выбора времени:

• Циферблат. Пользователи могут задавать время, перемещая стрелку по циферблату.
• Ввод. Пользователи могут задавать время с помощью клавиатуры.

На изображении ниже слева показан селектор времени с циферблатом, а справа – селектор времени с полем ввода.

Поверхность 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. Включите в проекте десахаризацию API Java 8+, чтобы использовать java.time.LocalTime во всех версиях Android.
• Composable-функция TimePicker показывает окно выбора времени, принимая timePickerState в качестве параметра.
• В реализации есть две кнопки: одна для подтверждения выбора, а другая – для закрытия инструмента выбора.

Вот как это будет выглядеть:

Окно выбора времени

В этом фрагменте кода показано, как реализовать простой выбор времени с помощью поля ввода.

@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.
• Параметр is24Hour для timePickerState явно задан как true. По умолчанию задано значение false.

Вот как это будет выглядеть:

Используйте состояние

Чтобы использовать время, выбранное пользователем в окне выбора времени, передайте соответствующий параметр TimePickerState в функцию onConfirm. Родительская composable-функция может получить доступ к выбранному времени с помощью 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

Затем вы можете вызвать composable-функцию следующим образом:

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

Подробную информацию можно найти в полной реализации в приложении "Фрагменты".

Дополнительные ресурсы

• TimePicker
• Material Design - Time Pickers