Sélecteurs d'heure

Les sélecteurs de date et d'heure permettent aux utilisateurs de sélectionner une heure. Vous pouvez utiliser les composables TimePicker et TimeInput pour implémenter un sélecteur de date et d'heure dans votre application.

Types

Il existe deux types de sélecteurs de date et d'heure:

  • Cadran: permet aux utilisateurs de définir une heure en déplaçant une poignée autour d'un cadran.
  • Saisie: permet aux utilisateurs de définir une heure à l'aide de leur clavier.

L'image suivante montre un exemple de sélecteur d'heure par cadran à gauche et un sélecteur d'heure par saisie à droite:

Un cadran et un sélecteur d'heure.
Figure 1. Cadran et sélecteur d'heure d'entrée.

Surface de l'API

Pour implémenter un sélecteur de date et d'heure, utilisez le composable TimePicker ou TimeInput:

  • TimePicker: implémente un sélecteur de date et d'heure.
  • TimeInput: implémente un sélecteur de date et d'heure.

État

Pour TimePicker et TimeInput, vous devez également transmettre un TimePickerState. Vous pouvez ainsi définir l'heure sélectionnée par défaut qui s'affiche dans le sélecteur. Il capture également l'heure sélectionnée par l'utilisateur à l'aide du sélecteur.

Boîte de dialogue

Les sélecteurs d'heure s'affichent dans les boîtes de dialogue. Les exemples de ce guide n'utilisent pas de boîtes de dialogue. Pour obtenir des exemples qui utilisent des boîtes de dialogue, consultez le guide Boîtes de dialogue pour les sélecteurs de date et d'heure.

Sélecteur d'heure du cadran

Cet extrait de code montre comment implémenter un sélecteur d'heure de base.

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

Réfléchissez aux points suivants dans cet extrait:

  • Calendar.getInstance() initialise TimePickerState avec l'heure actuelle.
  • Le composable TimePicker affiche le sélecteur de date et d'heure, en utilisant timePickerState comme paramètre.
  • L'implémentation comprend deux boutons: un pour confirmer la sélection et un autre pour fermer le sélecteur.

Cette implémentation est la suivante :

Sélecteur d'heure avec cadran L'utilisateur peut sélectionner une heure à l'aide du cadran.
Figure 2. Sélecteur d'heure avec cadran

Sélecteur d'heure de saisie

Cet extrait de code montre comment implémenter un sélecteur de date et d'heure de base.

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

Points importants à retenir pour cette implémentation:

  • La structure est essentiellement la même que celle du sélecteur de l'heure du cadran, la principale différence étant l'utilisation de TimeInput au lieu de TimePicker.
  • Le paramètre is24Hour de timePickerState est explicitement défini sur true. Par défaut, cette valeur est false.

Cette implémentation est la suivante :

Sélecteur d'heure L'utilisateur peut saisir une heure à l'aide de champs de texte.
Figure 3. Sélecteur d'heure.

Utiliser l'état

Pour utiliser l'heure sélectionnée par l'utilisateur dans un sélecteur d'heure, transmettez le TimePickerState approprié à votre fonction onConfirm. Le composable parent peut ensuite accéder à l'heure sélectionnée via TimePickerState.hour et TimePickerState.minute.

L'extrait de code suivant montre comment procéder:

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

Vous pouvez ensuite appeler le composable comme suit:

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

Pour en savoir plus, consultez l'implémentation complète dans l'application d'extraits.

Ressources supplémentaires