Android - 直播上下滑动布局（1）

水深无声 2023-03-04 13:30 20阅读 0赞

### 概览 ###

[Android - 直播布局（1）][Android - _1]  
[Android - 直播布局（2）][Android - _2]

--------------------

### Android - 直播布局（1） ###

2020 年以来，因为疫情原因，直播格外的火。很多应用都引入了直播功能，我在写直播布局的时候，遇到了不少的问题，为了让后人少踩坑，写了个 Demo，希望能对以后做直播的人有所借鉴。

--------------------

### 演示 ###

![format_png][]\]

项目地址：  
https://github.com/ilpanda/live\_demo

apk 下载地址（在 Github 上，下载可能较慢）：

https://github.com/ilpanda/live\_demo/blob/master/app-release.apk

--------------------

### 基本功能 ###

Demo 实现的功能仅仅是布局，没有实现直播以及 IM 功能，因为这些功能基本用的都是第三方服务，如腾讯云直播、阿里云直播。

直播布局以京东、淘宝直播为参照。直播布局支持的基本功能：

1.  支持竖屏和横屏两种样式，支持横屏全屏。
2.  支持上下滑动。京东和淘宝的直播都是支持上下无限滑动的。

--------------------

### 上下滑动布局分析 ###

直播和 IM 是比较消耗资源的，因此创建这些组件时都是使用的单例。直播布局支持上下滑动，也就意味着视觉上是多个直播布局，但实际上同一时刻只有一个直播。

上下滑动的组件大家首先会想到 RecyclerView。直播上下滑动确实可以使用 RecyclerView ，但我选择使用 ViewPager ，原因有两个：

1.  RecyclerView 直播方面可用的参考资料比较少。
2.  京东、天猫等主流 App 使用的都是 ViewPager 来做上下滑动，因此我推测使用 RecyclerView 会有一些坑，所以直接使用了 ViewPager 来做上下滑动 。（使用 Android SDK 中的 uiautomatorviewer 可以查看其它 App 所使用的组件。）

系统自带的 ViewPager 只支持左右滑动，因此我们直接使用开源组件：https://github.com/castorflex/VerticalViewPager ，VerticalViewPager 支持上下滑动。Android 的新组件 ViewPager2 也支持竖直上下滑动，其内部是对 RecyclerView 的封装，但这里还是紧跟大厂的脚步。

--------------------

### 京东上下滑动接口分析 ###

京东、淘宝直播看起来像上下无限滑动，因为他们的直播多，并且可以根据用户的停留时间做个性化推荐直播。首先分析下京东的直播接口：

京东的直播在滑动时，主要请求了两个接口：

1.  根据直播间的 id，请求直播间的详细信息。
2.  根据当前直播的直播间 id ，以及直播列表的类型，获取上一个直播以及下一个直播，从而实现无限滑动。

这里主要贴下第二个接口（京东对接口做了校验，第二次请求时会失效，因此这里贴个图片，就不贴接口了）：  
![format_png 1][]

--------------------

### Demo 中的上下滑动实现 - 方案（1） ###

接口在设计上，参照京东的接口。传递一个直播间 id , 服务器返回当前直播间、前一个直播间以及下一个直播间的信息，从而实现无限滑动。

接口地址：  
https://www.hi-cat.cn/api/live/slide?liveId=

如果 liveId 传递值为空，则默认返回第一个直播间信息。

--------------------

### Demo 中的上下滑动实现 - 方案（2） ###

我们的业务没有那么多的直播，所以上下无限滑动的接口设计上和京东的不一样，使用列表分页接口，实现无限滑动，这种方案，客户端需要做很多的逻辑判断。

用户从直播列表进入直播间，携带如下参数，获取分页的列表数据：

1.  page：标识请求的第几页数据。
2.  count：每页的数据，一般为固定值，如 10 或者 20 个。
3.  liveId：在直播间列表点击的直播。这个参数不是传递给服务器，是客户端根据服务器返回的列表数据，确定应该移动到哪个直播间。之所以不传递 position，是因为用户点击进入直播间之后，直播可能已经结束。因此使用 liveId 和服务器传递的数据比对，如果不存在，则移动到当前列表的第一条数据。

接口地址：  
https://www.hi-cat.cn/api/live?page=1&count=10

--------------------

### 优劣 ###

1.  方案一，客户端很好处理，不需要额外的逻辑处理，需要后端支持。
2.  方案二，后端直接返回分页后的直播间信息，客户端根据直播间 id 确定位置，需要客户端做额外的逻辑处理。

[Android - _1]: https://blog.csdn.net/stupid56862/article/details/107774374
[Android - _2]: https://blog.csdn.net/stupid56862/article/details/107774412
[format_png]: /images/20230208/5aae9c1dda774a429258359fc5165360.png
[format_png 1]: /images/20230208/992e8ce5ef3a4ca499f23d0d2004af9c.png