Selektory czasu

Selektory czasu umożliwiają użytkownikom wybieranie godziny. Aby zaimplementować w aplikacji selektor godziny, możesz użyć funkcji kompozycyjnych TimePicker i TimeInput.

Typy

Istnieją 2 rodzaje selektorów czasu:

  • Tarcza: umożliwia użytkownikom ustawianie godziny przez przesuwanie uchwytu wokół tarczy.
  • Wprowadzanie: umożliwia użytkownikom ustawianie godziny za pomocą klawiatury.

Na obrazie poniżej po lewej stronie widać przykład selektora godziny z tarczą, a po prawej – selektora godziny z polem do wpisywania:

Tarcza i selektor czasu.
Rysunek 1. Tarcza i selektor godziny.

Interfejs API

Aby zaimplementować selektor godziny, użyj funkcji kompozycyjnej TimePicker lub TimeInput:

  • TimePicker: implementuje selektor czasu z tarczą.
  • TimeInput: implementuje selektor czasu wejściowego.

Stan

W przypadku obu tych wartości (TimePicker i TimeInput) musisz też przekazać parametr TimePickerState. Dzięki temu możesz ustawić domyślny wybrany czas, który będzie wyświetlany w selektorze. Rejestruje też czas wybrany przez użytkownika za pomocą selektora.

Dialog

Selektory godziny pojawiają się w oknach. Przykłady w tym przewodniku nie używają okien. Przykłady, w których używane są okna, znajdziesz w przewodniku Okna selektorów czasu.

Selektor godziny z tarczą

Ten fragment kodu pokazuje, jak wdrożyć podstawowy selektor godziny z tarczą.

@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")
        }
    }
}

Zwróć uwagę na te elementy we fragmencie kodu:

  • Calendar.getInstance() inicjuje TimePickerState z bieżącym czasem.
  • Element kompozycyjny TimePicker wyświetla selektor godziny, przyjmując timePickerState jako parametr.
  • Implementacja obejmuje 2 przyciski: jeden do potwierdzenia wyboru i drugi do zamknięcia selektora.

Implementacja wygląda tak:

Selektor godziny z tarczą. Użytkownik może wybrać godzinę za pomocą tarczy.
Rysunek 2. Selektor godziny z tarczą.

Selektor godziny wejściowej

Ten fragment kodu pokazuje, jak wdrożyć podstawowy selektor czasu w stylu pola tekstowego.

@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ć podczas wdrażania:

  • Struktura jest zasadniczo taka sama jak w przypadku selektora czasu z tarczą, a główną różnicą jest użycie TimeInput zamiast TimePicker.
  • Parametr is24Hour dla timePickerState jest ustawiony na true. Domyślna wartość to false.

Implementacja wygląda tak:

Selektor czasu wprowadzania. Użytkownik może wpisać godzinę, korzystając z pól tekstowych.
Rysunek 3. Selektor czasu.

Użyj stanu

Aby wykorzystać czas wybrany przez użytkownika w selektorze godziny, przekaż odpowiedni parametr TimePickerState do funkcji onConfirm. Nadrzędny element kompozycyjny może następnie uzyskać dostęp do wybranego czasu za pomocą funkcji TimePickerState.hour i TimePickerState.minute.

Poniższy fragment kodu 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")
        }
    }
}

Następnie możesz wywołać funkcję kompozycyjną 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 informacji znajdziesz w pełnej implementacji w aplikacji Snippets.

Dodatkowe materiały