Selektory czasu

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

Weź pod uwagę te kwestie:

  • Calendar.getInstance() inicjuje TimePickerState z bieżącym obecnie się znajdujesz.
  • Funkcja kompozycyjna TimePicker wyświetla selektor czasu, przechodząc timePickerState 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.
Rysunek 2. selektor godziny wybierania numeru.

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

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 zamiast TimePicker.
  • Parametr is24Hour elementu timePickerState ma wyraźnie wartość true. Domyślnie ta wartość wynosi false.

Implementacja wygląda tak:

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

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

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

Dodatkowe materiały