@tencentcloud/sdk-mcp 1.6.3 → 1.6.5

package/resource/integration/livekit/preset/live/android/live-audience-integration.md

@@ -0,0 +1,133 @@
+`TUILiveKit` 的观众观看页为用户提供了丰富且便捷的直播观看与互动功能，能快速集成到您的应用中，满足观众多样化的需求。
+
+> **集成提示：**
+>
+> 本文档介绍基于 **UI 组件** 的观众观看方式（含完整交互 UI）。若您需通过 **Core SDK** 自行搭建观众端界面，请参考 观众观看 (Core SDK)。
+>
+
+## 功能概览
+- **直播观看：**清晰、流畅观看主播实时直播画面。
+
+- **互动连麦：**申请连麦，与主播进行音视频互动。
+
+- **直播信息：**查看直播间标题、简介，及在线观众列表等信息。
+
+- **直播互动：**送礼物（有动画特效，主播接收提示）、点赞（有动画及实时统计）、发弹幕互动。
+
+| 直播观看 | 互动连麦 | 直播信息 | 直播互动 |
+| --- | --- | --- | --- |
+|  | ### |  |  |
+
+## 快速接入
+
+### 步骤 1.  开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤 2.  代码集成
+
+参考 准备工作 接入 `TUILiveKit` 。
+
+### 步骤 3. 添加观众观看页面
+
+在您的观众观看页 `Activity` 中 初始化添加 `AudienceView` 观众观看视图：
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import android.util.Log
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.audienceview.AudienceView
+import com.trtc.uikit.livekit.features.audienceview.AudienceViewDefine.AudienceViewListener
+import io.trtc.tuikit.atomicxcore.api.live.LiveInfo
+
+class AudienceActivity : AppCompatActivity() {
+    lateinit var audienceView: AudienceView
+    lateinit var listener: AudienceViewListener
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1. 创建 AudienceView
+        audienceView = AudienceView(this)
+        val roomId = "live_1236666"
+        // 2. 初始化 AudienceView
+        audienceView.init(this, roomId)
+
+        // 3. (可选)添加 AudienceContainerView 事件监听
+        listener = object : AudienceViewListener {
+
+            override fun onLiveEnded(roomId: String, ownerName: String, ownerAvatarUrl: String) {
+                finishAndRemoveTask()
+            }
+
+            override fun onClickFloatWindow() {
+                // 画中画按钮点击事件，您可以按照您的业务需求处理该事件，此处代码示例：点击画中画按钮后，将当前页面转换为画中画模式
+                enterPictureInPictureMode()
+            }
+
+            override fun onClickCloseButton(liveInfo: LiveInfo) {
+                Log.i("TAG", "onClickCloseButton liveInfo: $liveInfo")
+                finishAndRemoveTask()
+            }
+        }
+        audienceView.addListener(listener)
+        // 4. 将 AudienceContainerView 添加到界面
+        setContentView(audienceView)
+    }
+
+    override fun onDestroy() {
+        // 5. (可选)若您添加了事件监听器，则需要在页面销毁时移除监听器
+        audienceView.removeListener(listener)
+        super.onDestroy()
+    }
+}
+```
+
+### 步骤 4. 跳转到观众观看页面
+
+在您需要点击跳转到观众观看页时，可参考如下代码示例：
+
+【Kotlin】
+``` java
+fun startActivity(context: Context) {
+    val intent = Intent(context, AudienceActivity::class.java)
+    context.startActivity(intent)
+}
+```
+
+## 自定义您的界面布局
+
+### 自定义观众观看页界面
+- 参考 观众核心页面 进行观众界面定制，在 `AudienceView` 中修改 UI 样式，添加您的业务组件。
+
+- 参考 调整视频直播挂件 进行视频位挂件定制，在 `AudienceView` 中修改视频位上的名称、头像挂件等 UI。
+
+### 文案定制
+
+`TUILiveKit` 使用 `Android` 通用的 `XML` 资源文件来管理 `UI` 所需的文案显示，您可以直接通过 `XML` 文件修改需要调整的文案：
+
+### 图标定制
+
+`TUILiveKit` 使用 `Android` 通用的 `drawable` 资源文件夹管理 `UI` 所需的图片资源，您可以通过替换资源文件快速修改自定义界面所需的图标，替换时请确保新的文件名称与原文件名称一致。
+
+## 下一步
+
+恭喜您，现在您已经成功集成了观众观看。接下来，您可以实现**主播开播**、**直播列表**等功能，可参考下表：
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>主播开播</strong> | 主播开播全流程功能，包括开播前的准备和开播后的各种互动。 | 主播开播 |
+| <strong>直播列表</strong> | 展示直播列表界面和功能，包含直播列表，房间信息展示功能。 | 直播列表 |
+| <strong>礼物系统</strong> | 实现自定义礼物素材配置、计费系统对接、PK 场景互动等功能。 | 礼物系统 |
+
+## 常见问题
+
+### 观众选择视频连麦后，视频画面显示黑屏？
+
+请前往**应用信息 >** **权限 >** **相机**，检查摄像头权限是否开启，可参考下图：
+
+### 观众发送弹幕时，直播间内其他观众看不到弹幕内容？
+- 原因 1： 先检查网络连接，确保观众设备网络正常。
+
+- 原因 2： 该观众被主播禁言，无法发送弹幕。
+
+- 原因 3：观众的弹幕内容涉及 关键词屏蔽，请确认观众发送的弹幕内容是否符合直播间规则。

package/resource/integration/livekit/preset/live/android/live-host-integration.md

@@ -0,0 +1,225 @@
+`TUILiveKit` 主播开播页为直播场景提供**开箱即用的全功能界面**，支持快速搭建主播开播所需的核心能力，让您无需关注复杂 `UI` 与逻辑实现，即可高效集成直播开播流程。
+
+> **集成提示：**
+>
+> 本文档介绍基于 **UI 组件** 的开播方式（含完整交互 UI）。若您需通过 `Core SDK` 自行搭建主播端界面，请参考 主播开播 (Core SDK)。
+>
+
+## 功能概览
+- **开播前预览：**支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置。
+
+- **连麦互动：**支持直播过程中与观众 或 与其他直播间主播实时互动。
+
+- **观众互动：**支持弹幕、礼物等丰富直播互动形式。
+
+- **直播间管理：**支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
+
+| 开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+## 快速接入
+
+### 步骤 1.  开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤 2.  代码集成
+
+参考 准备工作 接入 `TUILiveKit`。
+
+### 步骤 3. 添加开播前的准备页面
+
+`AnchorPrepareView` 组件已内置了摄像头预览、音效设置、布局设置、以及其他功能设置，您需创建并加载 `AnchorPrepareView` ，具体示例代码如下：
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener
+
+class AnchorActivity : AppCompatActivity() {
+    private val TAG = "AnchorActivity"
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    private val anchorPrepareViewListener = object : AnchorPrepareViewListener {
+        override fun onClickStartButton() {
+            // 点击预览界面开始直播按钮触发
+        }
+
+        override fun onClickBackButton() {
+            // 点击预览界面返回按钮触发
+            finishAndRemoveTask()
+        }
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1.创建并初始化 AnchorPrepareView
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1236666", null)
+        anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener)
+
+        // 2.将 AnchorPrepareView 添加到界面
+        setContentView(anchorPrepareView)
+    }
+}
+```
+
+### 步骤 4. 添加主播用的推流页面
+
+`AnchorView` 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能，您只需创建并加载 `AnchorView` ，具体示例代码如下：
+
+> **配合服务端 (RESTFUL API) 开播：**
+>
+> 如果您的房间是先通过 服务端 API 创建的，在集成时无需修改任何代码逻辑，只需将示例代码中的 `liveID` 替换为服务端生成的 ID 即可。SDK 将自动接管该房间并开启直播。
+>
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener
+import com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatus
+import com.trtc.uikit.livekit.features.anchorview.AnchorState
+import com.trtc.uikit.livekit.features.anchorview.AnchorView
+import com.trtc.uikit.livekit.features.anchorview.AnchorViewListener
+import com.trtc.uikit.livekit.features.anchorview.RoomBehavior
+import io.trtc.tuikit.atomicxcore.api.live.LiveInfo
+import io.trtc.tuikit.atomicxcore.api.live.SeatLayoutTemplate
+
+class AnchorActivity : AppCompatActivity() {
+    private val TAG = "AnchorActivity"
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    private val anchorPrepareViewListener = object : AnchorPrepareViewListener {
+        override fun onClickStartButton() {
+            // 完成从准备页到主播开播页的切换
+            initAnchorView()
+        }
+
+        override fun onClickBackButton() {
+            finishAndRemoveTask()
+        }
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1.创建并初始化 AnchorPrepareView
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1236666", null)
+        anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener)
+
+        // 2.将 AnchorPrepareView 添加到界面
+        setContentView(anchorPrepareView)
+    }
+
+    val anchorViewListener = object : AnchorViewListener {
+        override fun onEndLiving(state: AnchorState) {
+            finishAndRemoveTask()
+        }
+
+        override fun onClickFloatWindow() {
+        }
+    }
+
+    fun initAnchorView() {
+        // 1.创建 AnchorView
+        val anchorView = AnchorView(this)
+
+        // 2.初始化 AnchorView，其中 liveInfo 为直播间信息，anchorPrepareView 为您的开播前的准备页面
+        val liveInfo = LiveInfo()
+        liveInfo.liveID = "live_1236666"
+        liveInfo.liveName = anchorPrepareView.getState()?.roomName?.value ?: ""
+        liveInfo.isPublicVisible = anchorPrepareView.getState()?.liveMode?.value == LiveStreamPrivacyStatus.PUBLIC
+        liveInfo.coverURL = anchorPrepareView.getState()?.coverURL?.value ?: ""
+        liveInfo.seatTemplate = SeatLayoutTemplate.VideoDynamicGrid9Seats
+        // 进房行为：
+        //    RoomBehavior.CREATE_ROOM: 主播创建房间
+        //    RoomBehavior.ENTER_ROOM: 主播进入服务端 rest api 创建的直播间
+        anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null)
+        anchorView.addAnchorViewListener(anchorViewListener)
+
+        // 3.将 AnchorView 添加到界面
+        setContentView(anchorView)
+    }
+}
+```
+
+## 自定义您的界面布局
+
+`TUILiveKit` 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局、隐藏 / 显示功能模块。
+
+### 直播布局模板选择
+
+`TUILiveKit` 提供 **4 种直播布局模板**，您可在主播开播页的 **UI 交互「布局」入口** 选择合适样式：
+
+#### 布局模板一览：
+| <strong>布局分类</strong> | <strong>动态宫格布局</strong> | <strong>浮动小窗布局</strong> | <strong>固定宫格布局</strong> | <strong>固定小窗布局</strong> |
+| --- | --- | --- | --- | --- |
+| <strong>模板取值</strong> | <code>VideoDynamicGrid9Seats</code> | <code>VideoDynamicFloat7Seats</code> | <code>VideoFixedGrid9Seats</code> | <code>VideoFixedFloat7Seats</code> |
+| <strong>描述</strong> | 默认布局，可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定，每个嘉宾占据一个固定宫格。 | 连麦人数固定，嘉宾以固定小窗形式显示。 |
+| <strong>运行效果</strong> |  |  |  |  |
+
+### 自定义开播页功能区
+
+通过调用 步骤 3 创建的 `prepareView` 的 API，可自定义隐藏开播准备页的操作区或特定功能：
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+
+class AnchorActivity : AppCompatActivity() {
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1235858", null)
+
+        // 1. 自定义功能区 - 例如：隐藏整个功能区
+        anchorPrepareView.disableFeatureMenu(true)
+
+        setContentView(anchorPrepareView)
+    }
+}
+```
+
+|隐藏整个功能区|隐藏美颜按钮|隐藏音效按钮|隐藏摄像头切换按钮|
+|---------|---------|---------|---------|
+|`disableFeatureMenu(true)`|`disableMenuBeautyButton(true)`|`disableMenuAudioEffectButton(true)`|`disableMenuSwitchCameraButton(true)`|
+|||||
+
+### 自定义主播直播页界面
+- 参考 主播核心页面 进行主播界面定制，在 `AnchorView` 中修改 `UI` 样式，添加您的业务组件。
+
+- 参考 调整视频直播挂件 进行视频位挂件定制，在 `AnchorView` 中修改视频位上的名称、头像挂件等 `UI`。
+
+### 文案定制
+
+`TUILiveKit` 使用 Android 通用的 `XML` 资源文件来管理 UI 所需的文案显示，您可以直接通过 `XML` 文件修改需要调整的文案：
+
+### 图标定制
+
+`TUILiveKit` 使用 Android 通用的 `drawable` 资源文件夹管理 UI 所需的图片资源，您可以通过替换资源文件快速修改自定义界面所需的图标，替换时请确保新的文件名称与原文件名称一致。
+
+## 下一步
+
+恭喜您，现在您已经成功集成了 **主播开播** 。接下来，您可以实现**观众观看**、**直播列表**等功能，可参考下表：
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>观众观看</strong> | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看 |
+| <strong>直播列表</strong> | 展示直播列表界面和功能，包含直播列表，房间信息展示功能。 | 直播列表 |
+| <strong>礼物系统</strong> | 实现自定义礼物素材配置、计费系统对接、PK 场景互动等功能。 | 礼物系统 |
+
+## 常见问题
+
+### 开播后无画面？
+
+请前往**应用信息 >** **权限 >** **相机**，检查摄像头权限是否开启，可参考下图：
+
+### 点击开播按钮无法开播，提示“未登录”？
+
+参考 登录指引， 确认已完成登录功能接入。

