Oluşturma modunda görünürlük izleme

Bir kullanıcı arayüzü öğesinin ekranda ne zaman göründüğünü izlemek, analizleri kaydetme, kullanıcı arayüzü durumunu yönetme ve video içeriğini otomatik olarak oynatarak veya duraklatarak kaynakları optimize etme gibi çeşitli kullanım alanları için faydalıdır. Compose, kullanıcı arayüzü öğelerinin görünürlüğünü izlemek için çeşitli değiştiriciler sunar. Örneğin:

• onVisibilityChanged: Bu değiştirici, bir composable'ın görünürlüğü değiştiğinde sizi bilgilendirir. Birleştirilebilir öğe her görünür olduğunda bir işlemi veya yan etkiyi tetiklemek için idealdir.
• onLayoutRectChanged: Bu değiştirici, bir composable'ın kök, pencere ve ekrana göre sınırları hakkında bilgi sağlar. Düşük düzeyde kontrol sunar ve onVisibilityChanged için temel API'dir. Değiştirici, onGloballyPositioned ile benzerdir ancak daha iyi performans ve daha fazla esneklik sunar.

Bu API'leri, değiştirici zincirinin bir parçası olarak herhangi bir composable ile kullanabilirsiniz.

onVisibilityChanged ile görünürlük değişikliklerini izleme

Bir öğenin kullanıcıya ne zaman göründüğünü veya kısmen göründüğünü anlamak, analizleri izlemenize (ör. izleyici sayısı), performansı optimize etmenize (yalnızca öğe görünür olduğunda ağdan veri alma veya önceden getirme) ve hatta etkinlikleri tetiklemenize (videoları oynatma veya duraklatma) yardımcı olabilir.

Bir öğenin görünürlüğü değiştiğinde bildirim almak için aşağıdaki örnekte gösterildiği gibi onVisibilityChanged değiştiricisini kullanın:

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

onVisibilityChanged değiştiricisi, composable'ın mevcut görünürlük durumunu yansıtan bir boole değeri sağlar. Ayrıca, görünürlük geri çağırma işlevinin ne zaman tetiklenmesi gerektiği konusunda daha ayrıntılı kontrol sağlayan minFraction ve minDurationMs gibi parametreler sunar.

Diğer tüm değiştiricilerde olduğu gibi onVisibilityChanged değiştiricisinde de sıralama önemlidir. Yukarıdaki örnekte, dolgulu metin oluşturan bir composable işlev gösterilmektedir. Değiştiricinin, dolguyla birlikte tüm composable'ı etkilemesi için onVisibilityChanged değiştiricisini padding değiştiricisinden önce ekleyin.

Görünürlük geri çağırma işlevini tetiklemeden önce bir composable için zaman sınırı ayarlama

Bazı durumlarda, bir işlemi yalnızca bir öğe kullanıcı tarafından belirli bir süre boyunca görüldükten sonra tetiklemek isteyebilirsiniz. Örneğin, bir videoyu kullanıcıya bir süre gösterildikten sonra otomatik olarak oynatabilirsiniz.

Bir öğe belirli bir süre boyunca görünür olduktan sonra bir işlemi tetiklemek için onVisibilityChanged değiştiricisindeki minDurationMs parametresini kullanın. Bu parametre, geri çağırmanın tetiklenmesi için bir composable'ın sürekli olarak görünür olması gereken minimum süreyi belirtir. Süre dolmadan önce composable görünürlüğü sona ererse zamanlayıcı sıfırlanır. Varsayılan değer 0 milisaniyedir.

Aşağıdaki snippet, composable 3 saniye boyunca kullanıcıya gösterildikten sonra arka planı mor olarak değiştirir:

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

Minimum görünürlük oranı ayarlama

Birleştirilebilir öğenin görünürlük geri çağırma işlevi için minimum görünür kesir ayarlamak, kaydırılabilir içeriklerle (ör. LazyColumn) çalışırken ekran boyutunu aşan öğeler için veri getirme işlemini optimize etmek açısından faydalıdır.

Bu gibi durumlarda, composable'ın görünür olarak işaretlenmesi için ekranda olması gereken bölümü tanımlamak üzere onVisibilityChanged değiştiricisindeki minFractionVisible parametresini kullanın. 0.0f ile 1.0f arasında değişen kayan değerleri destekler ve varsayılan olarak 1.0f şeklinde ayarlanır. 1.0f, geri çağırmanın tetiklenmesi için composable'ın ekranda tamamen görünür olması gerektiği anlamına gelir.

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

Daha önce kullanılan örnek, Androidify Bot'ları ağdan önceden yükler. Bu işlem, composable tamamen görünür hale gelmeden önce gerçekleşir. Şekil 2'de, üçüncü bot yüklenmiyor çünkü birleştirilebilir öğe tamamen görünmüyor. Şekil 3'te minFractionVisible ayarlanmıştır ve üçüncü bot, ekranda tamamen görünür hale gelmeden önce yüklenir.