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

Bir kullanıcı arayüzü öğesinin ekranda görünür olduğu zamanı izlemek; analitikleri 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ü öğesi görünürlüğünü izlemek için çeşitli değiştiriciler sunar. Örneğin:

• onVisibilityChanged: Bu değiştirici, composable'ın görünürlüğü değiştiğinde sizi bilgilendirir. Composable 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ünür veya kısmen görünür olduğunu anlamak, analizleri (ör. izleyici sayısı) izlemenize, performansı optimize etmenize (yalnızca öğe görünür olduğunda ağdan veri getirme veya önceden getirme) ve hatta etkinlikleri (videoları oynatma veya duraklatma) tetiklemenize 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 aramasının 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. Önceki örnekte, dolguyla metin oluşturma işlevi gösterilmektedir. Değiştiricinin, dolguyla birlikte tüm composable'ı etkilemesini sağlamak için onVisibilityChanged değiştiricisini padding değiştiricisinden önce ekleyin.

Görünürlük geri çağırması tetiklenmeden önce bir composable'da zaman sınırı ayarlama

Bazı durumlarda, bir öğe kullanıcıya belirli bir süre boyunca göründükten sonra bir işlemi tetiklemek isteyebilirsiniz. Örneğin, kullanıcı tarafından bir süredir görünen videoları 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ştiricisinde 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. Composable, süre dolmadan görünürlüğünü kaybederse zamanlayıcı sıfırlanır. Varsayılan değer 0 milisaniyedir.

Aşağıdaki snippet, composable kullanıcı tarafından 3 saniye boyunca görüldükten sonra arka planı mora çevirir:

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

Composable'ın görünürlük geri çağırması için minimum görünür kesir ayarlamak, ekran boyutunu aşan öğeler için veri getirme işlemini optimize etmek amacıyla kaydırılabilir içeriklerle (ör. LazyColumn) çalışırken faydalıdır.

Bu gibi durumlarda, composable'ın görünür olarak işaretlenmesi için ekranda olması gereken kesri tanımlamak üzere minFractionVisible değiştiricisinde onVisibilityChanged 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, composable tamamen görünür hale gelmeden önce ağdan Androidify Bot'larını önceden yükler. Şekil 2'de, composable tamamen görünür olmadığından üçüncü bot yüklenmiyor. Şekil 3'te minFractionVisible ayarlanmış ve üçüncü bot, ekranda tamamen görünür hale gelmeden önce yükleniyor.