Picture-in-picture (PiP) adalah jenis khusus mode multi-aplikasi yang sebagian besar digunakan untuk pemutaran video. Dengan fitur ini, pengguna dapat menonton video di jendela kecil yang disematkan ke sudut layar sambil beralih antar-aplikasi atau menjelajahi konten di layar utama.
PiP memanfaatkan API multi-aplikasi yang tersedia di Android 7.0 untuk menyediakan jendela overlay video yang disematkan. Untuk menambahkan PiP ke aplikasi, Anda harus mendaftarkan aktivitas, mengalihkan aktivitas ke mode PiP sesuai kebutuhan, dan memastikan elemen UI disembunyikan dan pemutaran video berlanjut saat aktivitas berada dalam mode PiP.
使用 Jetpack 实现 PiP
使用 Jetpack 画中画库来实现画中画体验,因为它可以简化集成并减少常见的应用内问题。如需查看其使用示例,请参阅我们的平台示例应用。不过,如果您希望使用平台 API 实现 PiP,请参阅以下文档。
Menangani UI dalam mode PiP
Saat Anda memasuki mode PiP, seluruh UI aplikasi Anda akan memasuki jendela PiP, kecuali jika Anda menentukan tampilan UI Anda dalam dan di luar mode PiP.
Pertama, Anda perlu mengetahui kapan aplikasi Anda berada dalam mode PiP atau tidak. Anda dapat menggunakan
OnPictureInPictureModeChangedProvider untuk melakukannya.
Kode di bawah memberi tahu Anda apakah aplikasi Anda dalam mode 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 } }
Sekarang, Anda dapat menggunakan rememberIsInPipMode() untuk beralih elemen UI yang akan ditampilkan
saat aplikasi memasuki mode 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() }