Dialogfelder für die Zeitauswahl

Zeitauswahl-Tools werden häufig in Dialogfeldern angezeigt. Du kannst eine relativ allgemeine und minimale Implementierung eines Dialogfelds verwenden oder ein benutzerdefiniertes Dialogfeld mit mehr Flexibilität implementieren.

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

Einfaches Beispiel

Am einfachsten lässt sich ein Dialogfeld für die Zeitauswahl erstellen, indem Sie eine zusammensetzbare Funktion erstellen, die AlertDialog implementiert. Das folgende Snippet zeigt ein Beispiel für einen relativ einfachen 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() }
    )
}

Beachten Sie die folgenden wichtigen Punkte in diesem Snippet:

  1. Das Compose-Element DialWithDialogExample umschließt TimePicker in einem Dialogfeld.
  2. TimePickerDialog ist eine benutzerdefinierte zusammensetzbare Funktion, die ein AlertDialog mit den folgenden Parametern erstellt:
    • onDismiss: Eine Funktion, die aufgerufen wird, wenn der Nutzer das Dialogfeld schließt (über die Schaltfläche „Schließen“ oder die Zurück-Navigation).
    • onConfirm: Eine Funktion, die aufgerufen wird, wenn der Nutzer auf „OK“ klickt.
    • content: Ein Composable, das die Zeitauswahl im Dialogfeld anzeigt.
  3. AlertDialog umfasst:
    • 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 Zeit und übergibt sie sowohl an die Funktion TimePicker als auch an die Funktion onConfirm.
Eine Zeitauswahl in einem AlertDialog, die einen Titel, einen Moduswechsel sowie Schaltflächen zum Schließen und Bestätigen implementiert.
Abbildung 1. Eine Uhrzeitauswahl in einem AlertDialog.

Erweitertes Beispiel

Dieses Snippet zeigt eine erweiterte Implementierung eines anpassbaren Dialogfelds für die Zeitauswahl in Jetpack Compose.

@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") }
                }
            }
        }
    }
}

Beachten Sie die folgenden wichtigen Punkte in diesem Snippet:

  1. Mit der zusammensetzbaren Funktion AdvancedTimePickerExample wird ein anpassbares Dialogfeld für die Zeitauswahl erstellt.
  2. Es wird ein Dialog-Composable verwendet, das mehr Flexibilität als AlertDialog bietet.
  3. Das Dialogfeld enthält einen anpassbaren Titel und einen Schalter, mit dem zwischen dem Drehregler- und dem Eingabemodus gewechselt werden kann.
  4. Surface wendet Form und Höhe auf das Dialogfeld an, wobei IntrinsicSize.Min für Breite und Höhe verwendet wird.
  5. Das Column- und das Row-Layout stellen die Strukturkomponenten des Dialogfelds bereit.
  6. Im Beispiel wird der Auswahlmodus mit showDial erfasst.
    • Mit einem IconButton wird zwischen den Modi gewechselt und das Symbol entsprechend aktualisiert.
    • Der Inhalt des Dialogfelds wechselt je nach showDial-Status zwischen TimePicker und TimeInput.

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

Diese Implementierung sieht so aus:

Eine Zeitauswahl in einem benutzerdefinierten Dialogfeld, das einen Titel, einen Moduswechsel sowie Schaltflächen zum Schließen und Bestätigen enthält.
Abbildung 2: Eine Zeitauswahl in einem benutzerdefinierten Dialogfeld.

Zusätzliche Ressourcen