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

直播列表（iOS）

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

我的收藏

本页目录：

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

效果展示

双列瀑布流
单列瀑布流








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

前提条件

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

功能接入

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

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

您可以根据需要选择使用单列或双列瀑布流。
Swift
let liveLitView = LiveListView(style: .doubleColumn) // 示例为双列瀑布流，如需单列传入 .singleColumn即可

步骤 2：加载瀑布流视图

将瀑布流视图 liveListView 添加到您的容器视图上
Swift
view.addSubView(liveListView)
liveListView.snp.remakeConstraints { make in
    make.edges.equalToSuperview()
}

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

通过设置 OnItemClickListener 来监听用户点击列表项的事件，并在回调中实现跳转进入直播间的功能。
Swift
liveLitView.itemClickDelegate = self
// 在您自己的ViewController中实现OnItemClickDelegate
extension YourViewController: OnItemClickDelegate {
    func onItemClick(liveInfo: LiveInfo, frame: CGRect) {
        // 这里可以自行实现跳转进入直播间界面
    }
}

步骤 3：体验优化

为了您的体验更加完整与流畅，我们推荐您完成以下操作：
Swift
// 在您自己的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()
    }
}

功能定制

自定义数据源

如果您的后台有单独的直播列表数据，可以通过实现 TUILiveListDataSource 接口来自定义数据源，而不使用组件默认的列表数据。
Swift
liveListView.dataSource = self

extension 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 元素（例如主播头像、直播标题等），可以通过实现 LiveListViewAdapter 接口来完成。
Swift
liveListView.adapter = self

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

中国站
目录