产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
直播列表（iOS）
功能预览
本文对 TUILiveKit 中的语聊房直播列表页面进行了详细的介绍。您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
双列瀑布流：默认以双列卡片形式展示语聊房列表。
快速接入
步骤1：组件集成
步骤2：添加直播列表瀑布流视图
语聊房场景目前仅支持双列瀑布流样式。
// 示例： 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 inmake.edges.equalToSuperview()}// 3. 设置列表的点击事件代理liveListView.itemClickDelegate = self}}
步骤3：实现直播列表页到观众观看页的跳转
直播列表会通过
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 inmake.edges.equalToSuperview()}liveListView.itemClickDelegate = self// 1. 设置自定义数据源代理liveListView.dataSource = self}}// 2. 实现自定义数据源代理: LiveListDataSourceextension 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 inmake.edges.equalToSuperview()}liveListView.itemClickDelegate = selfliveListView.dataSource = self// 1. 设置自定义挂件代理liveListView.adapter = self}}// 2. 实现自定义挂件代理extension YourLiveListViewController: LiveListViewAdapter {public func createLiveInfoView(info: LiveInfo) -> UIView {// 自定义挂件viewreturn 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。检查您的业务后台接口是否返回了正确的数据格式。
文档反馈