优酷折叠屏适配下——从测试的角度思考折叠屏适配问题-阿里云开发者社区

播放适配篇

一、背景

上篇已经基本介绍了折叠屏的发展趋势、形态、以及折叠屏SDK的技术实现。

本篇主要介绍折叠屏在播放器上的适配方案和落地场景，同时从测试的角度怎么来保障折叠屏的适配。

对于折叠屏的适配，分为全屏播放态和非全屏态。效果如下：

非全屏态：

	未适配	分栏适配
效果
实现方式	播放效果还是沿用手机端的效果，无论从播放器大小，播放画面适配，播放操控等在折叠屏展开时，只是做到了相对比例的放大	通过响应式变化通知，虚拟组件，组件计算等进行了分栏处理，左侧可以作为一个常规的播放页，右侧展示半屏及更多的推荐内容
体验	折叠屏展开时整个画面会占绝大部分，用户操作很不方便，内容空白很大	可以展示更多的推荐内容，同时整体效果体验更好，内容空白区少，打开半屏直接在右侧展示

全屏态：

	厂商被动适配	悬停适配
效果
实现方式	厂商自己处理折叠态，并提供对应的手势操作控制	整体播放控制移动到了悬浮态下半部分，视频在上半部分，重新设计音量及亮度调节按钮，触摸形态也在下半部分
体验	对于播放的操作不是很方便，只能操作手势控制，播控还是在视频上面，其他播放器半屏等无法操作	很方便的可以进行操作，不会影响观看效果，半屏打开均在下半部分，不会遮挡视频，手势控制同时也在下半部分，未改变用户的操作习惯

通过上面的对比，可以看到，在非全屏态下，采用了双栏模式提升体验和分发效率。在全屏态下，采用了一套新的播控方式，可以方便地操作视频进度、声音、亮度。经过一系列的思考和实践，针对折叠屏悬停态进行了一系列的UI和交互上的体验升级。

二、整体效果

，时长00:30

从整体效果可以看到，整个悬浮态操作非常丝滑，用户可以直接操作下屏来实现播放控制。如果没有这套体验实现，这种情况下，用户操作播控还需要拿起手机，在上屏来操作，一来操作不方便，二来由于有折叠区域，很难做到精准操作。在展开态下，整个体验又恢复到了原来的大屏操作体验，整个视频居中，可以观看比较大屏的内容。

三、方案实现

上面介绍了折叠屏整个操作体验，那么这一套操作体验是如何实现的？怎么样做到播放控制的上下移动及全屏适配？怎么做到播放器可以在全屏及上屏之间切换？这一切离不开优酷播放器框架OnePlayer，整个视频画面、播控控制都是在此框架的基础上进行的。

1. 什么是OnePlayer？

OnePlayer是优酷定义的一套播放器插件适配框架，可以进行插件的动态插拔与配置，其核心包括插件的配置、插件视图加载、播放层级加载、插件动态插拔、消息通讯等。其设计初心隔离不同播放业务，一配即用，动态插拔。优酷的播放器就是在这套结构的基础上，来加载播放器上的各种插件，渲染不同插件的视图。

针对悬停和普通态切换的场景，需要更新每个插件View的显示区域。优酷播放器上承载着很多业务，插件很多，如果单个插件做适配的话，工作量会很大，并且改动后风险较高。经过多轮技术调研及可行性分析，最终找到了一套适配成本最低，改动最小，且易维护，符合OnePlayer思想(简单配置，插拔方便)的适配方案。

2、OnePlayer悬停态拓展配置

2. OnePlayer悬停态拓展配置

首先，经过调研与现有技术方案结合，我们将插件定义增加了悬停态下位置配置（如下），OnePlayer通过读取位置配置来处理每个插件在悬停态下的显示，这样后期新加入的插件很方便地可以适配上下屏的展示。

<!-- 折叠屏播控，只展示在下半屏 --><plugin name="player_foldscreen_control">    <param name="fold_layer_position" value="only_bottom"/></plugin>

将插件整体分为三类：

	不受悬停态控制的插件	悬停态下在下半屏	受悬停态影响
示例
变化	不随悬浮态变化，保持现有显示位置（比如快进提示插件）	不随悬浮态变化，一直显示在下半部分（比如播控条插件）	悬停及展开时会随之变化，可能居底也可能居上（比如播放容器插件）

