优酷APP响应式布局在消费场景的落地Android | 《优酷响应式布局技术全解析》第五章

简介: 本章介绍 优酷APP响应式布局在消费场景的落地Android

上一章:优酷APP响应式布局在分发场景的落地 | 《优酷响应式布局技术全解析》第四章>>>
下一章:优酷响应式在消费场景的落地 iOS | 《优酷响应式布局技术全解析》第六章>>>

作者| 阿里巴巴文娱技术 吉欧

一、背景

随着时代的发展,硬件设备的类型也是百花齐放,出现了各种各样的大屏设备(pad、折叠屏、车机)及屏幕模式(多屏、分屏),所以对于大屏下响应式的适配很有必要,视频播放场景的适配在整体适配中属于比较特殊的一块,既要兼顾播放渲染,又要照顾横竖屏切换对适配的影响,同时还要处理各种播放内容展示的处理。本文介绍一下优酷播放场景在响应式适配的一些困难及实现方案。

二、业务介绍

播放页作为用户视频消费场景的落地页,主要提供包括视频播放、内容介绍、互动、推荐等。页面类别及页面元素都比较复杂,页面类别有:剧集、电影、综艺、少儿、体育、新知等;其元素主要有:组件、半屏、tab等。
常见的几种页面类别及元素如下图所示:
image.png

播放页首屏

image.png

讨论tab

image.png
tab展示

image.png

综艺播放页

三、播放场景的特殊性

虽然响应式sdk提供了响应式的Activity和Fragment,两者都通过onResponsiveLayout来回调响应式的变化,从而根据回调的响应式状态可以判断是否分屏展示,同时响应式sdk提供了响应式宽度计算及组件间距计算等,可以复用在播放页,但是对于播放页的特殊性还是需要单独处理。
响应式在播放页,相对于其他场景的特殊性:

1、播放比例适配

需要考虑播放页在一定屏幕宽度下的展示效果,不能直接按手机上一样展示,这样会很宽,并且播放比例也会有问题,所以需要考虑在屏幕宽度达到一定宽度时,分为两部分的模式以及半屏如何打开;

2、多设配、多模式适配

响应式包含很多的模式,比如华为平行视界、多应用分屏(可拖动),也包含不同的设备,比如折叠屏、pad(横竖切换),都需要考虑不同场景下如何适配,尤其在横竖转屏之后的处理,尤为复杂。对于不同组件在半屏以及首屏个数、宽度的展示也需要处理;

3、横竖进入适配

设备可以横着进入播放页也可以竖着进入播放页,对于两种不同进入方式,以及退出后台之后切换进入方式以后,状态保存的处理,也需要适配。

四、适配架构

基于以上三点,如何去解决这些特殊问题以及更好的用户体验,整体适配主要依赖于以下的架构来实现。

image.png

播放页响应式是在统一架构及响应式SDK基础上实现的,继承于响应式的Activity或Fragment,从而可以通过响应式回调来处理一些布局及逻辑展示问题。

在整个上层,实现一套响应式管理类,统一处理响应式下分屏状态,页面尺寸及组件根据不同尺寸适配的个数,大小等。最上层则是具体的组件,半屏及分屏策略的实现。

五、适配具体方案

播放页整体页面继承自对应的响应式页面Activity,从而可以收到响应式变化回调onResponsiveLayout(),达到对整个响应式回调的监听,对于不同的页面区域采用Fragment管理的方式。

1、页面适配:分屏实现

为了解决提到的特殊性播放比例适配的问题,采用在横屏模式下,播放页采用左右分屏的模式,将评论移到了右侧屏部分,这样可以让用户观看更多的有趣评论,以增加内容互动性;播放页横屏下展示效果如下图:

image.png

同时半屏也从会在右侧打开,既不影响播放,也不会覆盖左侧区域。比如简介半屏,效果如下:

image.png

具体实现方案:
1)根据适配比例及内容分配,建议将左右两边分别拆分成6:4的大小,左边占整个屏幕的60%,右侧评论部分占整个屏幕的40%,来方便适配内容展示达到最佳的影片播放效果,通过Guideline来进行分割。

<android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6"/>

然后两侧采用不同的Fragment来加载,在收到页面响应式变化回调之后,处理是否展示右侧部分逻辑

    @Override
    public void onResponsiveLayout(Configuration configuration, final int responsiveLayoutState, boolean responsiveLayoutStateChanged) {
        //响应式状态有变化
        if (responsiveLayoutStateChanged) {
            //大屏状态展示右侧区域
           if (responsiveLayoutState == RESPONSIVE_LARGE_LAYOUT) {
               //展开右侧区域
        showExpandScreen();
           }else{
        //隐藏右侧区域
                hideExpandScreen();
           }
        } else {
            //响应式没发生变化不做展开右侧处理
        }
    }

