作者|阿里巴巴娱乐科技Gio
头部| CSDN下载自东方IC
背景
随着时代的发展，硬件设备类型百花齐放，各种大屏设备和屏幕模式出现。所以要适应大屏响应模式。视频播放场景的适配是整体适配中比较特殊的部分，需要兼顾播放和渲染，以及横竖屏切换对适配的影响。同时需要处理各种播放内容的显示。介绍了优酷播出场景响应式改编的一些难点和实现方案。
业务介绍
播放页面作为用户视频消费场景的落地页面，主要提供视频播放、内容介绍、互动、推荐等。页面类别和页面元素比较复杂，页面类别包括:剧集、电影、综艺、儿童、体育、新知等。其元素主要包括:组件、半屏、tab等。
下图显示了几种常见的页面类别和元素:
游戏场景的特殊性
虽然responsive SDK提供了responsive Activity和Fragment，但是两者都是通过onResponsiveLayout回调响应的变化，这样就可以根据回调的响应状态来判断是否分屏显示。同时响应式SDK提供了响应式宽度计算和组件间距计算，可以在play页面中重用，但是play页面的特殊性还是需要单独处理。
相对于其他场景的特殊性，播放页面的响应性:
1.播放比例适应
需要考虑播放页面在一定屏幕宽度下的显示效果，不能像在手机上那样直接显示，会很宽，显示比例会有问题。所以需要考虑两部模式，以及当屏幕宽度达到一定宽度时，如何打开半屏；
2.多配置和多模式适应
应对包括很多模式，比如华为的平行视觉，多应用分屏，不同的设备，比如折叠屏，pad，都需要考虑在不同的场景下如何适应，尤其是横竖换屏后的处理，特别复杂。半屏中不同组件的显示以及首屏的数量和宽度也需要处理；
3.以任何方式输入自适应。
设备可以水平或垂直进入播放页面，状态保存的处理需要适应两种不同的进入模式以及退出后台后切换进入模式后。
适应性建筑
基于以上三点，如何解决这些特殊问题和更好的用户体验，整体适配主要看以下架构。
页面响应是在统一架构和响应式SDK的基础上实现的，继承自响应式活动或片段，所以一些布局和逻辑显示问题可以通过响应式回调来处理。
在整个上层实现了一套响应式管理类，统一处理响应式下的分屏状态、页面大小以及根据不同大小适配的组件数量和大小。顶层是具体组件、半屏和分屏策略的实现。
调整特定方案
播放页面的整个页面继承自相应的响应页面活动，因此可以接收ResponsiveLayout上的响应变化回调，并且可以监控整个响应回调。对不同的页面区域采用碎片管理。
1.页面适配:分屏实现。
为了解决上面提到的特殊播放比例适配问题，采用横屏模式，播放页面采用左右分屏模式，将评论移至右屏部分，让用户可以观看到更多有趣的评论，增加内容的互动性。页面横向屏幕下的显示效果如下:
同时，右侧也会打开半屏，既不会影响播放，也不会覆盖左侧区域。比如介绍半屏，效果如下:
具体实施方案:
1)根据适配比例和内容分布，建议将左右分为6:4大小，左侧占整个屏幕的60%，右侧评论部分占整个屏幕的40%，以利于内容显示的适配和达到最佳的影片播放效果，并按指引进行划分。
然后，两边加载不同的片段，在收到页面响应变化回调后，处理是否显示右边的逻辑。
@ Override publicfoidonresponsive Layout {//响应状态已更改如果{//大屏状态显示右区域如果{//展开右区域showExpandScreen}else{//隐藏右侧区域hideExpandScreen}} else {//响应没有变化，右侧扩展不处理}}
2)分屏和半屏处理
半屏播放页面是一个可以显示更多内容的容器，它会覆盖原来的视频播放页面。横屏的下半部分显示在右侧区域，竖屏显示在播放器的下半部分，所以半屏的显示实际上有三种状态:小屏的下半部分、大横屏的下半部分和大竖屏的下半部分；
在半屏适配中，采用了不同的视图加载方式来显示小屏下的半屏:由于小屏是一个单独的片段，只需要计算里面的半屏容器就可以实现播放器的下层显示；
对于大屏来说，又是一个碎片，需要考虑横屏和竖屏有不同的显示。所以采用两种视图，在不同的展开状态下会有不同的半屏视图。将半屏片段添加到这个不同的视图。这时候就需要注意视图的管理了，布局加载不能有混乱，添加视图的时候会出现NPE问题。
//响应半屏处理if)) {//如果有右扩展区域，则右区域view If){ mcontainerlayout = mrootview . getrootview . findviewbyid；} else {//没有右扩展区，直接调用垂直方向viewmcontainerlayout = mrootview . getrootview . findviewbyid；} mcontainerlayout . set visibility；} else {//无响应veiw mcontainerlayout = mroot view . findviewbyid带直接片段；}
半屏效果
2.组件适配
回放页面有近20+个组件，不可能每个组件都一次适配，所以最重要的是如何使用统一的架构实现最少的逻辑处理。基于这一目标，组件被分为两种类型的适应:
1)用半屏组件统一处理
即组件可以开半屏，因为之前已经提到过，大屏横屏的下半屏会显示在右边区域，右边区域的大小和宽度会随着设备和大屏模式的不同而不同。根据响应式SDK提供的计算组件列数的方法，处理后的效果如下。左侧屏幕选集显示9，但右侧部分显示6，因为容器较小，其他组件类似。当屏幕发生变化时，布局的数量也会相应变化，以适应不同的屏幕。
2)组件的数量根据屏幕尺寸进行调整。
比如相关的双栏，banner，这类组件之前已经写死了，所以处理的时候需要根据屏幕的变化来改变显示的数字。例如，相关的双栏将随着屏幕的变化而在2栏和3栏之间变化。其他类似的结果如下:
三排
双列的
手机上会显示两列，根据大屏幕下的计算会适配三列。
3.全屏页面改编
全屏显示
全屏适配的主要问题是横屏分成两个区域会有问题:因为横屏分成两个片段，在这种状态下，会直接在片段上打开另一个视图，这个视图只会显示在一边。比如下载按钮会打开一个新的片段，而此时下载是在左侧区域的片段中。如果直接打开，打开的页面只会在左边区域显示下载列表，右边是评论，不符合预期。
因此，在这种模式下，需要添加一个全屏视图，并使用该视图加载打开的片段。如果是在横向或小屏幕中，它还会加载左侧区域中片段的视图。
这个过程还需要管理视图的使用，防止NPE错误，所以架构图中的响应式管理类尤为必要。只有通过这个响应式管理类，才能知道当前页面状态和相关操作。
4.玩家适应
播放器部分的适配比较简单，因为之前已经处理过相关尺寸，具体问题如下:
很多pad是屏幕上的挖洞屏，所以在适配的时候要留出挖洞位置，同时处理两个部分，因为屏幕的左上角和右下角是可以旋转的，要处理；视图渲染处理，在响应模式下，屏幕的大小会随时修改，所以为了能够流畅播放，需要播放视图支持根据父视图的大小随时渲染视频大小。
摘要
以上列举了播放页面适配中遇到的一些主要问题和解决方法，响应式适配的细节尤为重要。以下是一些适应经验的总结:
1.尺寸实时计算:根据一套尺寸计算算法，可以适应各种场景，是实时计算适配。不能根据设备来判断加工，要根据尺寸来判断加工逻辑；
2.统一管理:一套完善的管理类来管理状态，记录当前屏幕状态，从而更好的支持上游逻辑。避免了各种状态混乱问题；
3.提炼共性和组件化思维:对于有共性的模块或业务，比如组件，需要思考寻找共性，尽量做到一个计算过程处理整个模块，避免每一个都修改，增加维护成本；
4.未来，大屏右半部分将“大有可为”:大屏右半部分可以做更多的事情，让用户看到更多想看的内容，提供更多的内容曝光和选择。