有了上面三类基本涵盖了所有需要展示插件的需求，下面就是这三种配置下，具体怎么实现插件的不同加载。

3. 插件容器位置适配

OnePlayer插件的根布局设计为FrameLayout，如下图整个插件铺满整个屏幕，插件渲染在了其上面。为了动态地进行上下控制，并考虑成本，针对三种不同的插件分类，进行的操作可以总结为就是对整体插件的view进行上下margin操作，即移动插件的上边距或者下边距。

如上图所示，

对于分类1中，不受悬停态控制的插件，其实不用做对应的操作，其展示会对应的适配，

对于分类2中，永远在下屏展示的插件，当监听的悬停态变化时（其监听方式可参考上篇），直接设置其 MarginTop为屏幕中线到顶部的大小，及上屏的高度（其计算方式可参考上篇）

对于分类3中，受悬停态影响，可能居底也可能居上的插件，这个最为复杂，需要时刻监听悬停态的变化，在悬停态将MarginTop设置为顶部屏幕的高度，而在展开态需要恢复原来的位置，距离顶部为0，如果后续有顶部不为0的情况，还需要记住原来的位置，在展开之后进行恢复

整体实现流程如下

基于以上方案，可以很快地实现整个播放器上所有插件的适配，并对于后续增加的插件，只需要相应的xml插件配置即可，框架就可以实现对应的上下屏展示。很好地控制了开发成本及适配成本，同时不打破 OnePlayer设计的初心。

四、上述方案场景落地

悬停态的效果已在第二节效果展示中有，整体悬停态的实现，做到了在各家适配中体验最好，同时成本最低，效率最高的方案实现，同时通过与厂商之间悬停态的合作，带来了很多业务资源，并且该效果也作为厂商的一大卖点进行展示。

，时长00:12

创新播放形态-一折即用

，时长00:14

创新播放形态-平行酷看

在效果中可以看到有个平行酷看的按钮，点击之后会有一个新的播放流展示，平行酷看可以在手机的右侧展示（如下图1横屏样式所示），在折叠屏下需要展示在悬停态下面（如下图2折叠态样式所示），如何做到一个容器可以在两边同时复用，且能相互切换，整个效果采用上面的方案来实现的。

图1：横屏样式

图2：折叠态样式

从图中可以看到，对于容器的切换主要有两部分，

tab，从横文字状态转为竖文字下，
容器位置及大小适配
悬停态其他插件处理

（1）容器及大小适配

上面已经介绍了插件如何可以做到展示在悬停态下方，平行酷看也是作为一种插件来处理，通过上面的margin在悬停态将插件由原来的全屏展示变为只展示在下方。

图1中的右侧容器是一个fragment来添加到右侧view上，故在此处适配同理，只是在fragment大小及视频裁剪上需要处理。fragment大小为手机的宽度width-左侧tab宽度，在视频裁剪模式上由原来的宽度固定计算高度变换为设置宽高适配比例。

（2）tab适配

由于tab的形态都发生了变化，从横滑变成了竖滑，所以tab没法复用，需要重新写一个竖向tab，去掉原来的tab，tab切换与原来一致，只要处理fragment展示即可

（3）悬停态其他插件处理

由于悬停态下插件与原来图1中的插件基本一致，所以原来在同屏下适配的插件大小要恢复到原来的状态，根据不同插件的配置来实现插件如何展示。

折叠屏测试篇

一、背景

全球首款折叠屏手机的出现是在2018年，至今已经4年多，包括华为、三星、OPPO、vivo、小米以及摩托罗拉等在内的主流品牌厂商都相继发布了自己的折叠屏手机，并迭代了数代。随着技术的进步，到2022年折叠屏手机发展成了行业的亮点和热点，用户呈现可观的增长趋势。

在折叠屏领域，优酷与厂商合作最早可以追溯到2018年。2022年与厂商合作进度明显加快，效果明显，在“悬停态”、“OPPO接力”、“帧享超高”等领域都取得了不错的成果，例如获得“OPPO引力.折叠屏适配金奖”。随着用户dau持续增长，我们将持续提供优质的用户体验，快速跟进折叠屏能力创新迭代。

二、折叠屏特性保障

