Pelacakan visibilitas di Compose

Melacak kapan elemen UI terlihat di layar akan 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. Pengubah ini ideal untuk memicu tindakan atau efek samping setiap kali composable terlihat.
• onLayoutRectChanged - Pengubah ini memberikan informasi tentang batas composable relatif terhadap root, jendela, dan layar. Pengubah ini menawarkan kontrol tingkat rendah dan merupakan API dasar untuk onVisibilityChanged. Pengubah ini mirip dengan onGloballyPositioned, tetapi menawarkan performa yang lebih baik dan peningkatan fleksibilitas.

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 pramuat 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 composable saat ini. Selain itu, pengubah 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 jangka waktu yang ditentukan, gunakan parameter minDurationMs dalam pengubah onVisibilityChanged. Parameter ini menentukan jumlah waktu minimum composable harus terus terlihat agar callback dipicu. Jika composable berhenti terlihat sebelum durasi terpenuhi, timer akan direset. Nilai default-nya 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 pecahan minimum yang terlihat

Menetapkan pecahan minimum yang terlihat 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 seperti itu, gunakan parameter minFractionVisible dalam pengubah onVisibilityChanged untuk menentukan pecahan yang perlu berada di layar agar composable ditandai sebagai terlihat. Parameter ini mendukung nilai float yang berkisar dari 0.0f hingga 1.0f, dan ditetapkan sebagai 1.0f secara default. 1.0f berarti composable harus sepenuhnya terlihat 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 melakukan pramuat Androidify Bot dari jaringan sebelum composable sepenuhnya terlihat. Pada Gambar 2, bot ketiga tidak dimuat, karena composable tidak sepenuhnya terlihat. Pada Gambar 3, minFractionVisible ditetapkan, dan bot ketiga dimuat sebelum sepenuhnya terlihat di layar.