การติดตามการมองเห็นใน Compose

การติดตามเมื่อองค์ประกอบ UI ปรากฏบนหน้าจอจะเป็นประโยชน์สำหรับกรณีการใช้งานต่างๆ เช่น การบันทึกข้อมูลวิเคราะห์ การจัดการสถานะ UI และการเพิ่มประสิทธิภาพ ทรัพยากรโดยการเล่นหรือหยุดเนื้อหาวิดีโอชั่วคราวโดยอัตโนมัติ Compose มีตัวแก้ไขหลายรายการสำหรับติดตามระดับการเข้าถึงองค์ประกอบ UI เช่น

• onVisibilityChanged - ตัวแก้ไขนี้จะแจ้งให้คุณทราบเมื่อมีการเปลี่ยนแปลง ระดับการมองเห็นของ Composable เหมาะอย่างยิ่งสำหรับการทริกเกอร์การดำเนินการหรือ ผลข้างเคียงทุกครั้งที่ฟังก์ชันที่ประกอบกันได้ปรากฏขึ้น
• onLayoutRectChanged - ตัวแก้ไขนี้ให้ข้อมูล เกี่ยวกับขอบเขตของ Composable ที่สัมพันธ์กับรูท หน้าต่าง และหน้าจอ โดยมี การควบคุมระดับต่ำและเป็น API พื้นฐานสำหรับ onVisibilityChanged ตัวแก้ไขนี้คล้ายกับ onGloballyPositioned แต่ให้ประสิทธิภาพที่ดีกว่า และมีความยืดหยุ่นมากขึ้น

คุณใช้ API เหล่านี้กับ Composable ใดก็ได้ซึ่งเป็นส่วนหนึ่งของเชนตัวแก้ไข

ติดตามการเปลี่ยนแปลงระดับการเข้าถึงด้วย onVisibilityChanged

การทำความเข้าใจว่าเมื่อใดที่รายการจะแสดงหรือแสดงบางส่วนต่อผู้ใช้จะช่วยให้คุณติดตามข้อมูลวิเคราะห์ (เช่น จำนวนผู้ชม) เพิ่มประสิทธิภาพ (ดึงข้อมูลหรือดึงข้อมูลล่วงหน้าจากเครือข่ายเมื่อรายการแสดงเท่านั้น) หรือแม้แต่ทริกเกอร์เหตุการณ์ (เล่นหรือหยุดวิดีโอชั่วคราว) ได้

หากต้องการรับการแจ้งเตือนเมื่อระดับการเข้าถึงของรายการมีการเปลี่ยนแปลง ให้ใช้ตัวแก้ไข onVisibilityChanged ดังที่แสดงในตัวอย่างต่อไปนี้

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 จะให้ค่าบูลีนที่แสดงถึง สถานะระดับการเข้าถึงปัจจุบันของ Composable นอกจากนี้ ยังมีพารามิเตอร์ เช่น minFraction และ minDurationMs ซึ่งช่วยให้คุณควบคุมได้ละเอียดยิ่งขึ้นเมื่อต้องทริกเกอร์การเรียกกลับการมองเห็น

เช่นเดียวกับตัวดัดแปลงอื่นๆ การจัดลําดับมีความสําคัญต่อตัวดัดแปลง onVisibilityChanged ตัวอย่างก่อนหน้าแสดงฟังก์ชันที่ประกอบกันได้ซึ่งแสดงข้อความ พร้อมระยะขอบ หากต้องการให้ตัวปรับเปลี่ยนมีผลกับทั้ง Composable พร้อมกับ Padding ให้เพิ่มตัวปรับเปลี่ยน onVisibilityChanged ก่อนตัวปรับเปลี่ยน padding

กำหนดระยะเวลาสำหรับ Composable ก่อนที่จะทริกเกอร์ Visibility Callback

ในบางกรณี คุณอาจต้องการทริกเกอร์การดำเนินการหลังจากที่ผู้ใช้เห็นรายการเป็นระยะเวลาหนึ่งแล้วเท่านั้น เช่น คุณสามารถ เล่นวิดีโออัตโนมัติหากผู้ใช้เห็นวิดีโอเป็นระยะเวลาหนึ่ง

หากต้องการทริกเกอร์การกระทําหลังจากที่รายการแสดงเป็นระยะเวลาที่กําหนด ให้ใช้พารามิเตอร์ minDurationMs ในตัวแก้ไข onVisibilityChanged พารามิเตอร์นี้ ระบุระยะเวลาขั้นต่ำที่ Composable ต้องแสดงอย่างต่อเนื่อง เพื่อให้ทริกเกอร์การเรียกกลับ หาก Composable หยุดแสดง ก่อนถึงระยะเวลาที่กำหนด ระบบจะรีเซ็ตตัวจับเวลา ค่าเริ่มต้นคือ 0 มิลลิวินาที

ข้อมูลโค้ดต่อไปนี้จะเปลี่ยนพื้นหลังเป็นสีม่วงหลังจากที่ Composable แสดงต่อผู้ใช้เป็นเวลา 3 วินาที

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

รูปที่ 1 พื้นหลังจะเปลี่ยนจากสีชมพูเป็นสีพลัมหลังจากที่ Composable อยู่บนหน้าจอเป็นเวลา 3 วินาทีอย่างต่อเนื่อง

ตั้งค่าเศษส่วนที่มองเห็นได้ขั้นต่ำ

การตั้งค่าเศษส่วนที่มองเห็นได้ขั้นต่ำสําหรับการเรียกกลับการมองเห็นของ Composable จะมีประโยชน์เมื่อทํางานกับเนื้อหาที่เลื่อนได้ (เช่น LazyColumn) เพื่อเพิ่มประสิทธิภาพการดึงข้อมูลสําหรับรายการที่มีขนาดเกินขนาดหน้าจอ

ในกรณีดังกล่าว ให้ใช้พารามิเตอร์ minFractionVisible ในตัวแก้ไข onVisibilityChanged เพื่อกำหนดเศษส่วนที่ต้องอยู่บนหน้าจอ เพื่อให้ระบบทำเครื่องหมาย Composable ว่ามองเห็นได้ โดยรองรับค่าแบบลอยตั้งแต่ 0.0f ถึง 1.0f และตั้งค่าเป็น 1.0f โดย ค่าเริ่มต้น 1.0f หมายความว่า Composable ต้องมองเห็นได้บนหน้าจออย่างสมบูรณ์เพื่อให้ระบบทริกเกอร์ การเรียกกลับ

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

รูปที่ 2 ไม่ได้ตั้งค่า minFractionVisible	รูปที่ 3 โดยตั้งค่า minFractionVisible เป็น 0.2f

ตัวอย่างที่ใช้ก่อนหน้านี้จะโหลดบ็อต Androidify จากเครือข่ายล่วงหน้าก่อนที่ Composables จะมองเห็นได้อย่างสมบูรณ์ ในรูปที่ 2 บ็อตตัวที่ 3 ไม่โหลด เนื่องจาก Composable ไม่ปรากฏให้เห็นทั้งหมด ในรูปที่ 3 มีการตั้งค่า minFractionVisible และบอทตัวที่ 3 จะโหลดก่อนที่จะมองเห็นได้อย่างสมบูรณ์บนหน้าจอ

หมายเหตุ: เราจงใจทำให้วิดีโอก่อนหน้านี้ช้าลงเพื่อให้เห็นภาพชัดเจน