折叠屏的适配主要涉及两个痛点：

模式形态多样，需要根据各业务的特性来完成适配方案，有一定的改造成本
设备受限，无法对不同厂商、系统、折叠屏方式的设备，完成全面的兼容性测试保障

1. 折叠屏迭代看适配方向

在适配前，充分了解折叠屏技术演进对于方案的制定是很有必要的。2018年至今主要演变有：

2018年，Android 9.0首次支持折叠屏功能，提供了“应用连续性”、屏幕兼容性、多窗口适配的技术支持。到2021年，Jetpack WindowManager、SlidingPaneLayout、NavRail等的发布，奠定了折叠屏高速发展的基础。因此我们要针对这些特性进行适配。
各厂商陆续发布自己的折叠屏手机和独有的能力，例如oppo的悬停态、oppo接力、屏幕内折外折等，需要针对厂商特有能力提供适配方案。

从折叠屏的技术演变现状可以看出，在适配时，除了考虑折叠屏的特性外，还要针对厂商独有能力提供针对性方案。

2. 厂商设备差异看机型选择

折叠屏适配的目标是“当应⽤运⾏时，屏幕的尺⼨、密度或⽐例发⽣了变化，应⽤能够继续在变化后的屏幕上正常显示和正常运⾏”。目前市面主流的设备有如下几种(表1)，也是优酷目前支持的适配机型。在适配的时候，根据具体业务场景进行机型选择，主要适配原则：

连续性：外折/内折，从折叠状态到展开状态，体验应该是连续的，无缝的连接。
可读性：不同屏幕尺寸(密度)，充分利用屏幕空间以保障可读性，内容展现合理、易读。
操作性：尊重用户心智模型，在不同的场景下合理安排重要内容和操作选项。

3. 技术方案看适配成本

折叠屏的适配主要还是UI布局和交互的改造。像优酷这种综合型app，如果针对每个功能都做改造，工作量很大，而且改动后风险较高，因此，需要对各种场景进行技术可行性分析，尽可能保障体验最大化。例如，播放器非常多的插件，将插件整体分为三类：不受悬停态影响的 (比如快进快退提示插件)、永远显示在屏幕底部的 (比如播控条插件)、受悬停态影响可以居底也可能居上的插件(比如播放容器插件，比如选集插件)，根据插件配置的不同，对插件进行动态调整，控制适配范围。

三、优酷折叠屏适配保障

1. 业务布局适配场景

我们在适配大屏设备的时候，要求能够在竖屏和横屏之间无缝切换。但是折叠屏设备要支持在内屏和外屏之间无缝切换，从而拥有强大的功能和内容体验。我们通常会遇到如下几种窗口和尺寸情况，目前业内的几种解决方案是多列布局，Tab拉伸布局，分栏布局，左右布局和横屏拉宽。对于适配而言，需要尽量多针对以下屏幕宽高比测试自己的应用。

1.1 综合型首页：响应式拉伸处理

首页通常具有导航栏、可滑动元素与Banner等内容。在设计上对组件坑位进行了与pad版本统一的“包卡”设计，适配时，原有响应式布局保持不变，界面进行相对拉伸，展开态显示更多可滑动的内容，对屏幕空间的利用率更加充分。在技术实现上，优酷采用的是基于Design Token的设计模式，对折叠屏&pad同时进行扩展，同一个token可以在不同设备类型上进行差异化配置，来应对不同的屏幕倍率下各种元素适宜的显示大小。

1.2 卡片型Feed：更适合大屏的1+N交错网格布局

Feed场景，在折叠屏展开态下采用了“大卡环绕小卡”的1+N交错网格布局，突出“大卡”的分发效率，整体feed布局也更加整齐清晰、主次分明，提升美观度与信息浏览效率。

在技术实现上，每个1+8的结构使用一个GridLayout布局容器，通过动态调整GridLayout.spec的取值来实现“大卡”居左还是居右，完成“交错大卡”的布局效果。同时也能够在RecyclerView的缓存池中进行复用来确保滚动的高性能。

展开状态和折叠状态使用ViewStub来进行布局存根，防止创建多余的view，在展开/折叠状态切换的时候进行View的布局隐藏和展示。在布局上使用ConstraintLayout，展开/折叠两个状态的View之间不存在约束关系，所以切换布局的时候只有子view的隐藏和展示，并不需要重新进行布局计算，保证高性能。

