Zeitauswahl

Mit Uhrzeitauswahlen können Nutzer eine Uhrzeit auswählen. Mit den Composeable-Elementen TimePicker und TimeInput können Sie eine Zeitauswahl in Ihrer App implementieren.

Typen

Es gibt zwei Arten von Zeitauswahl:

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

Das folgende Bild zeigt ein Beispiel für eine Auswahluhr auf der linken Seite und eine Eingabeuhr auf der rechten Seite:

Ein Zifferblatt und eine Eingabezeitauswahl.
Abbildung 1: Ein Zifferblatt und eine Uhrzeitauswahl.

API-Oberfläche

Verwenden Sie zum Implementieren einer Zeitauswahl entweder das TimePicker- oder das TimeInput-Kompositelement:

  • TimePicker: Implementiert eine Wähluhr zur Zeitauswahl.
  • TimeInput: Implementiert eine Zeitauswahl.

Bundesland

Für TimePicker und TimeInput müssen Sie außerdem eine TimePickerState übergeben. So können Sie die Standardzeit festlegen, die in der Auswahl angezeigt wird. Außerdem wird die Uhrzeit erfasst, die der Nutzer über die Auswahl getroffen hat.

Dialogfeld

Die Zeitauswahl wird in Dialogfeldern angezeigt. In den Beispielen in diesem Leitfaden werden keine Dialogfelder verwendet. Beispiele, in denen Dialogfelder verwendet werden, finden Sie im Leitfaden Dialogfelder für die Zeitauswahl.

Uhrzeitauswahl für Anrufe

In diesem Snippet wird gezeigt, wie eine einfache Wählscheibe für die Uhrzeit 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")
        }
    }
}
TimePickers.kt

Beachten Sie in diesem Snippet Folgendes:

  • Calendar.getInstance() initialisiert TimePickerState mit der aktuellen Uhrzeit.
    • In diesem Beispiel wird java.util.Calendar verwendet. Aktivieren Sie die Java 8-API-Entsugaring in Ihrem Projekt, um java.time.LocalTime alternativ auf allen Android-Versionen zu verwenden.
  • Die zusammensetzbare Funktion TimePicker zeigt die Zeitauswahl 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 Einwahlzeitauswahl. Der Nutzer kann über den Ring eine Uhrzeit auswählen.
Abbildung 2: Eine Zifferblattzeitauswahl.

Uhrzeitauswahl eingeben

Dieses Snippet veranschaulicht, wie eine einfache Eingabestil-Zeitauswahl implementiert wird.

@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

Wichtige Punkte bei dieser Implementierung:

  • Die Struktur ist im Wesentlichen mit der der Zifferblattzeitauswahl identisch. Der Hauptunterschied besteht darin, dass TimeInput anstelle von TimePicker verwendet wird.
  • Der Parameter is24Hour für timePickerState ist explizit auf true festgelegt. Der Standardwert ist false.

Diese Implementierung sieht so aus:

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

Status verwenden

Übergeben Sie den entsprechenden TimePickerState an Ihre onConfirm-Funktion, um die vom Nutzer in einer Zeitauswahl ausgewählte Zeit zu nutzen. Das übergeordnete Composeable 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")
        }
    }
}
TimePickers.kt

Sie könnten das Composeable 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.

Weitere Informationen