概览
Android - 直播布局(1)
Android - 直播布局(2)
Android - 直播布局(1)
2020 年以来,因为疫情原因,直播格外的火。很多应用都引入了直播功能,我在写直播布局的时候,遇到了不少的问题,为了让后人少踩坑,写了个 Demo,希望能对以后做直播的人有所借鉴。
演示
]
项目地址:
https://github.com/ilpanda/live_demo
apk 下载地址(在 Github 上,下载可能较慢):
https://github.com/ilpanda/live_demo/blob/master/app-release.apk
基本功能
Demo 实现的功能仅仅是布局,没有实现直播以及 IM 功能,因为这些功能基本用的都是第三方服务,如腾讯云直播、阿里云直播。
直播布局以京东、淘宝直播为参照。直播布局支持的基本功能:
- 支持竖屏和横屏两种样式,支持横屏全屏。
- 支持上下滑动。京东和淘宝的直播都是支持上下无限滑动的。
上下滑动布局分析
直播和 IM 是比较消耗资源的,因此创建这些组件时都是使用的单例。直播布局支持上下滑动,也就意味着视觉上是多个直播布局,但实际上同一时刻只有一个直播。
上下滑动的组件大家首先会想到 RecyclerView。直播上下滑动确实可以使用 RecyclerView ,但我选择使用 ViewPager ,原因有两个:
-
RecyclerView 直播方面可用的参考资料比较少。
-
京东、天猫等主流 App 使用的都是 ViewPager 来做上下滑动,因此我推测使用 RecyclerView 会有一些坑,所以直接使用了 ViewPager 来做上下滑动 。(使用 Android SDK 中的 uiautomatorviewer 可以查看其它 App 所使用的组件。)
系统自带的 ViewPager 只支持左右滑动,因此我们直接使用开源组件:https://github.com/castorflex/VerticalViewPager ,VerticalViewPager 支持上下滑动。Android 的新组件 ViewPager2 也支持竖直上下滑动,其内部是对 RecyclerView 的封装,但这里还是紧跟大厂的脚步。
京东上下滑动接口分析
京东、淘宝直播看起来像上下无限滑动,因为他们的直播多,并且可以根据用户的停留时间做个性化推荐直播。首先分析下京东的直播接口:
京东的直播在滑动时,主要请求了两个接口:
- 根据直播间的 id,请求直播间的详细信息。
- 根据当前直播的直播间 id ,以及直播列表的类型,获取上一个直播以及下一个直播,从而实现无限滑动。
这里主要贴下第二个接口(京东对接口做了校验,第二次请求时会失效,因此这里贴个图片,就不贴接口了):
Demo 中的上下滑动实现 - 方案(1)
接口在设计上,参照京东的接口。传递一个直播间 id , 服务器返回当前直播间、前一个直播间以及下一个直播间的信息,从而实现无限滑动。
接口地址:
https://www.hi-cat.cn/api/live/slide?liveId=
如果 liveId 传递值为空,则默认返回第一个直播间信息。
Demo 中的上下滑动实现 - 方案(2)
我们的业务没有那么多的直播,所以上下无限滑动的接口设计上和京东的不一样,使用列表分页接口,实现无限滑动,这种方案,客户端需要做很多的逻辑判断。
用户从直播列表进入直播间,携带如下参数,获取分页的列表数据:
- page:标识请求的第几页数据。
- count:每页的数据,一般为固定值,如 10 或者 20 个。
- liveId:在直播间列表点击的直播。这个参数不是传递给服务器,是客户端根据服务器返回的列表数据,确定应该移动到哪个直播间。之所以不传递 position,是因为用户点击进入直播间之后,直播可能已经结束。因此使用 liveId 和服务器传递的数据比对,如果不存在,则移动到当前列表的第一条数据。
接口地址:
https://www.hi-cat.cn/api/live?page=1&count=10
优劣
- 方案一,客户端很好处理,不需要额外的逻辑处理,需要后端支持。
- 方案二,后端直接返回分页后的直播间信息,客户端根据直播间 id 确定位置,需要客户端做额外的逻辑处理。