联想平板适配攻略

1、概述

1.1 联想平板介绍

小新Pad系列平板包含小新Pad、小新Pad Pro、小新Pad Pro 2012、小新Pad Pro 12.6等，以小新Pad Pro 12.6为例介绍如下：

1.2 文档适用对象

需要适配联想平板的第三方开发者、UX设计师、系统工程师、测试工程师。

2、UX设计与软件适配建议

2.1 基础体验设计

2.1.1 字体

优先调用系统默认字体适配平板设备，保证阅读体验一致性，特殊需求除外。排版及字号字重应保证清晰可读。

2.1.2 图片、视频

图片、视频资源不应该出现变形、模糊或者显示不全的问题，影响体验。

2.1.3 弹窗

在应用设计中弹窗比较常见，如权限弹窗、广告营销等，建议弹窗大小适中，字体清晰可读且没有文字重叠，虚影等现象。弹窗有醒目的供用户关闭的按钮。

2.1.4 小部件 Widget

应用小部件尺寸建议符合平板桌面位置定义，大小适中，保证清晰可读。触摸热区、滑动等体验功能正常。

2.2 平板页面布局

联想平板满足用户在使用横屏、竖屏以及分屏的多场景下，都可获得良好的体验感，因此界面的动态布局非常重要。应用最多会遇到以下8 种窗口情况：

基于以上情况，列举部分布局方式：

A.拉伸

仅卡片区域、显示区域等拉伸，显示内容不随设备显示区域变化而变化。文字、图标大小保持一致，应保证完整性和可视性。  

B.缩放

显示内容同设备显示区域等比例缩放。应保证文字，图片，视频无重叠。

C.拓展/增量/减量

满足清晰显示，在显示区域内增/减单位，单位的尺寸保持不变。

D.重新布局

满足清晰显示并为适应更好的信息获取，可根据内容重新布局。

2.3 不同类型应用适配建议

针对不同行业，不同类型应用，我们推荐以下五种布局方案：多列布局，Tab拉伸，分栏布局，左右布局和横屏拉宽。主要针对平板横屏显示情况：

适配方式	应用所属行业
多列布局	金融理财，居家生活，时尚购物，影音视听，医疗健康，学习教育
Tab拉伸图	新闻资讯，图书阅读，摄影摄像，短视频
分栏布局	聊天社交，效率办公
左右布局	实用工具，音乐，时钟，天气，体育运动
横屏拉宽	游戏，旅游交通

具体描述和详细说明如下：

A.多列布局

应用首页顶部和底部的Tab拉伸，首页主要功能键/APP推荐位数量增加。

B.Tab拉伸

Tab拉伸适配下，页面主要内容不变，两侧加上与主色调相同/相近的背景。顶部和底部的Tab拉伸，顶部按键数量相比于手机可有相应增加。

C.分栏布局

分栏适配下，页面分栏布局与电脑端的布局保持一致。

D.左右布局

顶部和底部的Tab拉伸，内部页面左右分列，主要的文字性内容，相应的图片、视频分列展示。

E.横屏拉宽

APP界面横向铺满屏幕。

3、通用开发适配指南

4、进阶开发适配指南

4.1 平行视图

4.1.1 功能介绍

作为ZUI一视界中的核心功能，平行视窗是一种以 Activity 为基础的对应用进行分屏显示的功能。应用可以根据自身功能、调性的需求来设计分屏显示的 Activity 逻辑，给用户带来单应用多窗口的全新体验。

4.1.2 显示模式

平行视窗目前共有三种显示模式，应用可以根据自身业务需求对显示模式进行选择。

a.导航栏模式

• 分屏规则：在导航栏模式下，左分屏始终保持不变，从左分屏打开新窗口会在有分屏显示并将右分屏旧内容替换，从右分屏打开新窗口会直接替换右分屏的旧内容。具体分屏规则和逻辑如下图所示。
• 配置说明：logicEntities.body.mode配置为1。

b.购物模式

