Dialogfelder für die Zeitauswahl

Die Zeitauswahl wird oft in Dialogfeldern angezeigt. Sie können eine relativ allgemeine und minimale Implementierung eines Dialogfelds verwenden oder ein benutzerdefiniertes Dialogfeld mit mehr Flexibilität implementieren.

Weitere Informationen zu Dialogen im Allgemeinen, einschließlich der Verwendung des Status der Uhrzeitauswahl, finden Sie im Leitfaden zur Uhrzeitauswahl.

Einfaches Beispiel

Am einfachsten erstellen Sie einen Dialog für die Uhrzeitauswahl, indem Sie ein Composeable mit AlertDialog erstellen. Das folgende Snippet zeigt ein Beispiel für einen relativ minimalen Dialog mit diesem Ansatz:

@Composable
fun DialWithDialogExample(
    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,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

Beachten Sie die wichtigsten Punkte in diesem Snippet:

1. Das DialWithDialogExample-Element umschließt TimePicker in einem Dialogfeld.
2. TimePickerDialog ist ein benutzerdefiniertes Composeable, mit dem eine AlertDialog mit den folgenden Parametern erstellt wird:
   • onDismiss: Eine Funktion, die aufgerufen wird, wenn der Nutzer den Dialog schließt (über die Schaltfläche „Schließen“ oder durch Zurückgehen).
   • onConfirm: Eine Funktion, die aufgerufen wird, wenn der Nutzer auf die Schaltfläche „OK“ klickt.
   • content: Eine zusammensetzbare Funktion, in der die Zeitauswahl im Dialogfeld angezeigt wird.
3. AlertDialog enthält:
   • Eine Schaltfläche zum Schließen mit der Beschriftung „Schließen“.
   • Eine Bestätigungsschaltfläche mit der Beschriftung „OK“.
   • Der Inhalt der Zeitauswahl, der als Parameter text übergeben wird.
4. Die DialWithDialogExample initialisiert die TimePickerState mit der aktuellen Uhrzeit und übergibt sie sowohl an die TimePicker- als auch an die onConfirm-Funktion.

Abbildung 1: Eine Uhrzeitauswahl in einem AlertDialog.

Erweitertes Beispiel

In diesem Snippet wird eine erweiterte Implementierung eines anpassbaren Dialogfelds für die Uhrzeitauswahl in Jetpack Compose veranschaulicht.

@Composable
fun AdvancedTimePickerExample(
    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,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

Beachten Sie die wichtigsten Punkte in diesem Snippet:

1. Die zusammensetzbare Funktion AdvancedTimePickerExample erstellt ein anpassbares Dialogfeld für die Zeitauswahl.
2. Es verwendet ein Dialog-kompositbares Element, das flexibler ist als AlertDialog.
3. Das Dialogfeld enthält einen anpassbaren Titel und eine Ein/Aus-Schaltfläche zum Wechseln zwischen Wähl- und Eingabemodus.
4. Mit Surface werden dem Dialogfeld Form und Höhe zugewiesen. IntrinsicSize.Min gibt dabei sowohl die Breite als auch die Höhe an.
5. Das Column- und das Row-Layout stellen die Strukturkomponenten des Dialogfelds bereit.
6. Im Beispiel wird der Auswahlmodus mit showDial verfolgt.
   • Mit einem IconButton können Sie zwischen den Modi wechseln. Das Symbol wird entsprechend aktualisiert.
   • Der Inhalt des Dialogfelds wechselt je nach Status showDial zwischen TimePicker und TimeInput.

Diese erweiterte Implementierung bietet ein äußerst anpassbares und wiederverwendbares Dialogfeld für die Uhrzeitauswahl, das sich an verschiedene Anwendungsfälle in Ihrer App anpassen lässt.

Diese Implementierung sieht so aus:

Abbildung 2: Eine Uhrzeitauswahl in einem benutzerdefinierten Dialogfeld.

Weitere Informationen

• Leitfaden für Zeitauswahl
• Material Design – Zeitauswahl