Dialogfelder für die Zeitauswahl

Uhrzeitauswahlen werden häufig in Dialogfeldern angezeigt. Sie können eine relativ generische und minimale Implementierung eines Dialogfelds verwenden oder ein benutzerdefiniertes Dialogfeld mit mehr Flexibilität implementieren.

Weitere Informationen zu Dialogfeldern im Allgemeinen und zur Verwendung des Status der Uhrzeitauswahl finden Sie im Leitfaden zu Uhrzeitauswahlen.

Einfaches Beispiel

Die einfachste Möglichkeit, ein Dialogfeld für die Uhrzeitauswahl zu erstellen, besteht darin, eine zusammensetzbare Funktion zu erstellen, die AlertDialog implementiert. Das folgende Snippet enthält ein Beispiel für ein relativ minimales Dialogfeld 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. Die zusammensetzbare Funktion 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 zum 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, die die Uhrzeitauswahl im Dialogfeld anzeigt.
  3. Das AlertDialog enthält:
    • Eine Schaltfläche zum Schließen mit der Beschriftung „Schließen“.
    • Eine Schaltfläche zum Bestätigen mit der Beschriftung „OK“.
    • Den Inhalt der Uhrzeitauswahl, der als Parameter text übergeben wird.
  4. Die Funktion DialWithDialogExample initialisiert TimePickerState mit der aktuellen Uhrzeit und übergibt sie sowohl an TimePicker als auch an die Funktion onConfirm.
Eine Zeitauswahl in einem AlertDialog, der einen Titel, eine Modusumschaltung sowie Schaltflächen zum Schließen und Bestätigen enthält.
Abbildung 1. Eine Uhrzeitauswahl in einem AlertDialog.

Erweitertes Beispiel

Dieses Snippet zeigt eine erweiterte Implementierung eines anpassbaren Dialogfelds für die Uhrzeitauswahl 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") }
                }
            }
        }
    }
}
TimePickers.kt

Beachten Sie die wichtigsten Punkte in diesem Snippet:

  1. Die zusammensetzbare Funktion AdvancedTimePickerExample erstellt ein anpassbares Dialogfeld für die Uhrzeitauswahl.
  2. Sie verwendet eine Dialog zusammensetzbare Funktion, um mehr Flexibilität als AlertDialog zu bieten.
  3. Das Dialogfeld enthält einen anpassbaren Titel und eine Schaltfläche zum Umschalten zwischen der Auswahl über ein Zifferblatt und der Eingabe.
  4. Surface wendet Form und Erhebung auf das Dialogfeld an, wobei IntrinsicSize.Min sowohl für die Breite als auch für die Höhe verwendet wird.
  5. Die Layouts Column und Row stellen die Strukturkomponenten des Dialogfelds bereit.
  6. Im Beispiel wird der Modus der Uhrzeitauswahl mit showDial verfolgt.
    • Mit einer IconButton wird zwischen den Modi umgeschaltet und das Symbol entsprechend aktualisiert.
    • Der Dialogfeldinhalt wechselt zwischen TimePicker und TimeInput, je nach Status von showDial.

Diese erweiterte Implementierung bietet ein hochgradig anpassbares und wiederverwendbares Dialogfeld für die Uhrzeitauswahl, das an verschiedene Anwendungsfälle in Ihrer App angepasst werden kann.

Diese Implementierung sieht so aus:

Eine Zeitauswahl in einem benutzerdefinierten Dialogfeld mit einem Titel, einer Modusumschaltung sowie Schaltflächen zum Schließen und Bestätigen.
Abbildung 2. Eine Uhrzeitauswahl in einem benutzerdefinierten Dialogfeld.

Zusätzliche Ressourcen