即时通信 IM 直播列表

一、功能预览

·双列瀑布流：默认同时预览2个直播间的画面。

·单列瀑布流：默认同时预览1个直播间的画面（仅视频直播支持单列预览）。

注意：预览直播间画面时，预览时长都会被计入观众的音视频时长，组件详细计费相关内容请参考 计费说明。

二、步骤 1. 开通服务

参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。

三、步骤 2. 代码集成

参考 准备工作 接入 TUILiveKit。

四、步骤 3. 添加直播列表瀑布流视图

你可以根据需要选择使用单列或双列瀑布流。

KotlinJavaimport android.content.Contextimport android.os.Bundleimport androidx.appcompat.app.AppCompatActivityimport com.trtc.uikit.livekit.features.livelist.LiveListViewimport com.trtc.uikit.livekit.features.livelist.Styleclass YourActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // 1.创建并初始化瀑布流视图 val view = createLiveListView(this) // 2.将创建的 LiveListView 添加到你的 Activity 或 Fragment 中 setContentView(view) } fun createLiveListView(context: Context): LiveListView { val liveListView = LiveListView(context) // 此处代码为双列瀑布流初始化示例，若你需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN) liveListView.init(this, Style.DOUBLE_COLUMN) return liveListView }}import android.content.Context;import android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import com.trtc.uikit.livekit.features.livelist.LiveListView;import com.trtc.uikit.livekit.features.livelist.Style;public class YourActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 1.创建并初始化瀑布流视图 LiveListView view = createLiveListView(this); // 2.将创建的 LiveListView 添加到你的 Activity 或 Fragment 中 setContentView(view); } private LiveListView createLiveListView(Context context) { LiveListView liveListView = new LiveListView(context); // 此处代码为双列瀑布流初始化示例，若你需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN, null, null); liveListView.init(this, Style.DOUBLE_COLUMN, null, null); return liveListView; }}

五、步骤 4. 实现直播列表页到观众观看页的跳转

双列瀑布流直播列表和单列瀑布流均会通过 OnItemClickListener回调点击事件，你只需在直播列表瀑布流视图中实现 OnItemClickListener 来响应用户的点击事件，并在 onItemClick 中实现跳转进入观众观看页的功能，观众观看页实现可参考 观众观看 。

交互示例：

代码示例：

KotlinJavafun createLiveListView(context: Context): LiveListView { val liveListView = LiveListView(context) // 此处代码为双列瀑布流初始化示例，若你需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN) liveListView.init(this, Style.DOUBLE_COLUMN) liveListView.setOnItemClickListener { view, liveInfo -> // 点击直播列表项时，跳转进入到观众观看页面 val intent = Intent(context, YourAudienceActivity::class.java) intent.putExtra("liveId", liveInfo.roomId) context.startActivity(intent) } return liveListView}private LiveListView createLiveListView(Context context) { LiveListView liveListView = new LiveListView(context); // 此处代码为双列瀑布流初始化示例，若你需要使用单列瀑布流，请将初始化代码改为 liveListView.init(this, Style.SINGLE_COLUMN, null, null); liveListView.init(this, Style.DOUBLE_COLUMN, null, null); liveListView.setOnItemClickListener((view, liveInfo) -> { // 点击直播列表项时，跳转进入到观众观看页面 Intent intent = new Intent(context, YourAudienceActivity.class); intent.putExtra("liveId", liveInfo.roomId); context.startActivity(intent); }); return liveListView;}

六、自定义你的界面布局

TUILiveKit 提供了灵活的接口定制直播列表瀑布流组件，你可以根据业务需求自定义数据源和列表项样式。

七、自定义数据源

如果你的后台有单独的直播列表数据，可以通过实现 LiveListDataSource 接口来自定义数据源，而不使用组件默认的列表数据。

KotlinJava// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListDataSource;// 2.通过实现 LiveListDataSource 自定义数据源val dataSource = object : LiveListDataSource { override fun fetchLiveList(param: FetchLiveListParam,callback: 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) }}// 3.初始化时传入自定义的 dataSourceliveListView.init(this, Style.DOUBLE_COLUMN, dataSource = dataSource)// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListDataSource;// 2.通过实现 LiveListDataSource 自定义数据源LiveListDataSource dataSource = (param, 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);};// 3.初始化时传入自定义的 dataSourceliveListView.init(this, Style.DOUBLE_COLUMN, null, dataSource);

八、自定义挂件

瀑布流列表项底部默认显示视频流画面或直播封面。如果你需要自定义列表项顶部的 UI 元素（例如主播头像、直播标题等），可以通过实现 LiveListViewAdapter 接口来完成。

KotlinJava// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListViewAdapter;// 2.通过实现 LiveListViewAdapter 自定义挂件val liveListViewAdapter = object : LiveListViewAdapter { override fun createLiveInfoView(liveInfo: TUILiveListManager.LiveInfo): View { // 自定义挂件 view val widgetView = YourView(context) widgetView.init(liveInfo) return widgetView } override fun updateLiveInfoView(view: View, liveInfo: TUILiveListManager.LiveInfo) { // 更新挂件 view 中绑定的数据 val widgetView = view as YourView widgetView.updateLiveInfoView(liveInfo) }}// 3.初始化时传入自定义的 liveListViewAdapterliveListView.init(this, Style.DOUBLE_COLUMN, adapter = liveListViewAdapter)// 1.导入依赖import com.trtc.uikit.livekit.features.livelist.LiveListViewAdapter;// 2.通过实现 LiveListViewAdapter 自定义挂件LiveListViewAdapter liveListViewAdapter = new LiveListViewAdapter() { @Override public View createLiveInfoView(TUILiveListManager.LiveInfo liveInfo) { // 自定义挂件view CustomView widgetView = new CustomView(context); widgetView.init(liveInfo); return widgetView; } @Override public void updateLiveInfoView(View view, TUILiveListManager.LiveInfo liveInfo) { // 更新挂件view中绑定的数据 CustomView widgetView = (CustomView) view; widgetView.updateLiveInfoView(liveInfo); }};// 3.初始化时传入自定义的 liveListViewAdapterliveListView.init(this, Style.DOUBLE_COLUMN, liveListViewAdapter, null);

九、下一步

恭喜你，现在你已经成功集成了 直播列表 功能。接下来，你可以根据你的业务场景实现主播开播、观众观看等功能

视频直播场景：

语聊房场景：

十、集成直播列表功能后页面没有任何直播怎么办？

如果你看到空白页面，需要检查你是否已完成 登录步骤。为了测试该功能，你可以使用两台设备：一台设备用于开播，另一台设备在直播列表页面，就能拉取到已开播的直播间。

十一、单列瀑布流和双列瀑布流有什么区别？

单列瀑布流一次预览一个直播间画面，而双列瀑布流则同时预览两个直播间画面。你可以根据自己的设计需求选择合适的布局。

十二、预览直播画面是否收费？

是的，预览直播间画面时长会计入观众的音视频时长，这部分是需要付费的。详细的 计费说明 可以参考文档中的相关内容。

十三、我使用了自定义数据源 (LiveListDataSource)，但列表不显示/不刷新怎么办？

请确保你正确实现了 LiveListDataSource 接口。重点检查以下几点：

1. 检查 fetchLiveList 方法是否被正确调用。

2. 确保在获取数据后（无论成功或失败）都调用了 callback.onSuccess 或 callback.onFailure。

3. 检查你的业务后台接口是否返回了正确的数据格式。