阿里妹攻略：传统的多端适配方案是针对大尺寸Pad开发特定的高清版本。不过，目前支持Android系统的设备种类越来越丰富，不同类型设备的尺寸也越来越多样化。特定的高清版本无法适应所有设备尺寸。该应用如何在如此多尺寸的设备上为用户提供更一致的浏览体验？阿里文娱科技叮咚将分享优酷APP响应式技术的实现与实现，希望对所有APP开发者有所启发。Android响应式解决方案响应式的核心是拉通多终端的适配规则，开发一套接口，让APP兼容多尺寸终端设备的显示。分屏等）调整相应的页面布局和容器大小，为用户提供更舒适的界面和更好的用户体验。1响应式SDKApp的每个页面都支持响应式，开发成本很高。响应式SDK是为了解决App适配不同尺寸设备的问题，将设备屏幕信息、容器布局规则（列数、大小）、业务数据二次处理等行为统一管理，以适配新屏幕尺寸。2加载流程设计一般的页面加载流程通常从数据返回开始，数据解析完成后，进行页面布局渲染和容器布局渲染。响应式是在通用加载流程的基础上，增加了响应式状态变化通知、响应式数据裁剪、响应式页面布局、响应式容器布局等流程。具体加载过程分为两种情况：用户请求数据的屏幕尺寸变化3架构设计优酷各业务开发团队采用统一的业务架构。我们在统一架构的基础上进行响应式适配，提供响应式SDK，通过各业务方不同页面的适配规则，保证适配效果的一致性，同时提供响应式基础控件，减少访问商务聚会的成本。那么响应式架构是如何实现的呢？?从结构上看，响应式是由优酷的统一架构、响应式SDK、响应式页面布局、响应式容器布局共同完成的。在此基础上，支持首页、频道页、播放页、会员页、搜索、个人中心等众多业务场景。优酷统一架构和响应式SDK，提供响应式架构能力。响应式页面布局，响应式容器布局，提供响应式参考实现。4响应式数据二次处理不是简单的把现有Phone终端的业务数据放到Pad和折叠屏上，简单适配UI页面。为了在不同尺寸的设备上获得良好的适配效果，需要在Phone端对业务数据进行二次处理，如数据过滤、数据映射、数据合并、数据补全等，以更好地适配到Pad和折叠屏。响应式SDK只负责定义数据二次处理的协议规则，具体的数据二次处理逻辑需要业务方实现。优酷的统一架构提供了对数据进行切片的能力，在切片上添加二次数据处理的逻辑，实现数据的统一处理。数据过滤在大型设备上，总会有一些复杂的、不合适的、不重要的组件。这些组件可以根据具体情况进行过滤。比如下图中的weex组件，可以直接在Pad上过滤掉，不显示。Pad上存在一些数据映射交互复杂的组件或者适配效果不好的组件，可以直接映射到其他适配的组件上。例如：下图中带视频预览的约会组件映射到一个普通的约会组件。Datamerge两个相邻的组件，其中一个不能很好地适配大尺寸Pad，可以尝试将其数据合并到其他组件中。例如：下图中第一个组件的宽度覆盖了页面的宽度，无法进行大尺寸适配。可以通过修改列数和大小来调整第二个组件。在Pad竖屏下，将第一个组件插入到第二个组件的第一个位置，进行数据合并，根据第二个组件进行适配，显示为3列2行，适配效果很好。数据补全在横竖屏切换的过程中，部分组件会遇到组件数量多，无法覆盖屏幕宽度，导致出现空白的问题。举个例子：把手机上的6条数据直接放在Pad横屏下面，就会出现如下图的空白问题：为了解决这种数据丢失的问题，我们的解决方案choose是从服务端发送更多的业务数据，客户端根据具体的屏幕尺寸动态调整显示数量，保证显示效果。例如：下图中，手机端显示2列3行，共6条数据，Pad竖屏显示3列2行，共6条数据，Pad横屏会完成2条数据，显示4列2行，共8条数据。5PageResponsiveResponsiveState响应状态是页面响应最基本也是最重要的能力，比如横竖屏切换、分屏模式、折叠屏的折叠和打开，都会引起页面的宽高发生变化，从而导致在不同的响应模式状态下，页面中的内容会被重新布局并调整组件的大小以适应页面大小的变化并填充屏幕以达到更好的显示效果。横竖屏切换：分屏模式：折叠屏：响应式状态管理响应式状态与Activity页面的生命周期一致，不同页面的响应式状态可能不一致。ResponsiveSDK提供了两个基类，ResponsiveActivity和ResponsiveFragment。ResponsiveActivity统一封装响应式状态变化。当屏幕尺寸改变时，ResponsiveActivity和ResponsiveFragment会回调onResponsiveLayout方法。业务方收到onResponsiveLayout的通知，主动遍历当前页面中的所有容器，根据响应状态动态修改容器的布局、布局列、大小。重新呈现当前页面。因为优酷采用统一的框架，根据响应状态动态修改页面中所有容器的逻辑，在框架内统一处理，避免业务方修改，降低接入成本。/***响应状态回调**@paramnewConfig配置信息*@paramresponsiveLayoutState当前响应状态*@paramresponsiveLayoutStateChanged响应状态发生变化*/protectedvoidonResponsiveLayout(ConfigurationnewConfig,intresponsiveLayoutState,booleanresponsiveLayoutStateChanged){}获取响应状态Responsivestate的定义需要特定的计算规则.在各种尺寸的设备上，状态的区分都是按照统一的规则进行的，那么如何区分不同的响应状态呢？首先，定义一个标准手机屏幕的物理宽度为400dp（经过大量手机设备调试采样得到的手机标准物理尺寸的经验值），则响应状态的变化为由两个比率阈值确定，一个是页面物理宽度与标准物理宽度的比率阈值1.67倍（物理宽度=像素宽度÷屏幕密度），另一个是页面高度的1.25倍比率阈值页面宽度。那么这两个比率阈值是怎么来的呢？(1)1.67倍是怎么来的？在播放页面的适配过程中，需要适配左右栏的显示。我们认为左边播放器的宽度是标准物理宽度，那么整个页面的宽度就是标准物理宽度的1.67倍，这样左边的播放器就有足够的空间来保证视频播放的体验，而右边的播放器也有足够的空间来保证评论的展示效果。(2)1.25倍是怎么来的？上图显示，在竖屏华为Pad上，页面高度是页面宽度的1.6倍，播放器下方的视频内容操作区显示了足够的视频内容。如果页面高度小于页面宽度的1.25倍，会挤压视频内容操作区的高度，导致视频内容显示过少，影响用户体验。当页面物理宽度大于标准物理宽度的1.67倍，且页面高度小于或等于页面宽度的1.25倍时为大屏状态，其他情况为小屏状态.不同响应状态目前支持小屏布局和大屏布局两种状态。（1）小屏布局状态折叠屏折叠、折叠屏分屏、Pad竖屏：（2）大屏布局状态折叠屏打开、Pad横屏：6个containerresponsive容器响应，主要解决页面大小变化时动态调整容器布局的列数和坑的大小，优酷统一架构提供了常用的响应式容器布局：轮播布局、网格布局、横向布局、瀑布流布局。业务方可以快速达到响应的效果。容器适应列数和大小的影响。列数适应同一个容器。在不同大小的页面下，会根据页面的物理宽度动态适配，显示为不同的列号。网络布局、水平布局、瀑布流布局都采用了这套列数适配规则：响应式适配后的列数=当前屏幕宽度÷（标准屏幕宽度÷标准屏幕宽度下的组件列数）响应的列数公式适配后无法解决Pad横屏部分组件列数过多、显示过于密集的问题。为了解决此类问题，提供了列数二次适配的能力。如下图，直接按照规则计算出来的Pad横屏的列数是8列，过于密集，显示效果不好。右边的列数调整了两次，显示为6列。适配效果：控件尺寸适配由于不同的屏幕尺寸，容器内部会动态调整显示的列数，从而导致控件尺寸的变化，那么如何适配控件尺寸的动态变化呢？响应式基础控件可以很好的解决这类问题。响应式基础控件内部封装了响应式容器尺寸的适配规则，通过ratioType定义了控件在不同适配规则下的宽高计算逻辑。业务方只需要通过设置ratioType来修改最外层的布局控件即可。快速完成宽高适配，降低业务方的适配成本。提供了ResponsiveConstraintLayout、ResponsiveFrameLayout、ResponsiveLinearLayout、ResponsiveRelativeLayout、ResponsiveRecyclerView等基础响应式容器。ratioType宽度计算规则示例（页面左右边距和水平间距不变）：响应式控件宽度=（当前页面宽度-左右边距-控件间距之和）÷总结响应式适配后的栏目数随着折叠屏技术的进一步发展，折叠屏手机会越来越普及，需要适配折叠屏手机的APP也会越来越多。响应式可以很好的解决折叠屏的适配问题。希望未来更多的APP能够适配响应式，实现一套代码，运行在不同大小的设备上，节省开发成本，提高开发效率，为设备带来与移动版本一致的用户体验不同大小的。【本文为专栏作者《阿里巴巴官方技术》原创稿件，转载请联系原作者】点此查看作者更多好文
