Selektory czasu

Selektory czasu umożliwiają użytkownikom wybór czasu. Aby zaimplementować selektor czasu w aplikacji, możesz użyć komponentów TimePicker i TimeInput.

Typy

Istnieją 2 typy selektora czasu:

  • Pokrętło: pozwala użytkownikom ustawiać czas przez przesuwanie uchwytu po pokrętle.
  • Wprowadzanie: pozwala użytkownikom ustawić godzinę przy użyciu klawiatury.

Na poniższym obrazie po lewej stronie znajduje się selektor czasu na tarczy, a po prawej – selektor czasu w polu wejściowym:

Pokrętło i selektor czasu.
Rysunek 1. Tarcza i selektor godziny.

Interfejs API

Aby zaimplementować selektor czasu, użyj TimePicker lub TimeInput funkcja kompozycyjna:

  • TimePicker: implementuje selektor czasu wybierania numeru.
  • TimeInput: implementuje selektor czasu.
.

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. Zapisuje też czas wybrany przez użytkownika za pomocą selektora.

Dialog

Selektory czasu pojawiają się w oknach dialogowych. Przykłady w tym przewodniku nie korzystają z dialogów. Przykłady dialogów znajdziesz w przewodniku Dialogi dla selektorów czasu.

Selektor godziny w dialerze

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")
        }
    }
}
TimePickers.kt

Weź pod uwagę te kwestie:

  • Calendar.getInstance() inicjuje TimePickerState z bieżącym obecnie się znajdujesz.
  • Element kompozytywny TimePicker wyświetla selektor czasu, przyjmując timePickerState jako parametr.
  • Implementacja zawiera 2 przyciski: jeden do potwierdzenia wyboru i drugi do zamknięcia selektora.

Ta implementacja wygląda tak:

Selektor godziny w dialu. Użytkownik może wybrać godzinę za pomocą pokrętła.
Rysunek 2. Selektor godziny w dialu.

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")
        }
    }
}
TimePickers.kt

Ważne kwestie dotyczące tej implementacji:

  • Struktura jest w podstawie taka sama jak w przypadku selektora czasu na tarczy, z tym, że zamiast atrybutu TimePicker jest używany atrybut TimeInput.
  • Parametr is24Hour w przypadku timePickerState jest jawnie ustawiony na true. Domyślnie ta wartość wynosi false.

Ta implementacja wygląda tak:

Selektor czasu Użytkownik może wpisać godzinę, używając pól tekstowych.
Rysunek 3. Wejściowy selektor czasu.

Użyj stanu

Aby użyć czasu wybranego przez użytkownika w selektorze czasu, przekaż odpowiednią wartość 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")
        }
    }
}
TimePickers.kt

Następnie możesz wywołać komponent w ten sposób:

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

Dodatkowe materiały