เกี่ยวกับฟีเจอร์ภาพซ้อนภาพ (PIP)

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

PIP ใช้ประโยชน์จาก API หลายหน้าต่างที่มีให้ใช้งานใน Android 7.0 เพื่อแสดง หน้าต่างซ้อนทับวิดีโอที่ปักหมุดไว้ หากต้องการเพิ่ม PIP ในแอป คุณต้องลงทะเบียน กิจกรรม เปลี่ยนกิจกรรมเป็นโหมด PIP ตามความจำเป็น และตรวจสอบว่าไม่ได้แสดงองค์ประกอบของ UI อยู่ และวิดีโอยังคงเล่นต่อไปเมื่อกิจกรรมอยู่ในโหมด PIP

使用 Jetpack 实现 PiP

使用 Jetpack 画中画库来实现画中画体验，因为它可以简化集成并减少常见的应用内问题。如需查看其使用示例，请参阅我们的平台示例应用。不过，如果您希望使用平台 API 实现 PiP，请参阅以下文档。

จัดการ UI ในโหมด PIP

เมื่อเข้าสู่โหมด PIP UI ทั้งหมดของแอปจะเข้าสู่หน้าต่าง PIP เว้นแต่คุณจะ ระบุลักษณะที่ควรจะเป็นของ UI ในและนอกโหมด PIP

ก่อนอื่น คุณต้องทราบว่าแอปอยู่ในโหมด PIP หรือไม่ คุณใช้ OnPictureInPictureModeChangedProvider เพื่อวัตถุประสงค์นี้ได้ โค้ดด้านล่างจะบอกว่าแอปของคุณอยู่ในโหมด PIP หรือไม่

@Composable
fun rememberIsInPipMode(): Boolean {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        val activity = LocalContext.current.findActivity()
        var pipMode by remember { mutableStateOf(activity.isInPictureInPictureMode) }
        DisposableEffect(activity) {
            val observer = Consumer<PictureInPictureModeChangedInfo> { info ->
                pipMode = info.isInPictureInPictureMode
            }
            activity.addOnPictureInPictureModeChangedListener(
                observer
            )
            onDispose { activity.removeOnPictureInPictureModeChangedListener(observer) }
        }
        return pipMode
    } else {
        return false
    }
}
PictureInPictureSnippets.kt

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

val inPipMode = rememberIsInPipMode()

Column(modifier = modifier) {
    // This text will only show up when the app is not in PiP mode
    if (!inPipMode) {
        Text(
            text = "Picture in Picture",
        )
    }
    VideoPlayer()
}
PictureInPictureSnippets.kt