Monitoraggio della visibilità in Compose

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

  • onVisibilityChanged: questo modificatore ti avvisa quando la visibilità di un componibile cambia. È 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 composable 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 composable come parte della catena di modificatori.

Monitora le modifiche alla visibilità con onVisibilityChanged

Capire quando un elemento è visibile o parzialmente visibile a un utente può aiutarti a monitorare i dati e analisi (ad esempio, il numero di visualizzazioni), ottimizzare le prestazioni (recuperando o precaricando i dati dalla rete solo quando l'elemento è visibile) o persino attivare eventi (riproduzione o messa in pausa dei video).

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

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

Il modificatore onVisibilityChanged fornisce un valore booleano che riflette lo stato di visibilità corrente del componibile. Inoltre, offre parametri come minFraction e minDurationMs, che ti consentono di controllare in modo più preciso quando deve essere attivato il callback di visibilità.

Come per ogni altro modificatore, 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 influisca sull'intero composable insieme al padding, aggiungi il modificatore onVisibilityChanged prima del modificatore padding.

Imposta un limite di tempo per un composable 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 il periodo di tempo minimo per cui un composable deve essere visibile in modo continuo affinché il callback venga attivato. Se il composable non è più visibile prima della scadenza della durata, il timer viene reimpostato. Il valore predefinito è 0 millisecondi.

Il seguente snippet cambia lo sfondo in viola dopo che l'elemento componibile è 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,
    ) {
        // ...
    }
}

Figura 1. Lo sfondo cambia da rosa a prugna dopo che l'elemento componibile è rimasto sullo schermo per 3 secondi consecutivi.

Imposta 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 composable venga contrassegnato come visibile. Supporta valori in virgola mobile compresi tra 0.0f e 1.0f ed è impostato su 1.0f per impostazione predefinita. 1.0f significa che il composable deve essere completamente visibile sullo schermo affinché il callback venga attivato.

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)
            )
        }
    }
}

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, poiché il composable non è completamente visibile. Nella Figura 3, minFractionVisible è impostato e il terzo bot viene caricato prima di essere completamente visibile sullo schermo.

Indietro
Misurazioni intrinseche