Selektory czasu umożliwiają użytkownikom wybranie godziny. Dostępne opcje
użyj elementów kompozycyjnych TimePicker
i TimeInput
, aby zaimplementować czas
w swojej aplikacji.
Typy
Są 2 rodzaje selektora godziny:
- Telefon: pozwala użytkownikom ustawić godzinę za pomocą uchwytu wokół pokrętła.
- Wprowadzanie: pozwala użytkownikom ustawić godzinę przy użyciu klawiatury.
Na ilustracji po lewej stronie pokazano przykładowy selektor czasu wybierania numeru. selektor czasu wprowadzania po prawej stronie:
![Selektor i selektor godziny.](https://developer.android.com/static/develop/ui/compose/images/components/timepickers.png?hl=pl)
Interfejs API
Aby zaimplementować selektor czasu, użyj TimePicker
lub TimeInput
funkcja kompozycyjna:
TimePicker
: implementuje selektor czasu wybierania numeru.TimeInput
: implementuje selektor czasu wprowadzania danych.
Region
Zarówno w przypadku TimePicker
, jak i TimeInput
musisz także przekazać
TimePickerState
. Pozwala ono ustawić domyślnie wybrany czas wyświetlania
w selektorze. Rejestruje również czas wybrany przez użytkownika za pomocą funkcji
.
Dialog
Selektory czasu pojawiają się w oknach dialogowych. W przykładach w tym przewodniku nie ma okien dialogowych. Przykłady, w których są one używane, znajdziesz w przewodniku Okna wyboru czasu.
Wybierz godzinę
Ten fragment kodu pokazuje, jak wdrożyć podstawowy selektor czasu wybierania godziny.
@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") } } }
Weź pod uwagę te kwestie:
Calendar.getInstance()
inicjujeTimePickerState
z bieżącym obecnie się znajdujesz.- W tym przykładzie użyto elementu
java.util.Calendar
. Włącz obsługę języka Java ponad 8 interfejsów API do usuwania cukru w projekcie,java.time.LocalTime
na wszystkich wersjach Androida.
- W tym przykładzie użyto elementu
- Funkcja kompozycyjna
TimePicker
wyświetla selektor czasu, przechodząctimePickerState
jako parametr. - Implementacja zawiera 2 przyciski: 1 do potwierdzenia wyboru oraz lub zamknij selektor.
Implementacja wygląda tak:
![Selektor godziny wybierania numeru. Użytkownik może wybrać godzinę za pomocą pokrętła.](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-dial.png?hl=pl)
Selektor czasu wprowadzania danych
Ten fragment kodu pokazuje, jak wdrożyć selektor czasu podstawowego stylu wprowadzania danych.
@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") } } }
Najważniejsze kwestie, o których należy pamiętać w przypadku tej implementacji:
- Struktura jest zasadniczo taka sama jak selektor czasu wybierania, z głównym
różnica polega na użyciu
TimeInput
zamiastTimePicker
. - Parametr
is24Hour
elementutimePickerState
ma wyraźnie wartośćtrue
. Domyślnie ta wartość wynosifalse
.
Implementacja wygląda tak:
![Wejściowy selektor czasu. Użytkownik może wpisać godzinę, używając pól tekstowych.](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-input.png?hl=pl)
Użyj stanu
Aby wykorzystać czas wybrany przez użytkownika w selektorze czasu, przekaż parametr
odpowiednie TimePickerState
do funkcji onConfirm
. Rodzic
funkcja kompozycyjna będzie mieć wtedy dostęp do wybranego czasu za pomocą funkcji TimePickerState.hour
i
TimePickerState.minute
Fragment kodu poniżej pokazuje, jak to zrobić:
@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") } } }
Możesz w ten sposób wywołać funkcję kompozycyjną:
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.")
}
Więcej szczegółów znajdziesz w pełnej implementacji we fragmentach kodu