package/resource/integration/livekit/preset/live/android/live-list-integration.md

@@ -0,0 +1,278 @@
+## 功能预览
+
+本文对 TUILiveKit 中的**直播列表页面**进行了详细的介绍，您可以在已有项目中直接参考本文档集成我们开发好的直播列表页面，也可以根据您的需求按照文档中的内容对页面的样式，布局以及功能项进行深度的定制。
+- **双列瀑布流**：默认同时预览2个直播间的画面。
+
+- **单列瀑布流**：默认同时预览1个直播间的画面（**仅视频直播支持单列预览**）。
+
+| 双列瀑布流 | 单列瀑布流 |
+| --- | --- |
+|  | ### |
+
+   > **注意：**
+   >
+   > 预览直播间画面时，预览时长都会被计入观众的音视频时长，组件详细计费相关内容请参考 计费说明。
+   >
+
+## 快速接入
+
+### 步骤 1. 开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤 2. 代码集成
+
+参考 准备工作 接入 `TUILiveKit`。
+
+### 步骤 3. 添加直播列表瀑布流视图
+
+您可以根据需要选择使用单列或双列瀑布流。
+
+【Kotlin】
+``` java
+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
+
+class 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
+    }
+}
+```
+
+【Java】
+``` java
+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` 中实现跳转进入观众观看页的功能，观众观看页实现可参考 观众观看 。
+
+**交互示例：**
+
+**代码示例**：
+
+【Kotlin】
+``` java
+fun 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
+}
+```
+
+【Java】
+``` java
+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` 接口来自定义数据源，而不使用组件默认的列表数据。
+
+【Kotlin】
+``` java
+// 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.初始化时传入自定义的 dataSource
+liveListView.init(this, Style.DOUBLE_COLUMN, dataSource = dataSource)
+```
+
+【Java】
+``` java
+// 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.初始化时传入自定义的 dataSource
+liveListView.init(this, Style.DOUBLE_COLUMN, null, dataSource);
+```
+
+### 自定义挂件
+
+瀑布流列表项底部默认显示视频流画面或直播封面。如果您需要自定义列表项顶部的 UI 元素（例如主播头像、直播标题等），可以通过实现 `LiveListViewAdapter` 接口来完成。
+
+【Kotlin】
+``` java
+// 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.初始化时传入自定义的 liveListViewAdapter
+liveListView.init(this, Style.DOUBLE_COLUMN, adapter = liveListViewAdapter)
+```
+
+【Java】
+``` java
+// 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.初始化时传入自定义的 liveListViewAdapter
+liveListView.init(this, Style.DOUBLE_COLUMN, liveListViewAdapter, null);
+```
+
+## 下一步
+
+恭喜您，现在您已经成功集成了 **直播列表** 功能。接下来，您可以根据您的业务场景实现**主播开播、观众观看**等功能
+
+**视频直播场景：**
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>主播开播</strong> | 实现主播开播全流程功能，包括开播前的准备和开播后的各种互动。 | 主播开播 |
+| <strong>观众观看</strong> | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看 |
+
+**语聊房场景：**
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>主播开播</strong> | 实现主播开播语聊房全流程功能，包括开播前的准备和开播后的各种互动。 | 主播开播 |
+| <strong>观众观看</strong> | 实现观众进入主播的语聊房后进行互动，如上麦、收发弹幕等功能。 | 观众观看 |
+
+## 常见问题
+
+### 集成直播列表功能后页面没有任何直播怎么办？
+
+如果您看到空白页面，需要检查您是否已完成 登录步骤。为了测试该功能，您可以使用两台设备：一台设备用于开播，另一台设备在直播列表页面，就能拉取到已开播的直播间。
+
+### 单列瀑布流和双列瀑布流有什么区别？
+
+单列瀑布流一次预览一个直播间画面，而双列瀑布流则同时预览两个直播间画面。您可以根据自己的设计需求选择合适的布局。
+
+### 预览直播画面是否收费？
+
+是的，预览直播间画面时长会计入观众的音视频时长，这部分是需要付费的。详细的 计费说明 可以参考文档中的相关内容。
+
+### 我使用了自定义数据源 (LiveListDataSource)，但列表不显示/不刷新怎么办？
+
+请确保您正确实现了 `LiveListDataSource` 接口。重点检查以下几点：
+1. 检查 `fetchLiveList` 方法是否被正确调用。
+
+2. 确保在获取数据后（无论成功或失败）都调用了 `callback.onSuccess` 或 `callback.onFailure`。
+
+3. 检查您的业务后台接口是否返回了正确的数据格式。