• 分屏规则：在购物模式下，左分屏打开的新窗口会把右分屏旧内容替换。从右分屏打开新窗口时，原右分屏窗口会左移替代原左分屏内容，打开的新窗口会在在右分屏展示。具体分屏规则和逻辑如下图所示。
• 配置说明：logicEntiries.body.mode值配置为0。

c.自定义晋升模式

自定义晋升模式支持开发者对窗口显示模式进行自定义，来满足自身的业务需求。

• 分屏规则：在全局横屏或全屏状态下，满足 activityPairs 关系的 activity 触发左右平行视窗之分屏。在已经分屏的情况下，触发了新的 activity，如果该 activity 不命中 activityPairs 关系，则新 activity 在右分屏显示，不论是在哪个分屏触发。
• 在已经分屏的情况下，触发了新的 activity，如果该 activity 命中 activityPairs 关系，从左分屏打开的新页面，会将右分屏的页面替换掉； 从右分屏打开新页面，原右分屏页面向左移，新页面在右分屏打开。具体分屏规则和逻辑如下图所示。
• 配置说明：logicEntiries.body.mode值配置为0。

4.1.3 平行视窗适配技术指南(应用开发流程)

a.修改配置文件

修改AndroidManifest.xml文件，在文件中的application中新增"meta-data"

meta-data android:name="EasyGoClient" android:value="true"

b.新增Easygo配置文件

在assets目录下新建配置文件easygo.json，字段说明如下

{

"easyGoVersion": "1.0","client": "com.zui.example","logicEntities": [{"head": {"function": "magicwindow","required": "true"},"body": {"mode": "0","defaultDualActivities": {"mainPages": "com.zui.example.MainActivity","relatedPage": "com.zui.example.AActivity"},"transActivities": ["com.zui.example.A1Activity","com.zui.example.A2Activity"],"Activities": [{"name": "com.zui.example.BActivity","defaultFullScreen": "true"},{"name": "com.zui.example.CActivity","defaultFullScreen": "true"}]}}]

}

参数	限制	描述
easyGoVersion	1	协议版本， 固定值为“ 1.0 ”
client	1	应用包名
logicEntities.head. function	1	调用组件名， 固定值“ magicwindow ”
logicEntities.head. required	1	预留字段，固定值“true"
logicEntities.body. mode	1	基础分屏模式： -1：分屏不生效 0：购物模式， activityPairs 节点不生效 1：自定义模式(包括抽屉模式)
logicEntities.body. activityPairs	?	自定义模式参数， 配置从 from 页面到 to页面的分屏展示
logicEntities.body. activityPairs.from	*	触发分屏的目标 Activity , “*”表示任意Activity。 自定义模式： [{"from" :"com.xxx. ActivityA", " to" :"com.xxx. ActivityB"}] 表示 A 上启动 B ， 触发分屏( A | B ) 抽屉模式： [{"from":"com.xxx.ActivityA", "to":"*"}]
logicEntities.body. defaultDualActivities	?	应用冷启动默认 打开首页双屏配置
logicEntities.body. defaultDualActivities.mainPages	1	主页面 Activity ， 展开态时冷启动应用 打开此页面时， 系统在右屏自动启动 relatedPage 页面。
logicEntities.body. defaultDualActivities.relatedPage	?	右屏默认展示页面 Activity。 mainPages 和 relatedPage 只能配置 1对， 需要具体的 Activity 名， 不支持通配符，如： [{"mainPages": "com.xxx.MainActivity", "relatedPage": "com.xxx.EmptyActivity"}]
logicEntities.body. transActivities	*	过渡页面列表，如 ["com.xxx.ActivityD ", " com.xxx.ActivityE ", " com.xxx.ActivityF "]
logicEntities.body. Activities	?	应用关键 Activity 属性列表
logicEntities.body. Activities.name	1	Activity 组件名
logicEntities.body. Activities.defaultFullScreen	?	Activity 是否支持默认 以全屏启动。 true：支持 false：不支持 默认为 false