1.3 搜索：分栏布局

搜索页采用了分栏设计，将“相关搜索”和“热门搜索”两个重要模块在边栏常驻。用户在寻找自己想看内容的同时，可以随时使用侧边栏切换搜索关键词。利用了折叠屏大屏的特性，相比于手机端简化了用户的操作路径，也更加便于新热内容的分发。

技术实现上，右侧的分栏使用Fragment容器实现，同时复用的是phone端榜单二级页的容易能力。内部的组件复用了phone端搜索默认页的组件。减少代码冗余，提高易维护性。

1.4 播放页：6:4双列模式

在更大的屏幕上，播放页通过调整框架结构，利用屏幕的宽度高效展示信息。整个播放页在折叠屏展开态为双列模式，左侧为播放器内容，右侧为为你推荐分发部分，其实现原理是在响应式基础上，在展开态，通过Guideline将整个屏幕划分为6:4的比例，即播放器部分占60%，右侧分发占40%。同时通过数据拆解，虚拟组件，组件隐藏与展示来实现。

1.5 弹幕：信息缩减

折叠屏的大屏观影是用户体验的一大优势。为减少弹幕对画面的干扰，又能发挥折叠屏的大屏优势，优酷针对折叠屏进行了弹幕位置处理。在折叠态下，将弹幕的位置控制在黑边内，默认弹幕行数开启为20%，仍超出做15%缩减。

测试方案上重点关注折叠屏上的普通弹幕以及高级弹幕展示范围，默认状态下不超出黑边，对画面无明显遮挡。

1.6 直播间：沉浸视频页

沉浸视频页是一种充分利用屏幕宽度，让用户在不进入全屏的情况下即可观看全屏尺寸视频的界面结构。

1.7 弹窗

在折叠屏上，弹窗大小内外屏保持一致，展开大屏的弹窗如要放大，最大不能超过屏幕高度的70%。有明显的关闭按钮，例如下面的霸屏预约、pop弹窗。

1.8 开屏广告

图片、视频元素具有固定的长宽比，不宜统一采用放大倍率进行适配。在展示启动图片时，不要直接拉伸，而是使用更大尺寸的图片，在启动时填满屏幕。

2. 折叠屏特性功能

2.1 悬停

折叠屏手机形态分为折叠态、展开态与悬停态。悬停态是设备处于完全展开和折叠的中间状态，可平稳放置，可悬停角度为：5°-160°。上面介绍了在折叠态、展开态下，页面布局的改造，现在来说一下，优酷播放器对悬停态的支持。如图，悬停状态下，上部展示播放内容，下部扩展视频操作。

对于支持悬停能力的设备，优酷对Android 13及以上的设备，定制了播放时的悬停能力，使整体的播放体验更加友好。技术实现上，优酷播放器的架构为OnePlayer，有100+个插件，每个插件都是一个层级概念。我们的目标就是最小的成本对插件布局进行改造。将插件整体分为三类：不受悬停态影响的 (比如快进快退提示插件)、永远显示在屏幕底部的 (比如播控条插件)、受悬停态影响，可以居底也可能居上的插件（比如播放容器插件，比如选集插件）。插件本身的根布局为FragmeLayout，针对三种不同的插件分类，我们对不同的插件进行margin处理。后续有新增插件适配悬停态很方便的进行适配。

2.3.2 内折与外折

内折和外折是目前市面上两种主流的折叠方式。外折的代表机型是华为的Mate XS 2，优势是轻薄。相对外折而言，更多的厂商支持内折，折弯半径更小，也更符合用户操作。但是对于适配而言，还是要回归到“屏幕比例”、“折叠方式”、“连续性”方面。

2.3 连续性

应⽤程序在屏幕切换过程⽆缝切换，需要做应⽤连续性的设计，以确保任务不中断。最佳的体验为，应⽤在展开/折叠切换过程中，不发⽣应⽤的重启，且切换之前的任务和应⽤相关状态得以保存和延续。多形态屏幕切换的动作通常是折叠屏或者投屏，会触发对smallestscreensize、screensize和screenlayout以及方向和密度的配置更改。每当发⽣配置更改时，默认情况下会销毁并重新创建整个activity。