Zeitauswahl

Über die Zeitauswahl können Nutzer eine Zeit auswählen. Mit den Composeables TimePicker und TimeInput können Sie eine Zeitauswahl in Ihrer App implementieren.

Typen

Es gibt zwei Arten der Zeitauswahl:

  • Wählen: Damit können Nutzer eine Uhrzeit festlegen, indem sie einen Ziehpunkt um ein Zifferblatt bewegen.
  • Eingabe: Damit können Nutzer eine Uhrzeit über die Tastatur festlegen.

In der folgenden Abbildung sehen Sie links ein Beispiel für eine Einwahlzeitauswahl. eine Eingabezeitauswahl rechts:

Ein Zifferblatt und eine Eingabezeitauswahl.
Abbildung 1: Ein Wählrad und eine Zeitauswahl für die Eingabe

API-Oberfläche

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

  • TimePicker: Implementiert eine Einwahlzeitauswahl.
  • 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

Betrachten Sie in diesem Snippet Folgendes:

  • Calendar.getInstance() initialisiert TimePickerState mit der aktuellen Uhrzeit.
  • Die zusammensetzbare Funktion TimePicker zeigt die Zeitauswahl an und nimmt timePickerState als Parameter entgegen.
  • Die Implementierung umfasst zwei Schaltflächen: eine zur Bestätigung der Auswahl und um die Auswahl zu schließen.

Diese Implementierung sieht so aus:

Eine Einwahlzeitauswahl. Der Nutzer kann eine Uhrzeit über das Zifferblatt auswählen.
Abbildung 2: Eine Einwahloption.

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 Eingabezeitauswahl. 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 Element zusammensetzbare Funktion kann dann über TimePickerState.hour auf die ausgewählte Zeit zugreifen und TimePickerState.minute.

Das folgende Snippet veranschaulicht, wie dies funktioniert:

@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 im Abschnitt zur vollständigen Implementierung in den Snippets. App.

Weitere Informationen