Boutons d'icône

Les boutons avec icône affichent les actions que les utilisateurs peuvent effectuer. Les boutons à icônes doivent utiliser une icône dont la signification est claire et représentent généralement des actions courantes ou fréquemment utilisées.

Il existe deux types de boutons d'icône:

• Par défaut: ces boutons peuvent ouvrir d'autres éléments, comme un menu ou une recherche.
• Boutons d'activation/de désactivation: ces boutons peuvent représenter des actions binaires pouvant être activées ou désactivées, comme "Favoris" ou "Ajouter aux favoris".

Figure 1. Boutons d'icônes, dont certains sont remplis (pour indiquer une sélection) et avec contour.

Surface d'API

Utilisez le composable IconButton pour implémenter des boutons d'icônes standards. Pour créer différents styles visuels, comme rempli, rempli avec tonalité ou contourné, utilisez FilledIconButton, FilledTonalIconButton et OutlinedIconButton, respectivement.

Voici les principaux paramètres de IconButton:

• onClick: fonction lambda qui s'exécute lorsque l'utilisateur appuie sur le bouton de l'icône.
• enabled: valeur booléenne qui contrôle l'état d'activation du bouton. Lorsque false, le bouton ne répond pas à l'entrée utilisateur.
• content: contenu composable dans le bouton, généralement un Icon.

Exemple de base: Bouton d'icône d'activation/de désactivation

Cet exemple montre comment implémenter un bouton d'icône d'activation/de désactivation. Un bouton d'icône d'activation/de désactivation change d'apparence selon qu'il est sélectionné ou non.

@Preview
@Composable
fun ToggleIconButtonExample() {
    // isToggled initial value should be read from a view model or persistent storage.
    var isToggled by rememberSaveable { mutableStateOf(false) }

    IconButton(
        onClick = { isToggled = !isToggled }
    ) {
        Icon(
            painter = if (isToggled) painterResource(R.drawable.favorite_filled) else painterResource(R.drawable.favorite),
            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button."
        )
    }
}
IconButton.kt

Points clés concernant le code

• Le composable ToggleIconButtonExample définit un IconButton activable/désactivable.
  • mutableStateOf(false) crée un objet MutableState qui contient une valeur booléenne, initialement false. isToggled devient ainsi un conteneur d'état, ce qui signifie que Compose recompose l'UI chaque fois que sa valeur change.
  • rememberSaveable garantit que l'état isToggled persiste en cas de modification de la configuration, comme la rotation de l'écran.
• Le lambda onClick de IconButton définit le comportement du bouton lorsqu'il est cliqué, en basculant l'état entre true et false.
• Le paramètre painter du composable Icon charge de manière conditionnelle un painterResource différent en fonction de l'état isToggled. Cela modifie l'apparence visuelle de l'icône.
  • Si isToggled est défini sur true, il charge le drawable en forme de cœur rempli.
  • Si isToggled est false, il charge le drawable de cœur en contour.
• Le contentDescription de la Icon est également mis à jour en fonction de l'état de la isToggled pour fournir des informations d'accessibilité appropriées.

Résultat

L'image suivante montre le bouton d'icône d'activation/de désactivation de l'extrait de code précédent dans son état non sélectionné:

Figure 2. Bouton d'icône d'activation/de désactivation des favoris dans son état non sélectionné.

Exemple avancé: Actions répétées en appuyant sur un bouton

Cette section explique comment créer des boutons d'icône qui déclenchent une action en continu lorsque l'utilisateur appuie dessus et les maintient, plutôt que de les déclencher une seule fois par clic.

