作者|阿里巴巴娱乐科技金种子
头部| CSDN下载自东方IC
背景
随着科技的进步，硬件设备类型百花齐放，出现了多种大屏幕设备和屏幕模式。单一app支持大尺寸设备成本太高，一套代码高效支持不同尺寸的硬件设备已经成为趋势。在此背景下，优酷的应用技术团队进行了响应式开发，播放页面场景的适配以玩家为中心。大屏设备下播放器应该如何布局，内容分发应该如何布局？下面将介绍优酷Playpage在响应式适配方面的技术挑战和解决方案。
业务介绍
优酷主客消费场景是优酷App的播放页面。播放页面作为视频内容消费的落地页面，主要提供视频播放和视频周边内容推荐，业务场景和页面内容复杂。
1.组件:即视频相关内容承载控件，包括简介、选集、周边视频、花絮视频、推荐视频等。，通过它用户可以了解更多的视频相关信息；
2.半屏:半屏包括Native、Weex和H5，通过半屏用户可以看到更多与视频相关的内容，也可以进行视频互动。因为组件显示的内容还是有限的，通过半屏可以更好更完整的显示；
3.Tab: Tab允许用户在不同内容之间切换；
4.播放器上层:播放器交互、快进快退、下一集、清晰度、画中画等相关功能。
响应式和传统iPhone布局的区别
如上图所示，iPhone设备上播放页面的布局比较简单。根据播放器的模式，播放页面的状态可以分为以下几种:垂直小屏模式和水平全屏模式，分别依次对应上图的左右画面。在竖排小屏模式下，上面是16: 9的播放器，下面是周边的视频分发内容。当播放器切换到全屏模式时，就变成了全屏播放器，整体策略简单明了。但iPad的显示面积大大增加，简单移植iPhone的布局显然不合适。如何有效利用大屏设备的显示器空提供更好的交互体验，是回应中要解决的终极问题。
如上图所示，iPad上播放页面的布局更加复杂。根据播放器的模式，播放页面的状态可以分为以下几种:垂直小屏模式、水平小屏模式、水平全屏模式和垂直全屏模式。显示页面和iPhone的主要区别在于:
1.iPhone上的小屏模式只存在于设备方向为竖屏的情况下，iPad上的小屏模式可以存在于设备方向，竖屏或者横屏，增加了一个横屏小屏模式；
2.iPhone上的全屏模式只存在于设备方向为横屏的情况下，iPad上的全屏模式既可以存在于竖屏，也可以存在于横屏，相应的增加了一个竖屏的全屏模式；
3.模式切换自适应。由于新增了水平小屏模式和垂直全屏模式，不同模式之前切换对应的情况有很多，比如垂直小屏模式切换到水平小屏模式，垂直全屏模式切换到水平全屏模式；
4、iPad分屏功能，两个独立的app同时显示和运行。比如屏幕左边是我们的优酷app，右边可以是系统浏览器APP。
目前我们已经明确了iPhone和iPad的主要区别，同时也明确了适配的重点，即小屏模式、竖屏和全屏模式、模式切换、新模式之间的切换、iPad分屏特性。
适应焦点
1.小屏幕模式适应
小屏模式适配的第一个原则，重点是大屏幕设备显示窗口的宽度，根据不同设备显示窗口的大小来决定播放器的大小，从而决定整个页面的布局。优酷的播放页面适配策略是，如果当前大屏设备的显示窗口宽度达到指定的阈值，整个播放页面会被分成两部分。左侧可以视为传统的iPhone布局，右侧归类为显示评论和播放页面半屏的交互区域。我们称这种布局为分页模式。如果前置大屏幕设备的显示窗口宽度没有达到规定的阈值，就是传统的iPhone布局。
我们把整个计算逻辑抽象成一个类别来管理，内部定义分页模式宽度的阈值。根据这个阈值，我们可以确定我们当前是否处于分页模式，当前播放器的大小和右侧交互区域的大小，然后对整个页面进行布局。
@ interfaceiscreen+playviewronfivewidth；//Player width+orientation corrected rect；//设备大小+rightextresponsivewidth；//分页模式下右侧区域的宽度+isrightxtramode；//是否处于分页模式@end
当响应状态发生变化时，上述方法的返回值也相应变化，然后根据这些变化刷新页面布局。
...-responsiveLayoutDidChange{//更新播放器布局[self refreshPlayerLayout]；//更新周边视频相关布局[self refreshPageLeftLayout]；//分页模式更新交互区域布局[self refreshPageRightLayout]；} ...
页面布局时，将通用组件计算逻辑抽象到单实例管理类YKDetailLayoutManager中，便于重用和代码关闭。如果后续需求发生变化，只需要在管理类中修改通用部分:
@ interfacekdetaillayoutmanager:ns object+shared instance；//横向滑动分量，坑位法向宽度-横向分量宽度；//横向滑动构件，坑位小模宽-横向构件宽小；//相关组件，坑位单列模式宽度-关于componentsingleitwidth//相关组件，坑多栏模式宽度-about componenttoubleitemcwidth；//选择组件，坑宽-epic componentseriesitemwidth；...@end
在小屏幕模式下，半屏适配播放页面是播放页面的一种独特显示。在iPhone上，半屏在播放器下面，占满屏幕宽度。响应模式最大的变化是，如果当前处于分页模式，屏幕右侧区域会显示播放页面的半屏。适配的关键是关闭半屏框架，并在半屏页面初始化或响应状态改变时刷新半屏布局。
...-halfViewframe{case1:当前处于分页模式，返回右侧交互区framecase2:当前不处于分页模式，返回播放器下方外围视频对应的帧}.......-ResponsiveLayoutDidChange {//Get half-screen frame rect half frame =[self half view frame]；//根据获取的半屏帧，刷新半屏布局[self refresh halfwiewframe:half frame]；} ...
2.垂直和全屏模式适应
iPhone上的优酷播放器上层之前针对垂直视频推出了轻量级的垂直全屏模式，这种模式只存在于垂直视频中。在此基础上，响应式布局将这种模式扩展到所有视频，所以适配比较流畅。
3.模式切换适应
iPad上的模式切换变得更加复杂，出现了一些iPone上没有的新情况，比如从垂直小屏模式切换到水平小屏模式，从水平小屏模式切换到垂直小屏模式，从水平全屏模式切换到垂直全屏模式，以及从垂直全屏模式切换到水平全屏模式。我们的适应原则是:
1)符合玩家上层建筑的开发标准；
2)对播放器上部结构的侵害小；
3)代码聚合的解耦。
最终的解决方案是抽象出一个轻量级的中间件来完成模式切换，实现无创插入到原有架构中。内部基本原理是监控响应状态变化，根据当前设备屏幕方向和当前页面播放模式，动态改变页面播放模式，刷新页面布局:
...-responsivelayoutdidchange { case 1:当前设备为纵向，当前模式为水平左或水平右全屏模式，主动切换到垂直全屏模式。情况二:当前设备为水平左，当前模式为垂直全屏模式，主动切换到水平右全屏模式。情况4:在水平小屏幕模式和垂直小屏幕模式之间切换。...
4、分屏特性适配
如何应对iPad的分屏功能？实际上，分屏只是动态地改变显示窗口的宽度。只要严格遵循原则，适应窗口的宽度，上面的布局就会完美的应用到分屏特性上，不需要做更多的工作来适应分屏。效果如下:
摘要
1.尽量避免在响应式适配时到处打补丁，否则就到处修改UI布局。原则上按照父视图的大小来布局子视图，也可以使用自动布局等方案进行适配；
2.尽量实现同样的代码，可以在iPhone和iPad上完美运行；
3.充分梳理目前的技术架构，提炼出适合自己的技术方案，充分考虑可扩展性、可维护性、性能等诸多前提条件；
4.相信在不久的将来，手机APP会在MAC笔记本上流畅运行，整个平台大有可为。