2)分屏半屏处理
半屏即播放页可以更多内容展示的一个容器,会覆盖在原来的视频播放页部分。在横屏下半屏展示在右侧区域(如上图),在竖屏下,半屏在播放器下部分展示(如下图),所以对于半屏其实有三种状态展示,小屏下半屏,大屏横屏下半屏,大屏竖屏下半屏;

在半屏适配时,采用不同view加载的方式,小屏下展示半屏:由于小屏下是一个单独的Fragment,所以只考虑在内部计算半屏的容器即可以实现播放器下部展示;

对于大屏下,是另一个Fragment,需要考虑在横屏及竖屏下有不同的展示,所以采用两个view的方式,不同的展开状态会有不同的半屏view,在这个不同的view上add半屏的fragment,这个时候需要注意view的管理,不能出现布局加载错乱的问题,导致addview的时候出现NPE的问题。

 //响应式半屏处理
if (DetailUtil.isSurportResponsive(getActivity())) {
    //有右侧展开区域,则采用右侧区域view
    if (ResponseLayoutManager.getHasGuideLine()){
        mContainerLayout = mRootView.getRootView().findViewById(R.id.responsive_half_screen_land_container);
    } else {
        //没有右侧展开区域,直接调用竖直方向view
        mContainerLayout = mRootView.getRootView().findViewById(R.id.responsive_half_screen_portrait_container);
    }

    mContainerLayout.setVisibility(View.VISIBLE);
} else {
    //非响应式采用直接fragment的veiw
    mContainerLayout = mRootView.findViewById(R.id.half_screen_container);
}

image.png

半屏效果

2、组件适配

播放页有近20+个组件,不可能每个组件都适配一次,所以最重要的是如何利用统一架构实现最小逻辑处理。基于此目标,将组件分为三类适配:

1) 带有半屏组件统一处理
即该组件可以打开半屏,因为之前已经提到过在大屏横屏下半屏会在右侧展开区域展示,而右侧区域的大小随着设备,大屏模式的不同,宽度会不同,根据响应式sdk提供的容器宽度计算组件列数的方法(可参考响应式sdk的列数适配),处理后效果如下,左边屏幕选集展示9个,但是在右侧部分因为容器较小,展示6个,其他组件类似。在屏幕变化时,布局个数会做出相应的变化以适配不同的屏幕。

image.png

2)组件个数根据屏幕大小适配
比如相关双列(手机屏默认展示2列),banner(默认展示2个),这类组件之前已经写死了个数,所以在处理的时候,需要根据屏幕的变化来更改展示的个数,比如相关双列,会随着屏幕的变化在2列和3列之间变化(多屏下可以拖动改变屏幕比例)其他类似,效果如下:

image.png

三列

image.png

双列

在手机上会显示2列,在大屏下会根据计算,适配成3列。

3、全屏承接页适配

image.png

全屏展示

全屏适配主要问题在于横屏下分两个区域时候会出现问题:由于横屏下分两个Fragment来处理,所以在这种状态下直接在Fragment上打开另外一个view,会出现这个view只展示在一侧。比如下载按钮会打开一个新的Fragment,而此时下载是在左侧区域的Fragment中,如果直接打开则打开的页面只在左侧区域展示下载列表,右侧还是评论,这样不符合预期。

因此,在这种模式下,需要增加一个全屏的view,用这个view来加载打开的Fragment,而如果在横屏或者小屏下,还用左侧区域fragment的view来加载。
这个处理同样要管理好view的使用,防止NPE的错误,所以在架构图中的响应式管理类尤为必要,只有通过这个响应式管理类才能知道目前页面状态以及相关的操作。

4、播放器适配

播放器部分的适配相对比较简单,因为之前已经做过相关尺寸的处理,具体存在的问题有:

1) pad很多都是在屏幕上的挖孔屏,所以适配时要留出挖孔位置,同时注意要处理两个部分,因为屏幕是可以旋转的左上角及右下角的位置都应该注意处理;

2) 播放view渲染的处理,在响应式下,屏幕的大小会随时修改的,所以要能顺畅播放,需要做到播放view可以支持根据父view的大小,随时渲染视频的大小。

六、总结

以上列出了播放页在适配的时候遇到的一些主要问题及解决方案,响应式适配的细节处理尤为重要,下面总结一些适配经验:

1、 尺寸实时计算:要根据一套尺寸计算算法能够适配多种场景,并且是实时的计算适配。不能根据设备来判断处理,而是要根据尺寸来判断处理逻辑;

2、 统一管理:一套完善的管理类来管理状态及记录当前屏幕状态,这样才能更好的支持上游逻辑。避免造成各种状态错乱问题;

3、 提炼共性,组件化思维:对于具有共性的模块或者业务比如组件,需要思考从中找出共性,尽可能做到一个计算处理就能达到整个模块的处理,避免每个都进行修改处理,增加维护成本;

