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

直播列表（iOS）

最近更新时间：2025-11-12 17:54:22

我的收藏

本页目录：

功能预览

本文对 TUILiveKit 中的语聊房直播列表页面进行了详细的介绍。您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
双列瀑布流：默认以双列卡片形式展示语聊房列表。


快速接入

步骤1：开通服务

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

步骤2：代码集成

参考 准备工作 接入 TUILiveKit。

步骤3：添加直播列表瀑布流视图

语聊房场景目前仅支持双列瀑布流样式。
// 示例： YourLiveListViewController 代表您直播列表瀑布流的视图控制器
class YourLiveListViewController: UIViewController {

    // 1.  声明 liveListView 作为成员变量
    private let liveListView = LiveListView(style: .doubleColumn) 

    public override func viewDidLoad() {
        super.viewDidLoad()
        // 2. 将 liveListView 添加到视图上
        view.addSubview(liveListView)
        liveListView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
        // 3. 设置列表的点击事件代理
        liveListView.itemClickDelegate = self
    }
}

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

直播列表会通过 OnItemClickListener 回调处理点击事件，您只需在直播列表瀑布流视图中实现 OnItemClickListener 来响应用户的点击事件，并在 onItemClick 中实现跳转进入观众观看页的功能，观众观看页实现可参考 观众观看 。
交互示例：

代码示例：
extension YourLiveListViewController: OnItemClickDelegate {

    func onItemClick(liveInfo: LiveInfo, frame: CGRect) {
        // 1. 实例化您的观众观看视图控制器
        let audienceVC = YourAudienceViewController(roomId: liveInfo.roomId)
        audienceVC.modalPresentationStyle = .fullScreen
        // 2. 跳转到您的观众观看视图控制器
        present(audienceVC, animated: false)
    }
    
}

自定义您的界面布局

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

自定义数据源

如果您的后台有单独的直播列表数据，可以通过实现 LiveListDataSource 接口来自定义数据源，而不使用组件默认的列表数据。
// 示例：YourLiveListViewController 代表您直播列表瀑布流的视图控制器
class YourLiveListViewController: UIViewController {

    private let liveListView: LiveListView = LiveListView(style: .doubleColumn) 

    public override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(liveListView)
        liveListView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
        liveListView.itemClickDelegate = self
        // 1. 设置自定义数据源代理
        liveListView.dataSource = self
    }
}

// 2. 实现自定义数据源代理: LiveListDataSource
extension YourLiveListViewController: LiveListDataSource {

    public func fetchLiveList(cursor: String, onSuccess: @escaping LiveListBlock, onError: @escaping TUIErrorBlock) {
        // 3. 对接自己的业务后台，按照下面的格式返回数据给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 元素（例如主播头像、直播标题等），可以通过实现 LiveListViewAdapter 接口来完成。
// 示例：YourLiveListViewController 代表您列表瀑布流的视图控制器
class YourLiveListViewController: UIViewController {

    private let liveListView: LiveListView = LiveListView(style: .doubleColumn) 

    public override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(liveListView)
        liveListView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
        liveListView.itemClickDelegate = self
        liveListView.dataSource = self
        // 1. 设置自定义挂件代理
        liveListView.adapter = self
    }
}

// 2. 实现自定义挂件代理
extension YourLiveListViewController: LiveListViewAdapter {
    public func createLiveInfoView(info: LiveInfo) -> UIView {
        // 自定义挂件view
        return YourCustomView(liveInfo: info)
    }
    
    public func updateLiveInfoView(view: UIView, info: LiveInfo) {
        if let infoView = view as? YourCustomView {
            // 更新挂件view中绑定的数据
            infoView.updateView(liveInfo: info)
        } 
    }
}

下一步

恭喜您，现在您已经成功集成了直播列表功能。接下来，您可以实现主播开播、观众观看等功能，可参考下表：
功能
描述
集成指引
主播开播
实现主播开播语聊房全流程功能，包括开播前的准备和开播后的各种互动。
主播开播
观众观看
实现观众进入主播的语聊房后进行互动，如上麦、收发弹幕等功能。
观众观看

常见问题

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

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

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

请确保您正确实现了 LiveListDataSource 接口。重点检查以下几点：
检查 fetchLiveList 方法是否被正确调用。
确保在获取数据后（无论成功或失败）都调用了 callback.onSuccess 或 callback.onFailure。
检查您的业务后台接口是否返回了正确的数据格式。

中国站
目录