Sélecteurs d'heure

Les sélecteurs 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 l'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 d'heure, utilisez TimePicker ou TimeInput. composable:

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

É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îte 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 montre comment implémenter un sélecteur de l'heure d'appel 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 la valeur actuelle en temps réel.
    • Cet exemple utilise java.util.Calendar. Activer Java Plus de 8 désucrages d'API dans votre projet pour utiliser un autre outil java.time.LocalTime sur toutes les versions d'Android
  • Le composable TimePicker affiche l'outil de sélection de l'heure, en prenant timePickerState comme paramètre.
  • L'implémentation comprend deux boutons: un pour confirmer la sélection et un autre pour le fermer.

Cette implémentation est la suivante :

Sélecteur de durée d'appel 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 montre comment implémenter un sélecteur de temps de style de saisie 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 clés à noter dans 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 pour 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. Un sélecteur de temps d'entrée.

Utiliser l'état

Pour utiliser l'heure sélectionnée par l'utilisateur dans un sélecteur, transmettez la méthode les TimePickerState appropriées à 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