Monitoraggio della visibilità in Compose

Monitorare quando un elemento UI è visibile sullo schermo è utile per una serie di casi d'uso, come la registrazione di analisi dei log, 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 (recupero o precaricamento dei 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à attuale del composable. Inoltre, offre parametri come minFractionVisible e minDurationMs, che ti consentono di controllare con maggiore precisione 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 su 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 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 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,
    ) {
        // ...
    }
}

Figura 1. Lo sfondo cambia da rosa a prugna dopo che il composable è 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 o riempire l'intera area visibile se è più grande di quest'ultima.

Il callback riceve true quando la frazione visibile è maggiore di minFractionVisible o quando il composable è completamente visibile o riempie l'area visibile. In caso contrario, riceve false.

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here `visible` is `true` when more than 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 gli Androidify Bot dalla rete prima che il composable 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.

Nascondi un componibile e mantieni il suo spazio

Per nascondere un componibile senza modificare il layout circostante, utilizza il modificatore visible. Quando passi false, il componibile viene comunque misurato, ma non viene posizionato o disegnato. A differenza dell'impostazione di alpha su 0f, visible(false) rimuove anche l'elemento dall'albero di accessibilità e disattiva le interazioni touch, preservando lo spazio del layout.

L'esempio seguente mostra un'icona di controllo che mantiene il suo spazio mentre è nascosta, in modo che il testo accanto non si sposti:

Row(modifier, verticalAlignment = Alignment.CenterVertically) {
    Icon(
        painter = painterResource(R.drawable.check),
        contentDescription = "Saved",
        modifier = Modifier
            // The icon keeps its space while it's hidden, so the text doesn't move.
            .visible(isSaved)
    )
    Text("Draft", Modifier.padding(start = 8.dp))
}

Utilizza visible quando il layout attorno al composable non deve spostarsi quando il composable appare e scompare. Per rimuovere il composable e il relativo spazio, non chiamarlo o utilizza AnimatedVisibility per animarlo in entrata e in uscita.

Indietro
Misurazioni intrinseche