画中画

画中画 (PiP) 是一种多窗口模式,专为播放全屏视频的活动而设计。它允许用户在小窗口中观看视频,该窗口固定在屏幕的角落,同时在应用程序之间导航或浏览主屏幕上的内容。

图 1: 即使不在您的应用程序中,您的用户也可以继续他们的视频体验

要点

  • 确保 UI 元素隐藏,并且当活动处于 PiP 模式时视频播放继续。
  • 为非视频内容禁用无缝调整大小。
  • 具有最少 UI 的视频播放活动提供最佳的用户体验。
  • 避免显示除了视频内容之外的任何内容。

为您的应用程序添加对画中画的支持

默认情况下,系统不会自动为应用程序支持 PiP,需要声明以支持该功能。

PiP 窗口显示在屏幕的最顶层,位于系统选择的角落。

控件

默认情况下,Android 为关闭窗口、将其扩展回全屏、设置和媒体播放提供 PiP 控件。您的应用程序可以添加自定义操作和相应的图标资产,以允许用户与 PiP 内容进行交互。

用户可以通过点击移动设备上的窗口或从电视遥控器选择菜单来从 PiP 窗口菜单显示这些控件。如果应用程序具有 活动媒体会话,则播放、暂停、下一首和上一首的控件也会显示。了解如何 添加这些控件

在 PiP 模式下,您的活动将显示在一个小窗口中。用户无法在此模式下与应用程序的其他 UI 元素进行交互,并且 PiP 窗口中小 UI 元素的详细信息可能难以看到。

图 2: 默认 PiP 控件


图 3: 自定义 PiP 控件的示例

过渡

平滑的进入 PiP 动画

用户触发 PiP 模式会导致当前活动从全屏缩小到一个小窗口,该窗口继续显示内容而不会覆盖任何 UI。

Android 12 对全屏和 PiP 窗口之间的动画过渡进行了重大美学改进。我们强烈建议实施所有适用的更改;完成这些更改后,这些更改会自动扩展到大型屏幕(如折叠屏和平板电脑),无需任何其他工作。

如果您的应用程序不包含这些适用的更新,PiP 过渡仍然可以正常工作,但动画效果不佳。例如,从全屏过渡到 PiP 模式会导致 PiP 窗口在过渡期间消失,然后在过渡完成后重新出现。

从 Android 12 开始,PictureInPictureParams.Builder.setAutoEnterEnabled(true) 标志为使用手势导航(例如,从全屏向上滑动到主屏幕时)过渡到 PiP 模式中的视频内容提供了更流畅的动画。如果您的应用程序属于 ENTERTAINMENTCOMMUNICATIONVIDEO_PLAYER 应用程序类别,我们建议使用此标志。

如果您的应用程序不包含此更改,PiP 手势导航过渡仍然可以正常工作,但动画效果不佳。视频 1 显示了此示例:窗口缩小到应用程序图标并消失,然后在过渡完成后重新出现。

视频 1: 当 PiP 未正确实现 setAutoEnterEnabled 时,过渡体验效果不佳

视频 2 显示了相同的过渡示例,但添加了 setAutoEnterEnabled 到应用程序中。

视频 2: 完善的过渡体验

流畅的视频视觉效果

当我们在 Android 8.0 中引入 PiP 时,sourceRectHint 指示了过渡到 PiP 之后可见的活动区域 - 例如,视频播放器中的视频视图边界。从 Android 12 开始,操作系统使用 sourceRectHint 来实现更流畅的动画,无论是在进入 PiP 模式还是退出 PiP 模式时。

如果您的应用程序未提供正确的 sourceRectHint,PiP 过渡仍然可以正常工作,但动画效果不佳。例如,视频 3 显示了从全屏到 PiP 模式的过渡效果不佳的示例:全屏窗口缩小到 PiP 窗口后,会被黑色覆盖,然后再次显示视频。

视频 3: 当 PiP 未正确实现 sourceRectHint 时,过渡体验效果不佳

要查看当 sourceRectHint 正确实现时 PiP 动画的外观示例,请参见上一节中的视频 2。

Android Kotlin 画中画示例 作为启用完善过渡体验的参考。

用法

允许用户不仅在您的应用程序中继续观看他们的视频,而且可以在整个设备上继续观看。您的应用程序控制何时进入 PiP 模式 - 这可以是交互,例如离开当前视图或向上滑动到主屏幕。

以下是可能操作的一些示例

  • 当用户点击主屏幕按钮或向上滑动到主屏幕时,活动可以进入 PiP 模式。这就是 Google 地图在用户同时运行另一个活动时继续显示路线指示的方式。

    图 4: PiP 用于继续寻路体验
  • 当用户从视频导航回浏览其他内容时,您的应用程序可以将视频移到 PiP 模式。

  • 您的应用可以在用户观看内容剧集的结尾时将视频切换到画中画模式。主屏幕会显示该剧集下一集的促销或摘要信息。

  • 您的应用可以为用户提供一种在观看视频时排队其他内容的方法。视频将在画中画模式下继续播放,而主屏幕则显示内容选择活动。

使用一种与观看体验相辅相成的交互模式,而不是造成干扰。例如,如果视频正在播放内容剧集的结尾,则在离开主屏幕时进入画中画模式将需要额外的用户操作才能返回并停止播放或导航小型控件。

在您的应用中,用户可能在主屏幕上浏览内容时选择一个新视频,而视频播放活动处于画中画模式。在新视频播放活动中播放新视频,而不是启动一个可能让用户感到困惑的新活动。

用户可以将画中画窗口拖动到其他位置。

  • 单点窗口以显示全屏切换按钮、关闭按钮、设置按钮以及您的应用提供的自定义操作(例如,播放控件)。

    图 5:默认画中画控件
  • 双击窗口可在当前画中画大小和最大或最小画中画大小之间切换 - 例如,双击最大化窗口会将其最小化,反之亦然。

    图 6:使用双击在最小和最大尺寸画中画之间切换
  • 将窗口拖动到左侧或右侧边缘以将其隐藏。要取消隐藏窗口,请点击隐藏窗口的可见部分或将其拖出。

    图 7:隐藏的画中画
  • 使用捏合缩放来调整画中画窗口大小。

  • 向下滑动画中画以将其移除。

    图 8:向下滑动

有关实现画中画的更多信息,请参阅 画中画开发者文档