Bild im Bild (BiB)

„Bild im Bild“ (BiB) ist ein spezieller Mehrfenstermodus, der hauptsächlich für die Videowiedergabe verwendet wird. Nutzer können 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.

BiB nutzt die in Android 7.0 eingeführten Mehrfenstermodus-APIs, um das angepinnte Video-Overlay-Fenster bereitzustellen. Wenn Sie BiB zu Ihrer App hinzufügen möchten, müssen Sie Ihre Aktivität registrieren, sie bei Bedarf in den BiB-Modus versetzen und dafür sorgen, dass UI-Elemente ausgeblendet werden und die Videowiedergabe fortgesetzt wird, wenn sich die Aktivität im BiB-Modus befindet.

Bild-im-Bild-Modus mit Jetpack implementieren

Verwenden Sie die Jetpack-Bibliothek „Bild im Bild“, um die Funktion „Bild im Bild“ zu implementieren. Dadurch wird die Integration vereinfacht und häufige In-App-Probleme werden reduziert. Ein Beispiel für die Verwendung finden Sie in unserer Beispiel-App für die Plattform. Wenn Sie die PiP-Funktion lieber mit den Plattform-APIs implementieren möchten, finden Sie weitere Informationen in der folgenden Dokumentation.

UI im BiB-Modus verarbeiten

Wenn Sie in den BiB-Modus wechseln, wird die gesamte UI Ihrer App im BiB-Fenster angezeigt, es sei denn, Sie geben an, wie die UI im BiB-Modus und außerhalb des BiB-Modus aussehen soll.

Zuerst müssen Sie wissen, wann sich Ihre App im BiB-Modus befindet und wann nicht. Dazu können Sie OnPictureInPictureModeChangedProvider verwenden. Der folgende Code prüft, 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