Material design - Layout - Split screen

Split screen - 分割屏幕

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

【翻译】
分屏模式允许两个活动在屏幕上同时可见。

Usage - 用法

User interaction required - 需要用户交互

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 thesame 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 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 shown in portrait mode on mobile (on the left) and landscape mode on tablet (on the right)

【翻译】
分割屏幕在移动设备上以纵向模式显示(左侧),平板电脑上显示横向模式(右侧)

Behavior - 行为

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 - 边缘滑动手势
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.

【翻译】
当分屏模式处于活动状态时,边缘滑动手势可能无法按预期工作。 由于拆分屏幕模式依靠滑动来调整每个分割屏幕的大小,因此如果您的应用程序还依靠边缘滑动来执行操作,则可能滑动将触发屏幕调整大小或应用程序中的操作。
为了避免这种情况,边缘滑动不应该是在应用程序中执行操作的唯一方式。 应该有一个替代方法来执行每个操作。
例如,导航抽屉允许边缘滑动打开抽屉,但也可以通过按下菜单图标访问。

Layout - 布局

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.

【翻译】
为了支持拆分屏幕使用,可观看内容应该缩放到适当的大小和密度。
主控制应适用于分屏模式。例如,导航标签可以折叠到菜单中。

Responsive UI - 响应UI
Apps in split-screen mode should elegantly adjust across device sizes and orientations.
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意外更改。 例如,如果设备旋转为横向模式,则在其中一个分割屏幕(以纵向模式)显示视频的应用程序不应该在全屏模式下开始播放。

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.

【翻译】
应用程式可能会在行动装置和平板电脑上使用相同或不同的版面配置:
当应用调整大小时,移动设备和平板电脑布局相似的应用可能会在平板电脑和移动UI之间切换,因为过渡不会令人困扰。
具有完全不同的移动设备和平板电脑布局的应用应避免在分屏模式下在平板电脑上使用移动UI。 相反,现有的平板电脑界面应进行调整,以适应较小的尺寸,以确保用户在两个设备上有一致的体验。


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

【翻译】
应用程式可能会在行动装置(左)和平板电脑(右)上使用相同的版面配置。


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

【翻译】
应用程式可能会在行动装置(左)和平板电脑(右)上使用不同的版面配置。

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.

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.

【翻译】
为了简化您的应用程序适用于各种尺寸的分屏模式,建议先设计最小尺寸。
通过聚合元素或移除非必要的元素,创建一个工作在220dp宽或高的布局。 布局可以从那里向上缩放。


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

【翻译】
当分割屏幕处于活动状态时,纵向方向的应用程序的纵横比在移动设备上为16:9。


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

【翻译】
当分割屏幕处于活动状态时,平板电脑上纵向方向的应用的纵横比为34.15%。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容