Boîtes de dialogue des sélecteurs d'heure

Les sélecteurs d'heure s'affichent souvent dans des boîtes de dialogue. Vous pouvez utiliser une implémentation relativement générique et minimale d'une boîte de dialogue, ou implémenter une boîte de dialogue personnalisée avec plus de flexibilité.

Pour en savoir plus sur les boîtes de dialogue en général, y compris sur l'utilisation de l'état du sélecteur d'heure, consultez le guide sur les sélecteurs d'heure.

Exemple de base

Le moyen le plus simple de créer une boîte de dialogue pour votre sélecteur d'heure consiste à créer un composable qui implémente AlertDialog. L'extrait de code suivant fournit un exemple de boîte de dialogue relativement minimaliste utilisant cette approche :

@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

Notez les points clés de cet extrait :

1. Le composable DialWithDialogExample encapsule TimePicker dans une boîte de dialogue.
2. TimePickerDialog est un composable personnalisé qui crée un AlertDialog avec les paramètres suivants :
   • onDismiss : fonction appelée lorsque l'utilisateur ferme la boîte de dialogue (via le bouton de fermeture ou le bouton de retour).
   • onConfirm : fonction appelée lorsque l'utilisateur clique sur le bouton "OK".
   • content : composable qui affiche le sélecteur d'heure dans la boîte de dialogue.
3. AlertDialog inclut :
   • Un bouton "Ignorer".
   • Un bouton de confirmation intitulé "OK".
   • Le contenu du sélecteur d'heure transmis en tant que paramètre text.
4. DialWithDialogExample initialise TimePickerState avec l'heure actuelle et le transmet aux fonctions TimePicker et onConfirm.

Figure 1. Sélecteur d'heure dans un AlertDialog.

Exemple avancé

Cet extrait illustre une implémentation avancée d'une boîte de dialogue de sélection de l'heure personnalisable dans 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

Notez les points clés de cet extrait :

1. Le composable AdvancedTimePickerExample crée une boîte de dialogue de sélection de l'heure personnalisable.
2. Il utilise un composable Dialog pour plus de flexibilité que AlertDialog.
3. La boîte de dialogue inclut un titre personnalisable et un bouton d'activation pour basculer entre les modes de sélection et de saisie.
4. Surface applique une forme et une hauteur à la boîte de dialogue, avec IntrinsicSize.Min pour la largeur et la hauteur.
5. Les mises en page Column et Row fournissent les composants de structure de la boîte de dialogue.
6. L'exemple suit le mode du sélecteur à l'aide de showDial.
   • Un IconButton permet de basculer entre les modes, en mettant à jour l'icône en conséquence.
   • Le contenu de la boîte de dialogue bascule entre TimePicker et TimeInput en fonction de l'état showDial.

Cette implémentation avancée fournit une boîte de dialogue de sélection de l'heure hautement personnalisable et réutilisable, qui peut s'adapter à différents cas d'utilisation dans votre application.

Cette implémentation est la suivante :

Figure 2. Sélecteur d'heure dans une boîte de dialogue personnalisée.

Ressources supplémentaires

• Guide des sélecteurs d'heure
• Material Design – Sélecteurs d'heure