Выбор времени

Выбор времени предоставляет пользователям возможность выбора времени. Вы можете использовать TimePicker и TimeInput composables для реализации выбора времени в вашем приложении.

Типы

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

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

На следующем рисунке слева показан пример выбора времени набора номера, а справа — выбор времени ввода:

Циферблат и выбор времени ввода.
Рисунок 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 desugaring в вашем проекте, чтобы в качестве альтернативы использовать java.time.LocalTime на всех версиях Android.
  • Составной элемент 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")
        }
    }
}
TimePickers.kt

Ключевые моменты, которые следует отметить при реализации этой реализации:

  • Структура по сути та же, что и у средства выбора времени набора номера, главное отличие заключается в использовании TimeInput вместо TimePicker .
  • Параметр is24Hour для timePickerState явно установлен в 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.")
}

Более подробную информацию см. в полной реализации приложения snippets .

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