直播列表瀑布流
功能简介
直播列表瀑布流页主要是展示当前应用下所有的在线视频直播和语音聊天室的直播间，在瀑布流界面支持在线视频直播在不进房的情况下视频流预览。支持单列瀑布流和双列瀑布流，下拉刷新，滑动播放等，本文将介绍如何在 10 分钟之内完成瀑布流页的接入工作。
双列瀑布流 | 单列瀑布流 |
 |
 |
注意：
双列瀑布流默认同时进2个房间，会同时预览画面中间的2个直播间画面，单列瀑布流默认同时进入1个房间。
同时预览多个房间时，多个房间的预览时长都被计入观众的音视频时长。
功能接入
说明：
1. 在完成该功能接入之前，需要先完成概述中的接入步骤。
2. 瀑布流视频预加载功能需要对应应用（SDKAppID）为 Live 体验版或专业版方可使用。
3. 观众在直播间外预览直播内容时，其预览时长也将被计入观众的音视频时长。
创建瀑布流视图并初始化（这里可以选择使用单列瀑布流或者双列瀑布流）
val mLiveListView = LiveListView(context)mLiveListView.init(this, LiveListViewDefine.Style.DOUBLE_COLUMN)
LiveListView mLiveListView = new LiveListView(this);mLiveListView.init(this, LiveListViewDefine.Style.DOUBLE_COLUMN);
将瀑布流视图加载到 Activity中，或者加载到具体的布局中
setContentView(mLiveListView)
setContentView(mLiveListView);
监听瀑布流 item点击事件
mLiveListView.setOnItemClickListener { view, liveInfo ->// 这里可以实现跳转进入直播间界面enterRoom(liveInfo)}
mLiveListView.setOnItemClickListener((view, liveInfo) -> {//这里可以实现跳转进入直播间界面enterRoom(liveInfo);});
功能定制
实现瀑布流列表自定义数据源
瀑布流组件默认使用 RoomEngine 直播列表数据源，如果自己后台有单独的后台直播列表，可以按照下面的方式接入：
val dataSource = object : TUILiveListDataSource() {override fun fetchLiveList(param: LiveListViewDefine.FetchLiveListParam,callback: LiveListViewDefine.LiveListCallback) {// 对接自己的业务后台，按照下面的格式返回数据给UI组件val liveInfoList = mutableListOf<TUILiveListManager.LiveInfo>()val liveInfo = TUILiveListManager.LiveInfo().apply {roomInfo = TUIRoomDefine.RoomInfo().apply {roomId = "live_123456"name = "live_123456"}}liveInfoList.add(liveInfo)val cursor = "aabbccdd"callback.onSuccess(cursor, liveInfoList)}}mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN, null, dataSource)
TUILiveListDataSource dataSource = new TUILiveListDataSource(){@Overridepublic void fetchLiveList(LiveListViewDefine.FetchLiveListParam param, LiveListViewDefine.LiveListCallback callback) {//对接自己的业务后台，按照下面的格式返回数据给UI组件List<TUILiveListManager.LiveInfo> liveInfoList = new ArrayList<>();TUILiveListManager.LiveInfo liveInfo = new TUILiveListManager.LiveInfo();liveInfo.roomInfo = new TUIRoomDefine.RoomInfo();liveInfo.roomInfo.roomId = "live_123456";liveInfo.roomInfo.name = "live_123456";liveInfoList.add(liveInfo);String cursor = "aabbccdd";callback.onSuccess(cursor, liveInfoList);}};mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN, null, dataSource);
实现瀑布流自定义挂件
瀑布流最底部下面是视频流画面/直播封面，默认 UI 显示如下，顶部的挂件支持定制，可以根据返回的数据进行 UI 自定义。
双列瀑布流 | 单列瀑布流 |
 |
 |
val liveListViewAdapter = object : LiveListViewDefine.LiveListViewAdapter() {override fun createLiveInfoView(liveInfo: TUILiveListManager.LiveInfo): View {// 自定义挂件 viewval widgetView = CustomView(context)widgetView.init(liveInfo)return widgetView}override fun updateLiveInfoView(view: View, liveInfo: TUILiveListManager.LiveInfo) {// 更新挂件 view 中绑定的数据val widgetView = view as CustomViewwidgetView.updateLiveInfoView(liveInfo)}}mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN, liveListViewAdapter, null)
LiveListViewDefine.LiveListViewAdapter liveListViewAdapter = new LiveListViewDefine.LiveListViewAdapter() {@Overridepublic View createLiveInfoView(TUILiveListManager.LiveInfo liveInfo) {//自定义挂件viewCustomView widgetView = new CustomView(mContext);widgetView.init(liveInfo);return widgetView;}@Overridepublic void updateLiveInfoView(View view, TUILiveListManager.LiveInfo liveInfo) {//更新挂件view中绑定的数据CustomView widgetView = (CustomView) view;widgetView.updateLiveInfoView(liveInfo);}};mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN, liveListViewAdapter, null);
