Zeitauswahl

Mit Zeitauswahlen können Nutzer eine Uhrzeit auswählen. Mit den Composables TimePicker und TimeInput können Sie eine Zeitauswahl in Ihrer App implementieren.

Typen

Es gibt zwei Arten von Zeitselektoren:

  • Zifferblatt: Nutzer können eine Zeit festlegen, indem sie einen Griff auf einem Zifferblatt bewegen.
  • Eingabe: Nutzer können eine Uhrzeit über die Tastatur eingeben.

Das folgende Bild zeigt links ein Beispiel für eine Zeit-Auswahl mit Drehregler und rechts eine Zeit-Auswahl mit Eingabefeld:

Ein Zifferblatt und eine Eingabe für die Zeitauswahl.
Abbildung 1. Ein Zifferblatt und eine Eingabe für die Uhrzeitauswahl.

API-Oberfläche

Verwenden Sie zum Implementieren einer Zeitauswahl entweder die Composable TimePicker oder TimeInput:

  • TimePicker: Implementiert eine Zeitselektierung mit Drehregler.
  • TimeInput: Implementiert eine Zeit-Auswahl für die Eingabe.

Status

Sowohl für TimePicker als auch für TimeInput müssen Sie auch ein TimePickerState übergeben. So können Sie die standardmäßig ausgewählte Zeit festlegen, die in der Auswahl angezeigt wird. Außerdem wird die Zeit erfasst, die der Nutzer über die Auswahlfunktion ausgewählt hat.

Dialogfeld

Die Zeit auswählen können Sie in Dialogfeldern. In den Beispielen in diesem Leitfaden werden keine Dialogfelder verwendet. Beispiele, in denen Dialogfelder verwendet werden, finden Sie im Leitfaden Dialogfelder für Zeitselektoren.

Uhrzeitauswahl

In diesem Snippet wird gezeigt, wie eine einfache Zeitselektierung mit Drehregler implementiert wird.

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

Beachten Sie Folgendes in diesem Snippet:

  • Mit Calendar.getInstance() wird TimePickerState mit der aktuellen Uhrzeit initialisiert.
    • In diesem Beispiel wird java.util.Calendar verwendet. Aktivieren Sie die Entzuckerung von Java 8+-APIs in Ihrem Projekt, um alternativ java.time.LocalTime auf allen Android-Versionen zu verwenden.
  • Die zusammensetzbare Funktion TimePicker zeigt die Uhrzeitauswahl an und verwendet timePickerState als Parameter.
  • Die Implementierung umfasst zwei Schaltflächen: eine zum Bestätigen der Auswahl und eine zum Schließen der Auswahl.

Diese Implementierung sieht so aus:

Eine Uhrzeitauswahl mit Drehregler. Der Nutzer kann mit dem Drehrad eine Uhrzeit auswählen.
Abbildung 2: Eine Wähltastatur zur Auswahl der Uhrzeit.

Eingabe für die Zeitauswahl

Dieses Snippet zeigt, wie Sie eine einfache Zeitachse mit Eingabestil implementieren.

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

Wichtige Punkte bei dieser Implementierung:

  • Die Struktur ist im Wesentlichen dieselbe wie beim Tachometer-Zeitpicker. Der Hauptunterschied besteht in der Verwendung von TimeInput anstelle von TimePicker.
  • Der Parameter is24Hour für timePickerState ist explizit auf true festgelegt. Standardmäßig ist dieser Wert false.

Diese Implementierung sieht so aus:

Eine Eingabe für die Zeitauswahl. Der Nutzer kann eine Uhrzeit über Textfelder eingeben.
Abbildung 3: Eine Eingabe-Zeitauswahl.

Zustand verwenden

Wenn Sie die vom Nutzer in einer Zeitauswahl ausgewählte Zeit verwenden möchten, übergeben Sie die entsprechende TimePickerState an Ihre onConfirm-Funktion. Die übergeordnete Composable-Funktion kann dann über TimePickerState.hour und TimePickerState.minute auf die ausgewählte Zeit zugreifen.

Das folgende Snippet zeigt, wie das geht:

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

Sie können die Composable dann so aufrufen:

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

Weitere Informationen finden Sie in der vollständigen Implementierung in der Snippets-App.

Zusätzliche Ressourcen