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

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

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

Implement PiP with Jetpack

Use the Jetpack Picture-in-Picture library to implement picture-in-picture experience as it streamlines integration and reduces common in-app issues. Refer to our platform sample app to see an example of its usage. However, if you prefer to implement PiP using the platform APIs, refer to the following documentation.

จัดการ 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
    }
}

ตอนนี้คุณสามารถใช้ 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()
}