Zeitauswahl

Mit Zeitauswahl-Elementen 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 Zeitauswahl:

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

Die folgende Abbildung zeigt links ein Beispiel für eine Zeitauswahl mit Zifferblatt und rechts eine Zeitauswahl mit Eingabe:

Ein Drehregler und eine Zeitauswahl.
Abbildung 1. Ein Zifferblatt und eine Zeitauswahl.

API-Oberfläche

Verwende zum Implementieren einer Zeitauswahl entweder die zusammensetzbare Funktion TimePicker oder TimeInput:

  • TimePicker: Implementiert eine Zeitauswahl mit Zifferblatt.
  • TimeInput: Implementiert eine Zeitauswahl für die Eingabe.

Status

Sowohl für TimePicker als auch für TimeInput müssen Sie auch eine TimePickerState übergeben. Damit 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 mit der Auswahl ausgewählt hat.

Dialogfeld

Uhrzeitauswahlen werden 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 Zeitauswahl.

Uhrzeitauswahl per Zifferblatt

Dieses Snippet zeigt, wie Sie eine einfache Zeitauswahl mit Zifferblatt implementieren.

@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 in diesem Snippet Folgendes:

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

Diese Implementierung sieht so aus:

Eine Uhrzeitauswahl mit Zifferblatt. Der Nutzer kann mit dem Drehregler eine Zeit auswählen.
Abbildung 2: Eine Uhrzeitauswahl mit Zifferblatt.

Uhrzeitauswahl für Eingabe

Dieses Snippet zeigt, wie Sie eine einfache Zeitauswahl im 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 bei der Zeitauswahl mit Zifferblatt. Der Hauptunterschied besteht darin, dass 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 Zeitauswahl für die Eingabe. Der Nutzer kann eine Uhrzeit über Textfelder eingeben.
Abbildung 3: Eine Zeitauswahl für die Eingabe.

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 zusammensetzbare 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 zusammensetzbare Funktion 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