@Composable
fun MomentaryIconButton(
    unselectedImage: Int,
    selectedImage: Int,
    contentDescription: String,
    modifier: Modifier = Modifier,
    stepDelay: Long = 100L, // Minimum value is 1L milliseconds.
    onClick: () -> Unit
) {
    val interactionSource = remember { MutableInteractionSource() }
    val isPressed by interactionSource.collectIsPressedAsState()
    val pressedListener by rememberUpdatedState(onClick)

    LaunchedEffect(isPressed) {
        while (isPressed) {
            delay(stepDelay.coerceIn(1L, Long.MAX_VALUE))
            pressedListener()
        }
    }

    IconButton(
        modifier = modifier,
        onClick = onClick,
        interactionSource = interactionSource
    ) {
        Icon(
            painter = if (isPressed) painterResource(id = selectedImage) else painterResource(id = unselectedImage),
            contentDescription = contentDescription,
        )
    }
}
IconButton.kt

Points clés concernant le code

• MomentaryIconButton prend un unselectedImage: Int, l'ID de ressource drawable de l'icône lorsque le bouton n'est pas enfoncé, et selectedImage: Int, l'ID de ressource drawable de l'icône lorsque le bouton est enfoncé.
• Il utilise un interactionSource pour suivre spécifiquement les interactions de pression de l'utilisateur.
• isPressed est défini sur "true" lorsque le bouton est enfoncé et sur "false" dans le cas contraire. Lorsque isPressed est true, LaunchedEffect entre dans une boucle.
  • Dans cette boucle, il utilise un delay (avec stepDelay) pour créer des pauses entre les actions de déclenchement. coerceIn s'assure que le délai est d'au moins 1 ms pour éviter les boucles infinies.
  • pressedListener est appelé après chaque délai dans la boucle. L'action est alors répétée.
• pressedListener utilise rememberUpdatedState pour s'assurer que le lambda onClick (l'action à effectuer) est toujours le plus à jour depuis la dernière composition.
• Icon modifie l'image affichée selon que le bouton est actuellement enfoncé ou non.
  • Si isPressed est "true", selectedImage est affiché.
  • Sinon, l'unselectedImage s'affiche.

Utilisez ensuite cette MomentaryIconButton dans un exemple. L'extrait de code suivant illustre deux boutons d'icônes contrôlant un compteur:

@Preview()
@Composable
fun MomentaryIconButtonExample() {
    var pressedCount by remember { mutableIntStateOf(0) }

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_rewind,
            selectedImage = R.drawable.fast_rewind_filled,
            stepDelay = 100L,
            onClick = { pressedCount -= 1 },
            contentDescription = "Decrease count button"
        )
        Spacer(modifier = Modifier)
        Text("advanced by $pressedCount frames")
        Spacer(modifier = Modifier)
        MomentaryIconButton(
            unselectedImage = R.drawable.fast_forward,
            selectedImage = R.drawable.fast_forward_filled,
            contentDescription = "Increase count button",
            stepDelay = 100L,
            onClick = { pressedCount += 1 }
        )
    }
}
IconButton.kt

Points clés concernant le code

• Le composable MomentaryIconButtonExample affiche un Row contenant deux instances MomentaryIconButton et un composable Text pour créer une UI permettant d'incrémenter et de décrémenter un compteur.
• Il conserve une variable d'état modifiable pressedCount à l'aide de remember et mutableIntStateOf, initialisée à 0. Lorsque pressedCount change, tous les composables qui l'observent (comme le composable Text) se recomposent pour refléter la nouvelle valeur.
• Le premier MomentaryIconButton diminue pressedCount lorsque vous cliquez dessus ou le maintenez enfoncé.
• Le deuxième MomentaryIconButton augmente pressedCount lorsqu'il est cliqué ou maintenu.
• Les deux boutons utilisent un stepDelay de 100 millisecondes, ce qui signifie que l'action onClick se répète toutes les 100 millisecondes lorsqu'un bouton est maintenu enfoncé.

Résultat

La vidéo suivante montre l'interface utilisateur avec les boutons d'icône et le compteur:

Figure 3. UI d'un compteur avec deux boutons d'icônes (plus et moins) permettant d'augmenter et de diminuer le compteur.

Ressources supplémentaires

• Material 3 : boutons avec icône