Bild im Bild (BiB)

Die Bild-im-Bild-Funktion (BiB) ist ein spezieller Typ des Mehrfenstermodus, der hauptsächlich für die Videowiedergabe verwendet wird. Mit der Funktion „Bild im Bild“ können Nutzer sich ein Video in einem kleinen Fenster ansehen, das an einer Ecke des Bildschirms angepinnt ist, während sie zwischen Apps wechseln oder sich Inhalte auf dem Hauptbildschirm ansehen.

Für das Overlay-Fenster mit dem angepinnten Video wird der Mehrfenstermodus genutzt, der in Android 7.0 eingeführt wurde. Wenn Sie Ihrer App den Bild-im-Bild-Modus hinzufügen möchten, müssen Sie Ihre Aktivität registrieren, sie bei Bedarf in den Bild-im-Bild-Modus wechseln und dafür sorgen, dass UI-Elemente ausgeblendet werden und die Videowiedergabe fortgesetzt wird, wenn sich die Aktivität im Bild-im-Bild-Modus befindet.

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.

Benutzeroberfläche im BiB-Modus verarbeiten

Wenn Sie in den BiB-Modus wechseln, wird die gesamte Benutzeroberfläche Ihrer App im BiB-Fenster angezeigt, sofern Sie nicht angeben, wie die Benutzeroberfläche im und außerhalb des BiB-Modus aussehen soll.

Zuerst müssen Sie wissen, wann sich Ihre App im BiB-Modus befindet und wann nicht. Sie können dafür OnPictureInPictureModeChangedProvider verwenden. Der folgende Code gibt an, ob sich Ihre App im BiB-Modus befindet.

@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

Jetzt können Sie mit rememberIsInPipMode() festlegen, welche UI-Elemente angezeigt werden sollen, wenn die App in den BiB-Modus wechselt:

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