Sichtbarkeits-Tracking in Compose

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

  • onVisibilityChanged: Dieser Modifikator benachrichtigt Sie, wenn sich die Sichtbarkeit einer zusammensetzbaren Funktion ändert. Sie eignet sich ideal, um jedes Mal, wenn das Compose-Element sichtbar wird, eine Aktion oder einen Nebeneffekt auszulösen.
  • onLayoutRectChanged: Dieser Modifikator liefert Informationen zu den Grenzen eines Composables relativ zum Stamm, Fenster und Bildschirm. Sie bietet Low-Level-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 jeder beliebigen komponierbaren Funktion als Teil der Modifikatorkette verwenden.

Sichtbarkeitsänderungen mit onVisibilityChanged verfolgen

Wenn Sie wissen, wann ein Element für einen Nutzer sichtbar oder teilweise sichtbar ist, können Sie Analysen verfolgen (z. B. die Anzahl der Zuschauer), die Leistung optimieren (Daten nur dann aus dem Netzwerk 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)
)

Der Modifikator onVisibilityChanged liefert einen booleschen Wert, der den aktuellen Sichtbarkeitsstatus der zusammensetzbaren Funktion widerspiegelt. Außerdem bietet sie Parameter wie minFractionVisible und minDurationMs, mit denen Sie genauer steuern können, wann der Sichtbarkeits-Callback ausgelöst werden soll.

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

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

In einigen Situationen möchten Sie möglicherweise eine Aktion erst dann auslösen, wenn ein Element für eine bestimmte Zeit für den Nutzer sichtbar war. Sie können beispielsweise ein Video automatisch abspielen, wenn es für den Nutzer eine Zeit lang sichtbar war.

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

Im folgenden Snippet wird der Hintergrund in lila geändert, nachdem die komponierbare Funktion 3 Sekunden lang für den Nutzer sichtbar war:

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}

Abbildung 1. Der Hintergrund ändert sich von Rosa zu Pflaume, nachdem die komponierbare Funktion 3 Sekunden lang ununterbrochen auf dem Bildschirm zu sehen war.

Mindestanteil der Sichtbarkeit festlegen

Das Festlegen eines minimalen sichtbaren Anteils 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.

Verwenden Sie in solchen Fällen den Parameter minFractionVisible im Modifikator onVisibilityChanged, um den Anteil zu definieren, der auf dem Bildschirm sichtbar sein muss, damit das Compose-Element als sichtbar markiert wird. Es werden Gleitkommawerte von 0.0f bis 1.0f unterstützt. Der Standardwert ist 1.0f. 1.0f bedeutet, dass das Composable vollständig auf dem Bildschirm sichtbar sein oder den gesamten Darstellungsbereich ausfüllen muss, wenn es größer als der Darstellungsbereich ist.

Der Callback empfängt true, wenn der sichtbare Teil größer als minFractionVisible ist oder wenn die zusammensetzbare Funktion vollständig sichtbar ist oder den Darstellungsbereich ausfüllt. Andernfalls wird false zurückgegeben.

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

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

Im vorherigen Beispiel werden die Androidify-Bots aus dem Netzwerk vorab geladen, bevor die zusammensetzbare Funktion 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 auf dem Bildschirm vollständig sichtbar ist.

Composable ausblenden und Platz beibehalten

Wenn Sie eine komponierbare Funktion ausblenden möchten, ohne das Layout um sie herum zu ändern, verwenden Sie den Modifikator visible. Wenn du false übergibst, wird die zusammensetzbare Funktion weiterhin gemessen, aber nicht platziert oder gezeichnet. Im Gegensatz zum Festlegen von alpha auf 0f wird bei visible(false) das Element auch aus der Baumstruktur für Bedienungshilfen entfernt und Touch-Interaktionen werden deaktiviert, während der Layoutbereich erhalten bleibt.

Im folgenden Beispiel wird ein Häkchensymbol gezeigt, das seinen Platz behält, während es ausgeblendet ist, sodass sich der Text daneben nicht bewegt:

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

Verwenden Sie visible, wenn sich das Layout um die zusammensetzbare Funktion nicht bewegen darf, wenn die zusammensetzbare Funktion ein- und ausgeblendet wird. Wenn Sie das Composable und den zugehörigen Platz entfernen möchten, rufen Sie es nicht auf oder verwenden Sie AnimatedVisibility, um es ein- und auszublenden.

Zurück
Intrinsische Messungen