Suivi de la visibilité dans Compose

Le suivi de la visibilité d'un élément d'interface utilisateur à l'écran est utile pour divers cas d'utilisation, tels que la journalisation des données analytiques, la gestion de l'état de l'UI et l'optimisation des ressources en lisant ou en mettant en pause automatiquement le contenu vidéo. Compose propose plusieurs modificateurs pour suivre la visibilité des éléments d'UI, tels que :

  • onVisibilityChanged : ce modificateur vous avertit lorsque la visibilité d'un composable change. Il est idéal pour déclencher une action ou un effet secondaire chaque fois que le composable devient visible.
  • onLayoutRectChanged : ce modificateur fournit des informations sur les limites d'un composable par rapport à la racine, à la fenêtre et à l'écran. Elle offre un contrôle de bas niveau et constitue l'API de base pour onVisibilityChanged. Le modificateur est semblable à onGloballyPositioned, mais offre de meilleures performances et une flexibilité accrue.

Vous pouvez utiliser ces API avec n'importe quel composable dans la chaîne de modificateurs.

Suivre les modifications de visibilité avec onVisibilityChanged

Comprendre quand un élément est visible ou partiellement visible pour un utilisateur peut vous aider à suivre les données analytiques (par exemple, le nombre de spectateurs), à optimiser les performances (en récupérant ou en préchargeant les données du réseau uniquement lorsque l'élément est visible) ou même à déclencher des événements (lecture ou mise en pause de vidéos).

Pour être averti lorsque la visibilité d'un élément change, utilisez le modificateur onVisibilityChanged, comme indiqué dans l'exemple suivant :

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)
VisibilitySnippets.kt

Le modificateur onVisibilityChanged fournit une valeur booléenne qui reflète l'état de visibilité actuel du composable. Il propose également des paramètres tels que minFraction et minDurationMs, qui vous permettent de mieux contrôler le moment où le rappel de visibilité doit être déclenché.

Comme pour tous les autres modificateurs, l'ordre est important avec le modificateur onVisibilityChanged. L'exemple précédent montre une fonction composable qui affiche du texte avec une marge intérieure. Pour vous assurer que le modificateur affecte l'ensemble du composable ainsi que la marge intérieure, ajoutez le modificateur onVisibilityChanged avant le modificateur padding.

Définir une limite de temps sur un composable avant de déclencher le rappel de visibilité

Dans certains cas, vous pouvez déclencher une action uniquement après qu'un élément a été visible par l'utilisateur pendant un certain temps. Par exemple, vous pouvez lire automatiquement une vidéo si elle est visible par l'utilisateur depuis un certain temps.

Pour déclencher une action après qu'un élément est visible pendant une période définie, utilisez le paramètre minDurationMs dans le modificateur onVisibilityChanged. Ce paramètre spécifie la durée minimale pendant laquelle un composable doit être visible en continu pour que le rappel soit déclenché. Si le composable cesse d'être visible avant la fin de la durée, le minuteur est réinitialisé. La valeur par défaut est 0 milliseconde.

L'extrait suivant change l'arrière-plan en violet une fois que le composable est visible par l'utilisateur pendant trois secondes :

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

Figure 1. L'arrière-plan passe du rose au prune une fois que le composable est à l'écran pendant trois secondes consécutives.

Définir une fraction visible minimale

Définir une fraction visible minimale pour le rappel de visibilité du composable est utile lorsque vous travaillez avec du contenu défilant (par exemple, LazyColumn) pour optimiser la récupération des données pour les éléments qui dépassent la taille de l'écran.

Dans ce cas, utilisez le paramètre minFractionVisible dans le modificateur onVisibilityChanged pour définir la fraction qui doit être à l'écran pour que le composable soit marqué comme visible. Il accepte les valeurs float comprises entre 0.0f et 1.0f, et est défini sur 1.0f par défaut. 1.0f signifie que le composable doit être entièrement visible à l'écran pour que le rappel soit déclenché.

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}
VisibilitySnippets.kt

Figure 2. Sans que minFractionVisible soit défini. Figure 3. Avec minFractionVisible défini sur 0.2f.

L'exemple utilisé précédemment précharge les robots Androidify à partir du réseau avant que le composable ne soit complètement visible. Dans la figure 2, le troisième bot ne se charge pas, car le composable n'est pas entièrement visible. Dans la figure 3, minFractionVisible est défini et le troisième robot se charge avant d'être complètement visible à l'écran.

Précédent
Assurer la compatibilité avec les modes d'affichage des appareils pliables
Suivant
Lignes d'alignement