Split screen

Split screen

仅支持 Android 设备。

Android only

Split-screen(分屏模式)允许两个活动在屏幕上同时可见。

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

用法

Usage

需要用户交互

User interaction required

应用程序不能自行调用 split-screen(分屏模式); 用户必须主动激活。

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

启动新活动

Launching new activities

当应用启动新活动时,默认情况下,该应用会在同一屏幕内启动。 应用程序将根据需要调整大小以适合拆分视图(除非应用程序与分屏格式不兼容)。

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).

当 split-screen(分屏)模式处于激活状态时,如果满足以下条件,应用可以在屏幕的相对位置启动新活动

  • 原始活动和新活动彼此相关,并且在分屏模式下可用
  • 应用程序为了完成任务而需要同时显示两个活动,并隐藏其他打开的应用程序
  • 又一个清晰明显的标示示意应用程序将进入分屏模式,例如一个按钮,说明“在新窗口中打开”

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 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”

Split-screen(分屏)在移动设备上的纵向模式(左侧)和平板电脑上的横向模式(右侧)显示

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

patterns_splitscreen_intro


特性

Behavior

Split-screen(分屏)模式将保持激活状态,直到用户取消或切换到不兼容的应用程序。

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

调整分屏尺寸大小

Resizing split screen

用户可以通过拖动两个分屏之间的分隔线,来调整每个屏幕尺寸和位置。

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

边缘滑动手势

Edge swipe gestures

当 split-screen(分屏)模式处于激活状态时,边缘滑动手势可能无法按预期工作。 由于分屏模式依靠滑动来调整每个分割屏幕的大小,因此如果您的应用程序还依靠边缘滑动来执行操作,则可能滑动时将触发屏幕调整大小或应用程序中的操作。

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.

例如,抽屉式导航栏 可以从边缘滑动打开,也可以点击菜单的 icon 进行呼出。

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


布局

Layout

为了支持 split-screen(分屏)使用,可观看的内容应该缩放到适当的大小和密度。

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

主要控制器应该适用于 split-screen(分屏)模式。例如,navigation tabs(导航标签)可以折叠到菜单中。

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

响应式 UI

Responsive UI

应用在 split-screen 模式中应该根据设备大小和方向上进行优化和调整。

Apps in split-screen mode should elegantly adjust across device sizes and orientations.

改变设备的方向不应该导致 UI 突然的改变。例如,一个应用正在用分屏模式播放视频(纵向模式,正常拿手机看),突然旋转手机(将手机横过来),该视频应用也不能变成在全屏模式下播放。

Changing a device’s orientation should not cause the UI to change unexpectedly. For example, an app displaying a video in one of the split screens (in portrait mode) should not begin playback in full-screen mode if the device rotates to landscape mode.

应用可能在移动端和平板端使用相同或不同的布局:

  • 在移动端和平板端具有相似布局 UI 的应用,可在应用调整大小时可以在移动端和平板端之间切换,因为这样的切换不会太突兀。
  • 在移动端和平板端具有不同布局 UI 的应用,则要避免在平板的分屏模式下使用移动端的 UI 布局。相反,现有的平板端 UI 应该进行调整,以适应较小的屏幕尺寸,确保用户在不同的设备上有着相同的用户体验。

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.

移动端(左)和平板端(右)具有相同的布局

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

patterns_splitscreen_01_samelayout

移动端(左)和平板端(右)具有不同的布局

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

patterns_splitscreen_02_differentlayout

为小尺寸而设计

Design for condensed sizes

为了简化您的应用程序适用于各种尺寸的分屏模式,建议先设计最小尺寸。

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

通过集中元素和移除非必要元素,创建一个在 220dp 宽度或高度的工作布局。它的布局可以从这个尺寸向外增加(也就是说 android 最小的分屏尺寸就是220 dp 了,只要满足这个最小尺寸的情况,多余的则可以在次基础上增加)。

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.

当分屏处于激活状态时,纵向方向的应用程序的最小尺寸为移动设备屏幕上 16:9 的位置上。

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

patterns_splitscreen_03_169mobile

当分屏处于激活状态时,纵向方向的应用程序的最小尺寸为平板设备屏幕上 34.15% 的位置上。

When the split screen is active, the aspect ratio of an app in portrait orientation is 34.15% on tablet.

patterns_splitscreen_04_3415tablet