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 Schieberegler 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ählscheibe für die Uhrzeit.
  • TimeInput: Implementiert eine Zeitauswahl.

Bundesland

Sowohl für TimePicker als auch für TimeInput muss außerdem ein TimePickerState übergeben werden. 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

Uhrzeitauswahlen werden in Dialogfeldern angezeigt. In den Beispielen in diesem Leitfaden werden keine Dialogfelder verwendet. Beispiele für Dialogfelder finden Sie in der Anleitung Dialogfelder für Zeitauswahlen.

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 nimmt timePickerState als Parameter entgegen.
  • 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 Zifferblattzeitauswahl. Der Nutzer kann eine Uhrzeit über das Zifferblatt auswählen.
Abbildung 2: Eine Zifferblattzeitauswahl.

Uhrzeitauswahl eingeben

In diesem Snippet wird gezeigt, wie eine einfache Zeitauswahl im Eingabestil 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 entspricht im Wesentlichen der der Zifferblattzeitauswahl, wobei TimeInput anstelle von TimePicker verwendet wird.
  • 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 für die Zeitauswahl.

Status verwenden

Wenn Sie die Uhrzeit verwenden möchten, die der Nutzer in einer Zeitauswahl ausgewählt hat, übergeben Sie die entsprechende TimePickerState an die onConfirm-Funktion. 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