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 une heure ; dans votre application.

Types

Il existe deux types de sélecteurs de l'heure:

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

L'image suivante fournit un exemple de sélecteur de temps d'appel sur la gauche et un sélecteur de temps d'entrée sur la droite:

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 Cela vous permet de définir l'heure sélectionnée par défaut qui s'affiche dans le sélecteur. Il capture également l'heure que l'utilisateur a sélectionnée à l'aide de la propriété 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 temps.

Sélecteur d'heure d'appel

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

Tenez compte des 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 l'heure d'entrée

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 le sélecteur de temps d'appel, avec le principal la différence est 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 :

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 parent Le composable 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 les extraits l'application Nest.

Ressources supplémentaires

• TimePicker
• Material Design – Sélecteurs de temps