直播列表瀑布流
功能简介
直播列表瀑布流页主要是展示当前应用下所有的在线视频直播和语音聊天室的直播间,在瀑布流界面支持在线视频直播在不进房的情况下视频流预览。支持单列瀑布流和双列瀑布流,下拉刷新,滑动播放等,本文将介绍如何在 10 分钟之内完成瀑布流页的接入工作。
双列瀑布流 | 单列瀑布流 |
![]() |
![]() |
功能接入
说明:
1. 在完成该功能接入之前,需要先完成概述中的接入步骤。
2. 瀑布流视频预加载功能需要对应应用(SDKAppID)为 Live 体验版或专业版方可使用。
3. 观众在直播间外预览直播内容时,其预览时长也将被计入观众的音视频时长。
创建瀑布流视图(这里可以选择使用单列瀑布流或者双列瀑布流)
let liveLitView = LiveListView(style: .doubleColumn)
将瀑布流视图加载到 ViewController 中,或者加载到具体的布局中
view.addSubView(liveListView)liveListView.snp.remakeConstraints { make inmake.edges.equalToSuperview()}
监听瀑布流item点击事件
liveLitView.itemClickDelegate = self// 在您自己的ViewController中实现OnItemClickDelegateextension YourViewController: OnItemClickDelegate {func onItemClick(liveInfo: LiveInfo, frame: CGRect) {// 这里可以自行实现跳转进入直播间界面}}
瀑布流页面相关操作
为了您的体验更加完整与流畅,我们推荐您完成以下操作:
// 在您自己的ViewController中实现class YourViewController: UIViewController {override func viewDidAppear(_ animated: Bool) {// 在viewDidAppear时刷新直播列表,以确保每次回到当前页面都能拿到最新的列表并开始播放super.viewDidAppear(animated)rootView.refreshLiveList()}override func viewWillDisappear(_ animated: Bool) {super.viewWillDisappear(animated)// 在viewWillDisappear时调用此方法,以在进入别的页面时停掉当前播放的视频流rootView.onRouteToNextPage()}}
功能定制
实现瀑布流列表自定义数据源
瀑布流组件默认使用RoomEngine直播列表数据源,如果自己后台有单独的后台直播列表,可以按照下面的方式接入:
liveListView.dataSource = selfextension YourViewController: LiveListDataSource {public func fetchLiveList(cursor: String, onSuccess: @escaping LiveListBlock, onError: @escaping TUIErrorBlock) {// 对接自己的业务后台,按照下面的格式返回数据给UI组件var liveInfoList: [LiveInfo] = []var liveInfo = LiveInfo()liveInfo.roomId = "live_123456"liveInfo.name = "live_123456"liveInfoList.append(liveInfo)let cursor = "aabbccdd"onSuccess(cursor, liveInfoList)}}
实现瀑布流自定义挂件
瀑布流最底部下面是视频流画面/直播封面,默认UI显示如下,顶部的挂件支持定制,可以根据返回的数据进行UI自定义。
双列瀑布流 | 单列瀑布流 |
![]() |
![]() |
liveListView.adapter = selfextension YourViewController: LiveListViewAdapter {public func createLiveInfoView(info: LiveInfo) -> UIView {// 自定义挂件viewreturn CustomView(liveInfo: info)}public func updateLiveInfoView(view: UIView, info: LiveInfo) {if let infoView = view as? CustomView {// 更新挂件view中绑定的数据infoView.updateView(liveInfo: info)}}}