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

Средства выбора времени предоставляют пользователям возможность выбрать время. Вы можете использовать составные элементы 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.
• Компонуемый элемент 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

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

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

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

• TimePicker
• Материальный дизайн — выбор времени

Средства выбора времени предоставляют пользователям возможность выбрать время. Вы можете использовать составные элементы 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.
• Компонуемый элемент 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

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

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

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

• TimePicker
• Материальный дизайн — выбор времени