布局 分屏

分屏

仅支持 Android

分屏模式支持在屏幕上同时显示两个活动。

用法 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

需要用户主动激活

应用不能自行进入分屏模式;必须由用户主动激活。

启动新的活动

当应用启动新的活动时,默认会显示在屏幕中的相同部分。应用将根据需要重新调整尺寸以适应分屏视图(除非你的应用不兼容分屏模式)。

当分屏模式处于启用状态时,如果满足以下条件,应用可能会在屏幕的另一部分启动新的活动:

  • 当处于分屏模式时,原有的活动和新的活动互相关联,并且都可用
  • 任务的完成需要应用一次显示两个活动,并且隐藏其他已打开的应用
  • 清楚的指出应用将要进入分屏模式,例如有一个写着 “在新窗口打开” 的按钮
Material Design 的手机和平板分屏模式示例

手机上的纵向分屏模式(左图),平板上的横向分屏模式(右图)

行为 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

分屏模式会保持激活状态,直到用户取消或切换到一个不支持分屏的应用。

调整分屏大小

在分屏模式下,用户可以通过拖动两个分屏中间的分割线来移动和调整每个屏幕。

边缘滑动手势

当处于分屏模式时,边缘滑动手势可能不会像预期的那样。因为分屏模式依靠滑动来调整每个分屏的大小,如果你的应用还依靠边缘滑动来执行某项操作,则滑动操作可能会导致冲突。

为了避免这种情况,边缘滑动不应设置为触发应用中的操作的唯一途径。应该要有一个替代方法来执行该操作。

例如,抽屉式导航可以通过边缘滑动来触发,但也可以通过按下菜单按钮来触发。

布局 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

为了支持分屏模式的使用,可见内容应该缩放到适当的大小和密度。

主操作需要适配分屏模式。例如,导航标签可以折叠到菜单中。

响应式 UI

分屏模式下的应用应优先根据设备尺寸和方向来调整。

更改设备的方向时不应该导致 UI 也意外的发生改变。例如,应用在一个分屏中(纵向模式中)正在播放视频,当设备变成横屏时,视频不应该进入全屏模式。

应用可以在手机和平板中使用相同或不同的布局:

  • 当调整应用的分屏大小时,在手机和平板上有着相似布局的应用可能会在手机模式和平板模式之间切换,因为这样的过渡效果不会显得不和谐。
  • 在手机和平板上布局完全不同的应用应避免在分屏模式时在平板上使用手机版 UI。相反,平板 UI 应该调整尺寸来适应更小尺寸的设备,以确保用户在不同设备上能有一致的体验。
Material Design 在手机和平板中使用相同布局

应用可以在手机(左图)和平板(右图)中使用相同的布局。

Material Design 中的手机和平板布局示例

应用可以在手机(左图)和平板(右图)中使用不同的布局。

为小尺寸设计

为了使应用更方便的设配各种尺寸的分屏模式,建议首先为最小尺寸做设计。

通过聚合元素或移除不必要的元素,为应用创建可以适配 220dp 宽度或高度的布局。在此基础上放大来设计完整的布局。

分屏模式下 Material Design 应用长宽比 16:9

在手机上,当处于分屏模式时,应用竖直方向上的长宽比为 16:9。

Material Design 中平板分屏模式的应用长宽比为 34.15%

在平板上,当处于分屏模式时,应用在竖直方向上的长宽比为 34.15%。