Средства выбора времени предоставляют пользователям возможность выбрать время. Вы можете использовать составные элементы 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") } } }
Рассмотрим в этом фрагменте следующее:
-
Calendar.getInstance()
инициализируетTimePickerState
текущим временем.- В этом примере используется
java.util.Calendar
. Включите очистку API Java 8+ в своем проекте, чтобы альтернативно использоватьjava.time.LocalTime
во всех версиях Android.
- В этом примере используется
- Компонуемый элемент
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") } } }
Ключевые моменты, на которые следует обратить внимание в этой реализации:
- Структура по существу аналогична средству выбора времени набора, с основным отличием в использовании
TimeInput
вместоTimePicker
. - Параметру
is24Hour
дляtimePickerState
явно присвоено значениеtrue
. По умолчанию это значение равноfalse
.
Эта реализация выглядит следующим образом:
Используйте состояние
Чтобы использовать время, выбранное пользователем в средстве выбора времени, передайте соответствующий 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") } } }
Затем вы можете вызвать компоновку следующим образом:
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 .