c.接口说明

判断当前是否运行在平行视窗，代码参考示例

String config = context.getResources().getConfiguration().toString();

boolean isInMagicWindow = config.contains("zui-magic-windows");

d.获取Activity实际显示的窗口大小

推荐使用：context.getResources().getDisplayMetrics()，不推荐使用：

context.getWindowManager().getDefaultDisplay().getMetrics(outMetrics)

上述接口中，context 为 Activity 对应的上下文句柄，每个 Activity 应该严格使用自己的 context 来进行布局，而不是使用 application 的 context

e.获取Activity的窗口布局方向

获取 Activity 窗口方向的方法为：

context.getResources().getConfiguration().orientation

说明：不推荐使用 width > height 的方法来判 Activity 为横屏布局，因为在 magicWindow 双窗口状态下，支持应用内拖动的场景中，其中一个 Activity 的宽可能大于高，但通过上述接口获取的orientation 统一为竖屏。 如果 Activity 是在 magicWindow 状态下全屏显示，其 orientation 值为横屏。

f.相机方向

平行视窗下Camera方向无须额外适配，建议对camera的处理方法同非平行视窗状态保持一致，即使用通用的接口获取rotation

4.2 应用浮窗

4.2.1 浮窗和悬挂态浮窗功能介绍

4.2.1.1浮窗

浮窗功能主要解决当前任务需要时刻被关注，同时又可以处理其他任务信息，比如打车软件等待接单，如游戏更新下载中，用户此时可以节约时间做其他事情等。

4.2.1.2悬挂态浮窗

临时等待的场景下，悬挂态小窗可以解决应用临时挂机的场景，比如游戏挂机，打车等待、视频直播等。

4.2.2 如何使用应用浮窗？

• 通知浮窗
  微信、QQ等 消息通知支持以浮窗的形式开启
• 浮窗应用栏开启浮窗
  从屏幕边缘滑出应用浮窗栏，可以开启所有小窗应用，同时应用浮窗栏支持拖拽移动位置。
• 手势开启浮窗
  全屏应用下支持手势底部上滑开启应用浮窗。
• 浮窗悬挂态
  通过浮窗悬挂态菜单、浮窗底部拖拽上滑、进多任务、返回桌面等操作将应用浮窗切换为悬挂态。
• 浮窗切换全屏
  向下轻扫浮窗底部，应用浮窗切换为全屏状态
• 浮窗切分屏
  支持在浮窗状态下通过顶部分屏菜单切换为分屏状态

4.2.3 浮窗和悬挂态浮窗适配技术指南

• ZUI的小窗是基于Android的多窗口Freeform方案实现的。
• 小窗目前主要问题是应用兼容性导致的一系列问题，内容显示不全、Touch事件不响应等等，其根本原因是应用没有很好的支持、适配多窗口、多分辨率，如下是小窗适配的一些参考性适配指南。
• 多窗口适配支持文档：
• https://developer.android.com/guide/topics/ui/multi-window#dnd
• 支持不同屏幕分辨率的开发技巧文档：
• https://developer.android.google.cn/training/multiscreen/screensizes

4.2.3.1常用适配方法

4.2.3.2其他说明

应用浮窗功能在ZUI13安卓R版本以上支持

4.3 自由分屏

4.3.1 自由分屏功能介绍

自由分屏主要满足用户在处理主要任务场景，快速调起分屏处理另一任务的场景，同时满足用户切换分屏应用位置，比如一边聊天、一边购物；一边听网课，一边记笔记等

4.3.2 如何使用自由分屏

• 三指双击快速开启分屏
• 分屏应用互换位置
• 分屏替换应用

4.3.3 自由分屏场景和表现

• 默认将窗口一分二，支持调整窗口大小。
• 支持横屏
• 支持主应用始终在前台
• 对于折叠屏设备，在屏幕展开状态下，分屏模式为左右分屏，而且宽度支持多档位调节

