一个APP如何适配多个Andiroid终端？

原创阿里巴巴文娱技术阿里云开发者

阿里妹导读：传统的多终端适配方案，是为大尺寸Pad开发一个特定的HD版本。但是目前支持Android系统的设备类型越来越丰富，不同类型的设备尺寸也越来越多样化，特定的HD版本并不能适配所有设备尺寸。App如何在这么多尺寸的设备上，为用户提供较为一致的浏览体验？阿里巴巴文娱技术叮东将分享优酷APP响应式的技术实现和落地方法，希望对所有APP的开发同学有所启发。

文末福利：免费下载《优酷响应式布局技术全解析》电子书。

Android响应式方案

响应式的核心是拉通多终端的适配规则，开发一套界面，一个APP兼容多尺寸终端设备的显示，能够根据用户的行为以及设备的环境(屏幕尺寸、屏幕方向、是否分屏等)进行相应的页面布局以及容器尺寸的调整，为用户提供更加舒适的界面和更好的用户体验。

1 响应式SDK

App的每个页面支持响应式，开发成本是很高的。

响应式SDK，就是为了解决App在不同尺寸设备下的适配问题，把设备的屏幕信息、容器布局规则（列数、尺寸）、业务数据二次加工等行为进行统一管理，以适应新的屏幕尺寸。

2 加载流程设计

通用的页面加载流程，通常都是从数据返回开始，数据解析完成后，进行页面布局渲染以及容器布局渲染。响应式在通用加载流程的基础上，加入了响应式状态变化通知、响应式数据剪裁、响应式页面布局、响应式容器布局等流程。

具体加载的流程分为两种情况：

用户请求数据
屏幕尺寸发生变化

3 架构设计

优酷各个业务开发团队，使用了统一的业务架构，我们在统一架构的基础上进行响应式适配，提供了响应式SDK，拉通各个业务方不同页面的适配规则，确保了适配效果的一致性，同时提供了基础的响应式控件，降低业务方的接入成本，那么响应式架构具体是怎么实现的呢？

从结构上看，响应式由优酷统一架构、响应式SDK、响应式页面布局、响应式容器布局四部分相互配合完成。在这些基础上支撑了首页、频道页、播放页、会员页、搜索、个人中心等众多的业务场景。

优酷统一架构和响应式SDK，提供响应式架构能力。

响应式页面布局、响应式容器布局，提供响应式参考实现。

4 数据二次加工

响应式并不是简单的将现有Phone端的业务数据，投放到Pad、折叠屏上，单纯的进行UI页面适配。想要在不同尺寸设备上都能获得良好的适配效果，需要对Phone端的业务数据二次加工，进行数据过滤、数据映射、数据合并、数据补全等操作，才能更好的适配Pad和折叠屏。

响应式SDK只是负责把数据二次加工的协议规则定下来，具体的数据二次加工逻辑需要业务方自己实现。优酷的统一架构提供了数据切面的能力，在切面上增加数据二次处理的逻辑，实现了统一的数据处理。

数据过滤

大尺寸设备上，总会遇到一些复杂的，适配不了的，也不重要的组件，这部分组件可以根据具体情况过滤处理，例如：下图中的weex组件，在Pad上直接过滤掉，不显示。

数据映射

存在一些带交互的复杂组件或者Pad上适配效果较差的组件，可以直接映射成其他已适配的组件。例如：下图中的带视频预览的预约组件映射成普通的预约组件。

数据合并

相邻的两个组件，其中有一个组件无法很好的适配大尺寸Pad，可以尝试将其数据合并到其他组件内。

例如：下图中第1个组件宽度铺满页面宽度，在大尺寸上无法适配，第2个组件通过修改列数、尺寸就可以适配。Pad竖屏下，将第一个组件插入到第二个组件的首位，进行数据合并，按照第二个组件的进行适配，显示为3列2行，达到很好的适配效果。

数据补全

在横竖屏切换过程中，部分组件会遇到组件的数量，无法铺满屏幕的宽度，导致出现留白的问题。

例如：把手机上的6条数据，直接投放到Pad横屏下，就会出现下图的留白问题：

为了解决这一类数据缺失的问题，我们选择的解法是服务端多下发一部分业务数据，客户端根据具体的屏幕尺寸，动态调整显示的个数，确保显示效果。

例如：下图中手机上显示2列3行，共6条数据，到了Pad竖屏上显示3列2行，共6条数据，到了Pad横屏上会补全2条数据，显示4列2行，共8条数据。

5 页面响应式

响应式状态

响应式状态是页面响应式最基础也是最重要的一个能力，像横竖屏切换、分屏模式、折叠屏折叠打开，都会导致页面的宽高发生变化，产生不同的响应式状态，页面内的内容会进行重新布局以及组件尺寸调整，以适应页面尺寸的变化，铺满屏幕，达到更好的显示效果。

横竖屏切换：

分屏模式：

折叠屏：

响应式状态管理

响应式状态与Activity页面的生命周期保持一致，不同页面响应式状态可能不一致。响应式SDK提供了ResponsiveActivity、ResponsiveFragment两个基类，ResponsiveActivity统一封装了响应式的状态变化。当屏幕尺寸发生改变时，ResponsiveActivity和ResponsiveFragment会回调onResponsiveLayout方法，业务方接到onResponsiveLayout的通知，主动遍历当前页面内的所有容器，根据响应式状态，动态修改容器的布局、布局列数、尺寸等，重新渲染当前页面。

由于优酷使用了统一框架，根据响应式状态动态修改页面内所有容器的逻辑，统一在框架内部处理，避免了业务方的修改，降低了接入成本。

/**   *响应式状态回调   *   * @param newConfig                   配置信息   * @param responsiveLayoutState       当前响应式状态   * @param responsiveLayoutStateChanged响应式状态是否已发生改变  */protectedvoidonResponsiveLayout(ConfigurationnewConfig,intresponsiveLayoutState,booleanresponsiveLayoutStateChanged) {
}

获取响应式状态

响应式状态的定义，需要有一个具体计算的规则，在所有尺寸的设备上都按照统一的规则进行状态区分，那么不同的响应式状态是如何区分的呢？

首先定义标准手机屏幕的物理宽度为400dp（经过大量手机设备调试采样之后获得的手机标准物理尺寸经验值），那么响应式状态的变化，由两个比例阈值决定，一个是页面物理宽度与标准物理宽度的比例阈值1.67倍（物理宽度 = 像素宽度÷屏幕密度），另一个是页面高度与页面宽度的比例阈值1.25倍。那么这两个比例阈值是如何得来的呢？

（1）1.67倍是怎么来的呢？