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

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

  • onVisibilityChanged - ตัวแก้ไขนี้จะแจ้งให้คุณทราบเมื่อระดับการเข้าถึงของ Composable มีการเปลี่ยนแปลง เหมาะสำหรับการทริกเกอร์การดำเนินการหรือ ผลข้างเคียงทุกครั้งที่ 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)
)

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

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

กำหนดขีดจำกัดเวลาใน Composable ก่อนเรียกใช้ Callback ระดับการเข้าถึง

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

หากต้องการทริกเกอร์การดำเนินการหลังจากที่รายการปรากฏเป็นระยะเวลาที่กำหนด ให้ใช้พารามิเตอร์ minDurationMs ในตัวแก้ไข onVisibilityChanged พารามิเตอร์นี้ระบุระยะเวลาขั้นต่ำที่ Composable ต้องแสดงอย่างต่อเนื่องเพื่อให้ทริกเกอร์ Callback หาก 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,
    ) {
        // ...
    }
}

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

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

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

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

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

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

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

ก่อนหน้า
การวัดภายใน