4.3.4 分屏适配技术指南

• 从 Android 7.0开始， 新增了一个 Activity 属性： resizeableActivity ，以声明该 Activity 是否支持多窗口显示：android:resizeableActivity=["true" | "false"],如果这个属性设为 true ，Activity 就可以在分屏模式下显示；设为 false ，Activity 则不会在分屏模式下显示，而是会占满整个屏幕。因此开发者可以根据具体场景，仅让部分Activity 支持分屏。
• 若开发者没有为 Activity 声明该属性，Android 会根据应用的 target SDK Version 及 Activity 的 screenOrientation 属性来综合判断是否可以在分屏显示。
• 更多关于判断的详细逻辑，可以参考官方文档：https://developer.android.com/guide/topics/ui/multi-window.html#configuring

4.2.5 其他说明

用户为什么需要分屏？

我们认为分屏最主流的使用场景是：一边看视频，一边做其它事情。用Pad看视频，已经成为用户的主流场景，各大视频应用的日活人数、使用次数、使用时长都可以佐证这个观点。但使用Pad看视频有很多痛点，比如会被 IM 消息打断、切换至后台视频会暂停等。这些痛点都可以通过分屏较好地解决，这也是分屏能成为大众需求的潜力。

但不可否认的是，分屏也会带来很多可用性问题，尽管系统已经做了很多优化工作，仍然需要各大开发者做进一步的优化，提高分屏模式的可用性。因此非常希望各位开发者能够支持该功能，为广大用户提供更好的使用体验。

5、开发与测试模式

5.1 模拟器调试

平板设备可以在Android Studio里面选择模拟设备：

5.2 命令模拟调试

可以通过如下adb命令来切换到平板设备的分辨率：

//切换到2560x1600分辨率

adb shell wm size 1600x2560

5.3 测试用例建议

5.3.1 用例1

在平行视窗模式下，应用的界面显示和功能交互均正常

1. 预制条件：应用支持平行视窗
2. 测试步骤

（1）打开应用，点击页面进入平行视窗模式；

（2）观察页面显示是否正常；

（3）点击页面的各个按钮，观察功能交互是否正常。

3. 预期结果

（1）应用在平行视窗模式下，没有任何页面变形、截断、模糊、缺失等问题；

（2）应用界面的所有按钮功能均交互正常。

5.3.2 用例2

进入应用的浮窗模式，应用的界面显示和功能交互均正常

1. 预制条件：应用支持浮窗
2. 测试步骤

（1）通过手势&多任务应用菜单&侧边栏，进入应用的小窗模式；

（2）观察页面显示是否正常；

（3）依次点击各个页面的按钮，观察功能交互是否正常。

3. 预期结果

（1）应用在浮窗模式下，没有任何页面变形、截断、模糊、缺失等问题；

（2）应用的所有页面按钮均可以正常响应，没有任何无反应/crash/anr等问题；

5.3.3 用例3

在分屏模式下，应用的界面显示和功能交互均正常

1. 预制条件：应用支持分屏
2. 测试步骤

（1）通过三指快速点击&多任务应用菜单&浮窗顶部菜单进入选择分屏界面

（2）选择分屏应用开启分屏

（3）观察页面显示是否正常；

（4）点击页面的各个按钮，观察功能交互是否正常。

3. 预期结果

（1）应用在分屏模式下，没有任何页面变形、截断、模糊、缺失等问题；

（2）应用界面的所有按钮功能均交互正常。

6、联系我们

第三方适配技术接口：zuiexpress@lenovo.com

商务合作：zuiexpress@lenovo.com

相关文档：https://open.lenovomm.com/developer/doc?id=1559820584255500290#w-e-element-5

联想开放平台地址：联想开放平台

联想开发者专属QQ客服（工作日9：30-18：00）：联想开发平台首页右侧悬浮的在线客服聊天入口可直接会话，无需添加好友。也可搜索官方客服QQ号2881414004。

联想应用商店微信公众号：