观众列表组件(AudienceListView)封装了直播间在线人数展示和观众列表弹窗功能。您可以轻松地将其集成到您的 UI 中,为您的直播间添加观众互动的基础能力。
效果展示

快速开始
步骤 1. 开通服务
步骤 2. 代码集成
步骤 3. 集成观众列表组件
您可以通过代码或 XML 两种方式创建
AudienceListView。在代码中创建:
AudienceListView audienceListView = new AudienceListView(getContext());
在 XML 布局文件中定义:
<com.trtc.uikit.livekit.component.audiencelist.AudienceListViewandroid:id="@+id/audience_list_view"android:layout_width="135dp"android:layout_height="24dp"android:layout_gravity="end" />
步骤 4:初始化组件
在成功进入直播间后,调用
AudienceListView 的 init 方法,以绑定数据和事件。说明:
此操作必须在进房成功的回调中执行。
audienceListView.init(roomInfo);
自定义组件
观众列表组件提供了直播间内的观众点击回调接口,该回调支持您根据自己的业务需求实现直播间内的观众管理。
组件接口
接口 | 参数 | 说明 |
onUserItemClick | TUIRoomDefine.UserInfo | 观众列表点击回调 |
实现观众管理
默认情况下,点击观众列表中的用户会弹出管理弹框。您可以通过实现
onUserItemClick 回调,并通过 LiveAudienceStore 来执行具体操作,例如实现将用户踢出直播间的功能:import android.os.Bundleimport androidx.appcompat.app.AlertDialogimport androidx.appcompat.app.AppCompatActivityimport com.tencent.cloud.tuikit.engine.extension.TUILiveListManagerimport com.tencent.cloud.tuikit.engine.room.TUIRoomDefineimport com.trtc.uikit.livekit.Rimport com.trtc.uikit.livekit.component.audiencelist.AudienceListViewimport io.trtc.tuikit.atomicxcore.api.live.LiveAudienceStoreclass YourAnchorActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContentView(R.layout.activity_your_anchor)// 1.定义观众列表组件var audienceListView = AudienceListView(this@YourAnchorActivity)var liveInfo = TUILiveListManager.LiveInfo().apply {roomId = "yourLiveId"}// 2.初始化组件,传入直播间信息audienceListView.init(liveInfo)// 3.设置监听器,监听用户点击事件audienceListView.setOnUserItemClickListener(object :AudienceListView.OnUserItemClickListener {override fun onUserItemClick(userInfo: TUIRoomDefine.UserInfo) {// 4.处理用户点击事件,例如踢出直播间kickUserOutOfRoom(liveInfo.roomId, userInfo)}})}private fun kickUserOutOfRoom(liveId: String, userInfo: TUIRoomDefine.UserInfo) {AlertDialog.Builder(this@YourAnchorActivity).setTitle("观众管理").setMessage("您是否要将${userInfo.userName}踢出直播间").setPositiveButton("确定") { dialog, which ->LiveAudienceStore.create(liveId).kickUserOutOfRoom(userInfo.userId, null)dialog.dismiss()}.setNegativeButton("取消") { dialog, which ->dialog.dismiss()}.create().show()}}