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

Bir kullanıcı arayüzü öğesinin ekranda ne zaman göründüğünü izlemek, analizleri günlüğe 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. Bu, 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 takip etme

Bir öğenin kullanıcıya ne zaman göründüğünü veya kısmen göründüğünü anlamak, analizleri izlemenize (ör. görüntülenme 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)
)

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 minFractionVisible ve minDurationMs gibi parametreler sunar.

Diğer tüm değiştiriciler 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 kullanıcıya 3 saniye boyunca 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,
    ) {
        // ...
    }
}

Şekil 1. Oluşturulabilir öğe 3 saniye boyunca ekranda kaldıktan sonra arka plan pembeden mürdüm rengine döner.

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çerikle (ö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, composable'ın ekranda tamamen görünür olması veya görüntü alanından büyükse görüntü alanının tamamını doldurması gerektiği anlamına gelir.

Görünür kesir minFractionVisible değerinden büyük olduğunda veya composable tamamen görünür olduğunda ya da görüntü alanını doldurduğunda geri çağırma true değerini alır. Aksi takdirde false alır.

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

Şekil 2. minFractionVisible ayarlanmadan. Şekil 3. minFractionVisible, 0.2f olarak ayarlanmış.

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ü composable 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.

Bir composable'ı gizleme ve alanını koruma

Bir composable'ı etrafındaki düzeni değiştirmeden gizlemek için visible değiştiricisini kullanın. false değerini ilettiğinizde composable yine ölçülür ancak yerleştirilmez veya çizilmez. alpha özelliğini 0f olarak ayarlamaktan farklı olarak visible(false), öğeyi erişilebilirlik ağacından da kaldırır ve düzen alanını korurken dokunma etkileşimlerini devre dışı bırakır.

Aşağıdaki örnekte, gizlendiğinde yerini koruyan bir onay simgesi gösterilmektedir. Bu sayede, yanındaki metin hareket etmez:

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

Composable görünüp kaybolurken etrafındaki düzenin hareket etmemesi gerektiğinde visible kullanın. Oluşturulabilir öğeyi ve alanını kaldırmak için öğeyi çağırmayın veya animasyonla gösterip gizlemek için AnimatedVisibility kullanın.

Önceki
Yerleşik ölçümler