Monitoraggio della visibilità in Compose

Il monitoraggio della visibilità di un elemento dell'interfaccia utente sullo schermo è utile per una serie di casi d'uso, come la registrazione di dati di analisi, la gestione dello stato dell'interfaccia utente e l'ottimizzazione delle risorse mediante la riproduzione o la pausa automatica dei contenuti video. Compose offre diversi modificatori per il monitoraggio della visibilità degli elementi dell'interfaccia utente, ad esempio:

  • onVisibilityChanged: questo modificatore ti avvisa quando cambia la visibilità di un elemento componibile. È ideale per attivare un'azione o un effetto collaterale ogni volta che il composable diventa visibile.
  • onLayoutRectChanged: questo modificatore fornisce informazioni sui limiti di un elemento componibile rispetto alla radice, alla finestra e allo schermo. Offre un controllo di basso livello ed è l'API di base per onVisibilityChanged. Il modificatore è simile a onGloballyPositioned, ma offre prestazioni migliori e una maggiore flessibilità.

Puoi utilizzare queste API con qualsiasi elemento componibile come parte della catena di modificatori.

Monitorare le modifiche alla visibilità con onVisibilityChanged

Comprendere quando un elemento è visibile o parzialmente visibile a un utente può aiutarti a monitorare le analisi (ad esempio, il conteggio dei visualizzatori), a ottimizzare le prestazioni (recupero o precaricamento dei dati dalla rete solo quando l'elemento è visibile) o persino ad attivare eventi (riproduzione o pausa dei video).

Per ricevere una notifica quando la visibilità di un elemento cambia, utilizza il modificatore onVisibilityChanged, come mostrato nel seguente esempio:

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

Il modificatore onVisibilityChanged fornisce un valore booleano che riflette lo stato di visibilità attuale del composable. Inoltre, offre parametri come minFraction e minDurationMs, che ti consentono di controllare con maggiore precisione quando deve essere attivato il callback di visibilità.

Come per tutti gli altri modificatori, la sequenza è importante con il modificatore onVisibilityChanged. L'esempio precedente mostra una funzione componibile che esegue il rendering del testo con spaziatura interna. Per assicurarti che il modificatore influenzi l'intero elemento componibile insieme al padding, aggiungi il modificatore onVisibilityChanged prima del modificatore padding.

Imposta un limite di tempo per un elemento componibile prima di attivare il callback di visibilità

In alcune situazioni, potresti voler attivare un'azione solo dopo che un elemento è stato visibile all'utente per un determinato periodo di tempo. Ad esempio, puoi riprodurre automaticamente un video se è visibile all'utente da un po' di tempo.

Per attivare un'azione dopo che un elemento è visibile per un periodo definito, utilizza il parametro minDurationMs nel modificatore onVisibilityChanged. Questo parametro specifica la quantità minima di tempo in cui un componente deve essere continuamente visibile affinché venga attivato il callback. Se il composable smette di essere visibile prima del raggiungimento della durata, il timer viene reimpostato. Il valore predefinito è 0 millisecondi.

Il seguente snippet cambia lo sfondo in viola dopo che il composable è stato visibile all'utente per 3 secondi:

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

Figura 1. Lo sfondo cambia da rosa a prugna dopo che il composable è rimasto sullo schermo per 3 secondi consecutivi.

Impostare una frazione visibile minima

Impostare una frazione visibile minima per il callback di visibilità del composable è utile quando si lavora con contenuti scorrevoli (ad esempio LazyColumn) per ottimizzare il recupero dei dati per gli elementi che superano le dimensioni dello schermo.

In questi casi, utilizza il parametro minFractionVisible nel modificatore onVisibilityChanged per definire la frazione che deve essere visualizzata sullo schermo affinché il componente sia contrassegnato come visibile. Supporta valori float compresi tra 0.0f e 1.0f ed è impostato su 1.0f per impostazione predefinita. 1.0f significa che il componibile deve essere completamente visibile sullo schermo per attivare il callback.

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

Figura 2. Senza impostare minFractionVisible. Figura 3. Con minFractionVisible impostato su 0.2f.

L'esempio utilizzato in precedenza precarica i bot Androidify dalla rete prima che il componibile sia completamente visibile. Nella Figura 2, il terzo bot non viene caricato, perché il componente componibile non è completamente visibile. Nella Figura 3, minFractionVisible è impostato e il terzo bot viene caricato prima di essere completamente visibile sullo schermo.

Indietro
Supporta le modalità di visualizzazione pieghevoli
Avanti
Linee di allineamento