4、 未来,大屏的右半屏将“大有可为”:在大屏上右半屏可以做更多的事,让用户看到更多想看的内容,提供更多的内容曝光及选择。

相关文章
|
5月前
|
Android开发 数据安全/隐私保护 开发者
Android自定义view之模仿登录界面文本输入框(华为云APP)
本文介绍了一款自定义输入框的实现,包含静态效果、hint值浮动动画及功能扩展。通过组合多个控件完成界面布局,使用TranslateAnimation与AlphaAnimation实现hint文字上下浮动效果,支持密码加密解密显示、去除键盘回车空格输入、光标定位等功能。代码基于Android平台,提供完整源码与attrs配置,方便复用与定制。希望对开发者有所帮助。
|
8月前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
230 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
300 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
7月前
|
存储 编解码 开发工具
Android平台毫秒级低延迟HTTP-FLV直播播放器技术探究与实现
本文详细探讨了在Android平台上实现HTTP-FLV播放器的过程。首先介绍了FLV格式的基础,包括文件头和标签结构。接着分析了HTTP-FLV传输原理,通过分块传输实现流畅播放。然后重点讲解了播放器的实现步骤,涵盖网络请求、数据解析、音视频解码与渲染,以及播放控制功能的设计。文章还讨论了性能优化和网络异常处理的方法,并总结了HTTP-FLV播放器的技术价值,尤其是在特定场景下的应用意义。
264 11
|
7月前
|
XML JavaScript Android开发
【Android】网络技术知识总结之WebView,HttpURLConnection,OKHttp,XML的pull解析方式
本文总结了Android中几种常用的网络技术,包括WebView、HttpURLConnection、OKHttp和XML的Pull解析方式。每种技术都有其独特的特点和适用场景。理解并熟练运用这些技术,可以帮助开发者构建高效、可靠的网络应用程序。通过示例代码和详细解释,本文为开发者提供了实用的参考和指导。
178 15
|
7月前
|
监控 Shell Linux
Android调试终极指南:ADB安装+多设备连接+ANR日志抓取全流程解析,覆盖环境变量配置/多设备调试/ANR日志分析全流程,附Win/Mac/Linux三平台解决方案
ADB(Android Debug Bridge)是安卓开发中的重要工具,用于连接电脑与安卓设备,实现文件传输、应用管理、日志抓取等功能。本文介绍了 ADB 的基本概念、安装配置及常用命令。包括:1) 基本命令如 `adb version` 和 `adb devices`;2) 权限操作如 `adb root` 和 `adb shell`;3) APK 操作如安装、卸载应用;4) 文件传输如 `adb push` 和 `adb pull`;5) 日志记录如 `adb logcat`;6) 系统信息获取如屏幕截图和录屏。通过这些功能,用户可高效调试和管理安卓设备。
|
7月前
|
存储 弹性计算 安全
阿里云服务器ECS通用型规格族解析:实例规格、性能基准与场景化应用指南
作为ECS产品矩阵中的核心序列,通用型规格族以均衡的计算、内存、网络和存储性能著称,覆盖从基础应用到高性能计算的广泛场景。通用型规格族属于独享型云服务器,实例采用固定CPU调度模式,实例的每个CPU绑定到一个物理CPU超线程,实例间无CPU资源争抢,实例计算性能稳定且有严格的SLA保证,在性能上会更加稳定,高负载情况下也不会出现资源争夺现象。本文将深度解析阿里云ECS通用型规格族的技术架构、实例规格特性、最新价格政策及典型应用场景,为云计算选型提供参考。
|
8月前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
262 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
8月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
245 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
7月前
|
人工智能 自然语言处理 算法
DeepSeek大模型在客服系统中的应用场景解析
在数字化浪潮下,客户服务领域正经历深刻变革,AI技术成为提升服务效能与体验的关键。DeepSeek大模型凭借自然语言处理、语音交互及多模态技术,显著优化客服流程,提升用户满意度。它通过智能问答、多轮对话引导、多模态语音客服和情绪监测等功能,革新服务模式,实现高效应答与精准分析,推动人机协作,为企业和客户创造更大价值。
616 5

热门文章

最新文章

  • 1
    Android实战经验之Kotlin中快速实现MVI架构
    344
  • 2
    即时通讯安全篇(一):正确地理解和使用Android端加密算法
    211
  • 3
    escrcpy:【技术党必看】Android开发,Escrcpy 让你无线投屏新体验!图形界面掌控 Android,30-120fps 超流畅!🔥
    553
  • 4
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    854
  • 5
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
    313
  • 6
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    230
  • 7
    Android历史版本与APK文件结构
    739
  • 8
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    245
  • 9
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    262
  • 10
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    491
  • 推荐镜像

    更多