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. Ideal untuk memicu tindakan atau efek samping setiap kali composable menjadi terlihat.
• onLayoutRectChanged - Pengubah ini memberikan informasi tentang batas composable relatif terhadap 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 sebagian terlihat oleh pengguna dapat membantu Anda melacak analisis (misalnya, jumlah penonton), mengoptimalkan performa (mengambil atau melakukan pengambilan data 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)
)
VisibilitySnippets.kt

Pengubah onVisibilityChanged memberikan nilai boolean yang mencerminkan status visibilitas saat ini dari composable. Selain itu, API 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 durasi minimum composable harus terlihat secara terus-menerus 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,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

Menetapkan fraksi yang terlihat minimum

Menetapkan fraksi terlihat minimum untuk callback visibilitas composable berguna saat bekerja dengan 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 fraksi yang harus ada di layar agar composable ditandai sebagai terlihat. Properti ini mendukung nilai float dalam rentang 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)
            )
        }
    }
}
VisibilitySnippets.kt

Contoh yang digunakan sebelumnya memuat terlebih dahulu Bot Androidify dari jaringan sebelum composable terlihat sepenuhnya. Pada Gambar 2, bot ketiga tidak dimuat, karena composable tidak terlihat sepenuhnya. Pada Gambar 3, minFractionVisible disetel, dan bot ketiga dimuat sebelum terlihat sepenuhnya di layar.