分屏模式允许在屏幕上同时显示两个前台运行的应用。

Split-screen mode allows two activities to be visible on screen at the same time.


用法

应用不可以自行激活分屏模式,必须由用户激活。

Apps are not authorized to invoke split-screen mode by themselves; the user must activate it.

激活新进程

在分屏模式下,新的应用与原应用平分视图。

When an app launches a new activity, it will launch within the same portion of the screen by default. Apps will be resized to fit the split-screen view as necessary (unless your app isn’t compatible with the split-screen format).

用户可以根据需求调整应用的视图大小(需要应用适配分配模式)。

  • 在后台开启分屏后(部分机型可以通过手势开启),用户可以选择新的应用与原应用平分视图,也可以开启单个应用的分屏模式
  • 在分屏模式下,一个应用的视图调整到最大时,另一个应用自动隐藏

When split-screen mode is active, apps may launch new activities in the opposite portion of the screen if the following criteria are met:

  • The original and new activities are related to each other and usable while in split-screen mode
  • The task that the app helps accomplish warrants displaying two activities at once, and hiding the other app that was open
  • It is clear that the app will enter split-screen mode, such as with a button stating “Open in new window”

image.png
Split screen shown in portrait mode on mobile (on the left) and landscape mode on tablet (on the right)


行为

处于分配模式下的应用会保持前台运行,直到用户关闭分配模式或切换到其它应用。

Split-screen mode remains active until the user cancels it or switches to an incompatible app.

调整分屏大小

用户可以在分屏模式下拖拽分割线来调整两个应用所占视图的大小。

Users may move and resize each screen in split-screen mode by dragging the divider between the two split screens.


手势冲突

当应用处于分屏模式下时,部分手势会冲突,如果没有替代选项,相应的操作可能会无法执行。

为了避免这种情况,设计者需要考虑到分屏模式下,提供一种替代操作来帮助用户完成任务。

例如,边缘侧滑手势与分屏模式下的手势冲突,用户可能无法顺利打开侧面导航栏,那么设计者需要提供菜单按钮来代替手势操作。

When split-screen mode is active, the edge swipe gesture will likely not work as intended. Because split-screen mode relies on swiping to resize each split screen, if your app also relies on edge swipes to perform actions, then it’s possible that the swipe will either trigger screen resizing or an action in your app.

To avoid this, edge swipes should not be the only way to perform actions in your app. There should be an alternative method to perform each action.

For example, the navigation drawer enables an edge swipe to open the drawer, but it is also accessible by pressing the menu icon.


布局

用户可以在分屏模式下拖拽分割线来调整两个应用所占视图的大小。

To support split-screen usage, viewable content should be scaled to an appropriate size and density.

Primary controls should be adapted for split-screen mode. For example, navigation tabs may be collapsed into a menu.

自适应 UI

分屏模式下的应用程序应根据设备尺寸和方向进行自适应。

无论设备处于竖屏还是横屏,应用不会退出分屏模式。

设计者需要考虑移动端与平板设备尺寸对分配模式下应用布局的影响,保证应用在各种情况下都能为用户提供优秀的用户体验。

Apps in split-screen mode should elegantly adjust across device sizes and orientations.
The screen is split along the x-axis in portrait, and along the y-axis in landscape. Changing a device’s orientation should not cause the UI to change unexpectedly. For example, a video displayed in one side of a split screen shouldn’t switch to full-screen if the device is rotated from portrait to landscape orientation.

Apps may use the same or different layouts for mobile and tablet:

  • Apps with similar layouts for mobile and tablet may switch between the tablet and mobile UIs when the app is resized, as the transition will not be jarring.
  • Apps with completely different layouts for mobile and tablet should avoid using the mobile UI on tablet in split-screen mode. Instead, the existing tablet UI should be adapted to fit the smaller size to ensure that users have a consistent experience on both devices.

image.png
An app may use the same layout across mobile (left) and tablet (right).

image.png
An app may use different layouts across mobile (left) and tablet (right).


紧凑型 UI 设计

由于用户可以自行调整分屏模式下的视图大小,设计者需要考虑应用在极端情况下的布局,让用户在合理的范围内调整。

最小布局高度:220 dp

通过压缩或删除不必要的元素,在 220 dp 的基础上进行缩放。

To simplify adapting your app for the various sizes of split-screen mode, it is recommended to design for the smallest size first.

Create a layout that works at 220dp wide or tall by condensing elements or removing non-essential ones. The layout may be scaled upward from there.

image.png
When the split screen is active on a tablet, by default it takes up 34.15% of the entire screen.

image.png
When the split screen is active on mobile, the aspect ratio of an app in portrait orientation is 16:9.