Sichtbarkeits-Tracking in Compose

Das Tracking, wann ein UI-Element auf dem Bildschirm sichtbar ist, ist für eine Vielzahl von Anwendungsfällen hilfreich, z. B. für die Protokollierung von Analysen, die Verwaltung des UI-Zustands und die Optimierung von Ressourcen durch automatisches Abspielen oder Pausieren von Videoinhalten. Compose bietet mehrere Modifikatoren zum Erfassen der Sichtbarkeit von UI-Elementen, z. B.:

  • onVisibilityChanged: Mit diesem Modifikator werden Sie benachrichtigt, wenn sich die Sichtbarkeit einer zusammensetzbaren Funktion ändert. Sie ist ideal, um jedes Mal, wenn die Composable sichtbar wird, eine Aktion oder einen Nebeneffekt auszulösen.
  • onLayoutRectChanged: Dieser Modifier enthält Informationen zu den Grenzen eines Composables relativ zum Stamm, Fenster und Bildschirm. Sie bietet eine untergeordnete Steuerung und ist die Foundation API für onVisibilityChanged. Der Modifikator ähnelt onGloballyPositioned, bietet aber eine bessere Leistung und mehr Flexibilität.

Sie können diese APIs mit jedem Composable als Teil der Modifier-Kette verwenden.

Sichtbarkeitsänderungen mit onVisibilityChanged nachverfolgen

Wenn Sie wissen, wann ein Element für einen Nutzer sichtbar oder teilweise sichtbar ist, können Sie Analysen durchführen (z. B. die Anzahl der Aufrufe erfassen), die Leistung optimieren (Daten aus dem Netzwerk nur abrufen oder vorab abrufen, wenn das Element sichtbar ist) oder sogar Ereignisse auslösen (Videos abspielen oder pausieren).

Wenn Sie benachrichtigt werden möchten, wenn sich die Sichtbarkeit eines Elements ändert, verwenden Sie den Modifikator onVisibilityChanged, wie im folgenden Beispiel gezeigt:

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

Der Modifikator onVisibilityChanged gibt einen booleschen Wert zurück, der den aktuellen Sichtbarkeitsstatus der Composable widerspiegelt. Außerdem bietet es Parameter wie minFraction und minDurationMs, mit denen Sie genauer festlegen können, wann der Sichtbarkeits-Callback ausgelöst werden soll.

Wie bei allen anderen Modifikatoren ist die Reihenfolge auch beim Modifikator onVisibilityChanged wichtig. Das obige Beispiel zeigt eine zusammensetzbare Funktion, die Text mit Padding rendert. Damit sich der Modifier auf das gesamte Composable und das Padding auswirkt, fügen Sie den onVisibilityChanged-Modifier vor dem padding-Modifier hinzu.

Zeitlimit für ein Composable festlegen, bevor der Sichtbarkeits-Callback ausgelöst wird

In manchen Fällen möchten Sie eine Aktion erst auslösen, wenn ein Element für einen bestimmten Zeitraum für den Nutzer sichtbar war. Sie können beispielsweise ein Video automatisch abspielen, wenn es dem Nutzer eine Weile angezeigt wurde.

Wenn Sie eine Aktion auslösen möchten, nachdem ein Element für einen bestimmten Zeitraum sichtbar ist, verwenden Sie den Parameter minDurationMs im Modifikator onVisibilityChanged. Dieser Parameter gibt die Mindestzeit an, die ein Composable-Element kontinuierlich sichtbar sein muss, damit der Callback ausgelöst wird. Wenn das Composable vor Ablauf der Dauer nicht mehr sichtbar ist, wird der Timer zurückgesetzt. Der Standardwert ist 0 Millisekunden.

Im folgenden Snippet wird der Hintergrund nach 3 Sekunden, in denen das Composable für den Nutzer sichtbar war, in Lila geändert:

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

Abbildung 1. Der Hintergrund ändert sich von Rosa zu Pflaume, nachdem das Composable 3 Sekunden lang auf dem Bildschirm angezeigt wurde.

Mindestsichtbarkeitsanteil festlegen

Das Festlegen eines minimalen sichtbaren Bruchteils für den Sichtbarkeits-Callback des Composables ist nützlich, wenn Sie mit scrollbaren Inhalten (z. B. LazyColumn) arbeiten, um das Abrufen von Daten für Elemente zu optimieren, die die Bildschirmgröße überschreiten.

In solchen Fällen können Sie mit dem Parameter minFractionVisible im Modifizierer onVisibilityChanged den Bruchteil definieren, der auf dem Bildschirm zu sehen sein muss, damit die Composable als sichtbar markiert wird. Sie unterstützt Gleitkommawerte zwischen 0.0f und 1.0f und ist standardmäßig auf 1.0f festgelegt. 1.0f bedeutet, dass das Composable vollständig auf dem Bildschirm sichtbar sein muss, damit der Callback ausgelöst wird.

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

Abbildung 2: Ohne dass minFractionVisible festgelegt ist. Abbildung 3: Mit minFractionVisible als 0.2f.

Im zuvor verwendeten Beispiel werden die Androidify-Bots aus dem Netzwerk vorab geladen, bevor das Composable vollständig sichtbar ist. In Abbildung 2 wird der dritte Bot nicht geladen, da das Composable nicht vollständig sichtbar ist. In Abbildung 3 ist minFractionVisible festgelegt und der dritte Bot wird geladen, bevor er vollständig auf dem Bildschirm sichtbar ist.

Zurück
Modi für faltbare Displays unterstützen
Weiter
Ausrichtungslinien