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

Окна выбора времени позволяют пользователям указывать время. Чтобы реализовать выбор времени в приложении, можно использовать composable-функции TimePicker и TimeInput.

Типы

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

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

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

Циферблат и окно выбора времени.
Рисунок 1. Циферблат и поле ввода времени.

API surface

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

Вот как это выглядит:

Окно выбора времени в виде циферблата. Пользователь может выбрать время с помощью циферблата.
Рисунок 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")
        }
    }
}

Важные моменты, на которые следует обратить внимание:

  • Структура в основном такая же, как у циферблата, но вместо TimePicker используется TimeInput.
  • Параметр is24Hour для timePickerState явно задан как true. По умолчанию используется значение false.

Вот как это выглядит:

Окно выбора времени. Пользователь может ввести время в текстовые поля.
Рисунок 3. Окно выбора времени.

Используйте штат

Чтобы использовать время, выбранное пользователем в окне выбора времени, передайте соответствующий объект 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")
        }
    }
}

Затем вы можете вызвать 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.")
}

Подробную информацию вы найдете в полном руководстве по реализации в приложении Snippets.

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