Pelacakan visibilitas di Compose

Melacak kapan elemen UI terlihat di layar berguna untuk berbagai kasus penggunaan, seperti mencatat analisis, mengelola status UI, dan mengoptimalkan resource dengan memutar atau menjeda konten video secara otomatis. Compose menawarkan beberapa pengubah untuk melacak visibilitas elemen UI seperti:

  • onVisibilityChanged - Pengubah ini memberi tahu Anda saat visibilitas composable berubah. Fungsi ini ideal untuk memicu tindakan atau efek samping setiap kali composable terlihat.
  • onLayoutRectChanged - Pengubah ini memberikan informasi tentang batas composable yang terkait dengan root, jendela, dan layar. API ini menawarkan kontrol tingkat rendah dan merupakan API dasar untuk onVisibilityChanged. Pengubah ini mirip dengan onGloballyPositioned, tetapi menawarkan performa yang lebih baik dan fleksibilitas yang lebih tinggi.

Anda dapat menggunakan API ini dengan composable apa pun sebagai bagian dari rantai pengubah.

Melacak perubahan visibilitas dengan onVisibilityChanged

Memahami kapan item terlihat atau terlihat sebagian oleh pengguna dapat membantu Anda melacak analisis (misalnya, jumlah penayangan), mengoptimalkan performa (mengambil atau mengambil data di awal dari jaringan hanya saat item terlihat), atau bahkan memicu peristiwa (memutar atau menjeda video).

Untuk mendapatkan notifikasi saat visibilitas item berubah, gunakan pengubah onVisibilityChanged, seperti yang ditunjukkan dalam contoh berikut:

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)

Pengubah onVisibilityChanged memberikan nilai boolean yang mencerminkan status visibilitas composable saat ini. Selain itu, class ini menawarkan parameter seperti minFraction dan minDurationMs, yang memberi Anda kontrol yang lebih baik atas kapan callback visibilitas perlu dipicu.

Seperti pengubah lainnya, pengurutan penting dengan pengubah onVisibilityChanged. Contoh sebelumnya menunjukkan fungsi composable yang merender teks dengan padding. Untuk memastikan pengubah memengaruhi seluruh composable beserta padding, tambahkan pengubah onVisibilityChanged sebelum pengubah padding.

Menetapkan batas waktu pada composable sebelum memicu callback visibilitas

Dalam beberapa situasi, Anda mungkin ingin memicu tindakan hanya setelah item terlihat oleh pengguna selama jangka waktu tertentu. Misalnya, Anda dapat memutar video secara otomatis jika video tersebut telah terlihat oleh pengguna selama beberapa waktu.

Untuk memicu tindakan setelah item terlihat selama periode yang ditentukan, gunakan parameter minDurationMs dalam pengubah onVisibilityChanged. Parameter ini menentukan jumlah waktu minimum yang diperlukan composable agar terus terlihat agar callback dipicu. Jika composable berhenti terlihat sebelum durasi terpenuhi, timer akan direset. Nilai defaultnya adalah 0 milidetik.

Cuplikan berikut mengubah latar belakang menjadi ungu setelah composable terlihat oleh pengguna selama 3 detik:

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

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

Gambar 1. Latar belakang berubah dari merah muda menjadi plum setelah composable berada di layar selama 3 detik terus-menerus.

Menetapkan pecahan minimum yang terlihat

Menetapkan pecahan minimum yang terlihat untuk callback visibilitas composable berguna saat menangani konten yang dapat di-scroll (misalnya, LazyColumn) untuk mengoptimalkan pengambilan data untuk item yang melebihi ukuran layar.

Dalam kasus tersebut, gunakan parameter minFractionVisible di pengubah onVisibilityChanged untuk menentukan pecahan yang harus ada di layar agar composable ditandai sebagai terlihat. Nilai ini mendukung nilai float mulai dari 0.0f hingga 1.0f, dan ditetapkan sebagai 1.0f secara default. 1.0f berarti composable harus terlihat sepenuhnya di layar agar callback dipicu.

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

Gambar 2. Tanpa menetapkan minFractionVisible. Gambar 3. Dengan minFractionVisible ditetapkan sebagai 0.2f.

Contoh yang digunakan sebelumnya melakukan pramuat Androidify Bot dari jaringan sebelum composable terlihat sepenuhnya. Pada Gambar 2, bot ketiga tidak dimuat, karena composable tidak terlihat sepenuhnya. Pada Gambar 3, minFractionVisible ditetapkan, dan bot ketiga dimuat sebelum terlihat sepenuhnya di layar.

Sebelumnya
Pengukuran intrinsik