文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>实时音视频>直播与语聊房（含 UI）>视频直播>直播列表>直播列表（Android）

直播列表（Android）

最近更新时间：2025-09-08 22:59:42

我的收藏

本页目录：

本文将指导您如何快速集成直播列表瀑布流页，支持单列瀑布流和双列瀑布流，下拉刷新，滑动播放等功能。

效果展示

双列瀑布流
单列瀑布流








注意：
双列瀑布流默认同时进2个房间，会同时预览画面中间的2个直播间画面，单列瀑布流默认同时进入1个房间。
同时预览多个房间时，多个房间的预览时长都被计入观众的音视频时长。

前提条件

在接入该功能之前，需要先完成 准备工作 并完成 登录。
瀑布流视频预加载功能需要对应应用（SDKAppID）为 TUILiveKit 体验版或大规模直播版 才能使用。

功能接入

说明：
观众在直播间外预览直播内容时，其预览时长也将被计入观众的音视频时长。

步骤 1：创建并初始化瀑布流视图

您可以根据需要选择使用单列或双列瀑布流。
Kotlin
Java
val mLiveListView = LiveListView(context)
//双列瀑布流
mLiveListView.init(this, LiveListViewDefine.Style.DOUBLE_COLUMN)
//单列瀑布流
mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN)
LiveListView mLiveListView = new LiveListView(this);
//双列瀑布流
mLiveListView.init(this, LiveListViewDefine.Style.DOUBLE_COLUMN);
//单列瀑布流
mLiveListView.init(this, LiveListViewDefine.Style.DOUBLE_COLUMN);

步骤 2：加载瀑布流视图

将创建的 LiveListView 加载到您的 Activity 或 Fragment 中。
Kotlin
Java
setContentView(mLiveListView)
setContentView(mLiveListView);

步骤 3：监听列表项点击事件

通过设置 OnItemClickListener 来监听用户点击列表项的事件，并在回调中实现跳转进入直播间的功能。
Kotlin
Java
mLiveListView.setOnItemClickListener { view, liveInfo ->
    // 这里可以实现跳转进入直播间界面
    enterRoom(liveInfo)
}
mLiveListView.setOnItemClickListener((view, liveInfo) -> {
    //这里可以实现跳转进入直播间界面
    enterRoom(liveInfo);
});

功能定制

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

自定义数据源

如果您的后台有单独的直播列表数据，可以通过实现 TUILiveListDataSource 接口来自定义数据源，而不使用组件默认的列表数据。
Kotlin
Java
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(){
    @Override
    public 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 元素（例如主播头像、直播标题等），可以通过实现 LiveListViewAdapter 接口来完成。
Kotlin
Java
val liveListViewAdapter = object : LiveListViewDefine.LiveListViewAdapter() {
    override fun createLiveInfoView(liveInfo: TUILiveListManager.LiveInfo): View {
        // 自定义挂件 view
        val widgetView = CustomView(context)
        widgetView.init(liveInfo)
        return widgetView
    }

    override fun updateLiveInfoView(view: View, liveInfo: TUILiveListManager.LiveInfo) {
        // 更新挂件 view 中绑定的数据
        val widgetView = view as CustomView
        widgetView.updateLiveInfoView(liveInfo)
    }
}
mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN, liveListViewAdapter, null)
LiveListViewDefine.LiveListViewAdapter liveListViewAdapter = new LiveListViewDefine.LiveListViewAdapter() {
    @Override
    public View createLiveInfoView(TUILiveListManager.LiveInfo liveInfo) {
        //自定义挂件view
        CustomView widgetView = new CustomView(mContext);
        widgetView.init(liveInfo);
        return widgetView;
    }

    @Override
    public void updateLiveInfoView(View view, TUILiveListManager.LiveInfo liveInfo) {
        //更新挂件view中绑定的数据
        CustomView widgetView = (CustomView) view;
        widgetView.updateLiveInfoView(liveInfo);
    }
};
mLiveListView.init(this, LiveListViewDefine.Style.SINGLE_COLUMN, liveListViewAdapter, null);

中国站
目录