Suivi de la visibilité dans Compose

Le suivi de la visibilité d'un élément d'interface utilisateur à l'écran est utile dans de nombreux cas d'utilisation, comme la journalisation des analyses, la gestion de l'état de l'interface utilisateur et l'optimisation des ressources en lançant ou en mettant en pause automatiquement le contenu vidéo. Compose propose plusieurs modificateurs pour suivre la visibilité des éléments d'interface utilisateur, 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. Il 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 plus grande flexibilité.

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

Suivre les changements de visibilité avec onVisibilityChanged

Comprendre quand un élément est visible ou partiellement visible pour un utilisateur peut vous aider à suivre les analyses (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 illustré 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. De plus, il propose 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 tout autre modificateur, la séquence est importante 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 le remplissage, 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 pour l'utilisateur pendant un certain temps. Par exemple, vous pouvez lancer automatiquement une vidéo si elle est visible pour 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 de code suivant remplace l'arrière-plan par du violet après que le composable a été visible pour 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

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éfilable (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 flottantes 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

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