- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
本文将介绍如何定制 TUILiveKit 的用户界面，我们提供了三个方案供您选择：界面微调方案、自定义部分 UI 方案、自定义全部 UI 方案。
方案一：界面微调方案
替换图标
您可以直接替换
tuilivekit/src/main/res/drawable-xxhdpi文件夹下的图标，以确保整个 App 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改
tuilivekit/src/main/res/values-zh 和 tuilivekit/src/main/res/values 目录下的strings.xml文件来修改TUILiveKit 界面的字符串内容。方案二：自定义部分 UI 方案
公共的 UI 组件
文件位置：Android/tuilivekit/src/main/java/com/trtc/uikit/livekit/common/uicomponentuicomponent├── audiencelist // 主播推流页面和观众拉流页面右上角的 观众列表UI目录│ ├── AudienceListIconAdapter.java // 观众列表 中显示 观众头像的适配器│ ├── AudienceListPanelAdapter.java // 观众列表 被点击，弹出的观众列表面板视图的适配器│ ├── AudienceListPanelView.java // 观众列表 被点击，弹出的观众列表面板视图│ └── AudienceListView.java // 观众列表 视图├── audioeffect // 主播推流页面功能区的音效设置面板目录│ ├── service // 音效设置面板 的服务层目录│ ├── RoomFloatViewService.java // 音效设置面板 的服务层，封装了音效设置相关的api│ ├── store // 音效设置面板 的数据层目录│ ├── AudioEffectSateFactory.java // 音效设置面板 生成数据层数据的工厂类实现│ └── AudioEffectState.java // 音效设置面板 数据的具体封装类│ └── view // 音效设置面板 的视图层目录│ ├── AudioEffectPanelView.java // 音效设置面板 的视图具体实现│ ├── ChangeVoiceAdapter.java // 音效设置面板 的视图中变声视图的适配器│ └── ReverbAdapter.java // 音效设置面板 的视图中混响视图的适配器├── barrage // 弹幕功能实现的目录│ ├── model // 直播中的弹幕功能实现的目录│ ├── DefaultEmojiResource.java // 弹幕输入面板的表情资源│ ├── TUIBarrage.java // 弹幕消息模型│ └── TUIBarrageUser.java // 弹幕发送着信息│ ├── service // 弹幕组件 的服务层目录│ └── BarrageIMService.java // 弹幕组件 的服务层，封装了发送 Chat 消息功能│ └── store // 弹幕组件 的数据层目录│ └── BarrageStore.java // 弹幕组件 的数据管理│ └── view // 弹幕组件 的视图层目录│ ├── BarrageSendView.java // 弹幕组件 的发送消息弹窗│ ├── EmojiEditText.java // 弹幕组件 的支持表情的输入框│ └── EmojiLayout.java // 弹幕组件 的表情面板│ ├── TUIBarrageButton.java // 弹幕组件 的启动入口，点击后弹出 BarrageSendView│ └── TUIBarrageDisplayView.java // 弹幕组件 的弹幕列表展示视图├── dashboard // 仪表盘视图的目录│ ├── AnchorDashboardView.java // 主播结束直播后，显示主播仪表盘视图的实现│ └── AudienceDashboardView.java // 观众收到主播结束直播后，显示观众端仪表盘视图的实现├── gift // 直播中的礼物功能实现的目录│ ├── giftcloudserver // 礼物组件 的后台服务层目录│ ├── GiftCloudServer.java // 礼物组件 的后台服务（客户需实现，访问自己的礼物后台）│ └── GiftCloudServerConfig.java // 礼物组件 的礼物相关配置│ ├── model // 礼物组件 的数据层目录│ ├── GiftBean.java // 礼物组件 的礼物模型（对应后台配置的礼物）│ ├── GiftJson.java // 礼物组件 的自定义礼物消息格式│ ├── LikeJson.java // 礼物组件 的自定义点赞消息格式│ ├── TUIGift.java // 礼物组件 的礼物模型│ └── TUIGiftUser.java // 礼物组件 的礼物收/发用户模型│ ├── service // 礼物组件 的服务层目录│ ├── GiftIMService.java // 礼物组件 的服务层，封装了发送 Chat 消息功能│ └── LikeIMService.java // 礼物组件 的服务层，封装了发送 Chat 消息功能│ └── store // 礼物组件 的数据层目录│ └── GiftStore.java // 礼物组件 的数据管理│ └── view // 礼物组件 的视图层目│ ├── GiftBulletFrameLayout.java // 礼物组件 的图片礼物视图│ └── GiftListPanelView.java // 礼物组件 的礼物面板│ ├── TUIGiftListView.java // 礼物组件 的礼物面板弹窗│ ├── TUIGiftPlayView.java // 礼物组件 的礼物播放视图│ └── TUILikeButton.java // 礼物组件 的点赞按钮├── music // 音乐面板功能 实现的目录│ ├── service // 音乐设置面板 的服务层目录│ ├── MusicService.java // 音乐面板服务层的具体实现，封装了音乐播放相关的 api│ ├── store // 音乐设置面板 的数据层目录│ ├── MusicPanelSateFactory.java // 音乐设置面板 生成数据层数据的工厂类实现│ └── MusicPanelState.java // 音乐设置面板 数据的具体封装类│ └── view // 音乐设置面板 的视图层目录│ ├── MusicListAdapter.java // 音乐设置面板 的视图层音乐列表的适配器│ └── MusicPanelView.java // 音乐设置面板 的视图层的具体实现├── preview // 主播开播预览页面，直播间信息编辑区域的视图目录│ ├── LiveInfoEditView.java // 直播间信息编辑区域的视图实现│ ├── PresetImageGridAdapter.java // 直播间信息编辑区域的直播封面选择的适配器│ ├── StreamCategoryPicker.java // 直播间信息编辑区域的直播分类选择的视图│ ├── StreamPresetImagePicker.java // 直播间信息编辑区域的直播封面选择的视图│ └── StreamPrivacyStatusPicker.java // 直播间信息编辑区域的直播公开还是隐私选择的视图├── roominfo // 直播间信息面板的目录│ ├── RoomInfoDetailView.java // 直播间信息面板 被点击后，弹出的直播间信息详情页面板│ └── RoomInfoView.java // 直播间信息面板 的视图实现└── roomlist // 直播间列表组件的实现目录├── service // 直播间列表组件 的服务层目录└── RoomListService.java // 直播间列表组件服务层的具体实现，封装了直播间列表相关的 api├── store // 直播间列表组件 的数据层目录└── RoomListState.java // 直播间列表组件 数据的具体封装类└── view // 直播间列表组件 的视图层目录├── adapter // 直播间列表组件 的视图层的适配器目录│ ├── LoadMoreAdapterWrapper.java // 直播间列表组件 对直播间列表适配器扩展了下拉加载功能的适配器│ └── RoomListAdapter.java // 直播间列表组件 的直播间列表适配器├── ListAudienceActivity.java // 直播间列表组件 中点击某一个直播间，拉起的直播拉流页面└── RoomListView.java // 直播间列表组件 直播间列表视图的实现
非公共的 UI 组件
文件位置：Android/tuilivekit/src/main/java/com/trtc/uikit/livekit/view/liveroomview├── anchor // 主播端 视图层目录│ ├── common // 主播端 视图层预览界面 和 直播界面公共的视图目录│ ├── videoparams // 视频参数设置面板 目录│ ├── VideoParamsPanel.java // 视频参数设置面板的实现│ └── VideoResolutionPicker.java // 选择超清、高清、标清面板的实现│ ├── BeautyListAdapter.java // 基础美颜视图的适配器│ ├── BeautyListPanel.java // 基础美颜视图的实现│ ├── SettingsListAdapter.java // 设置面板的适配器│ └── SettingsPanel.java // 设置面板的实现│ ├── livestreaming // 直播推流状态的视图目录│ ├── connection // 主播连线相关的视图目录│ ├── AnchorConnectingAdapter.java // 已连线主播列表适配器│ ├── AnchorConnectionManagePanel.java // 主播连线管理面板：发起连线，查看可连线主播列表等│ └── AnchorRecommendedAdapter.java // 可连线主播的推荐列表适配器│ ├── link // 观众连麦相关的视图目录│ ├── AnchorApplyLinkMicAdapter.java // 申请连麦用户列表的适配器│ ├── AnchorLinkMicAdapter.java // 连麦成功用户列表的适配器│ └── AnchorLinkMicManagePanel.java // 连麦管理面板：可接受观众连麦、拒绝观众连麦、挂断连麦│ ├── AnchorEndLivePanel.java // 直播中点击关闭直播间弹出的面板视图│ ├── AnchorFunctionView.java // 直播中底部功能区的视图│ ├── AnchorLivingView.java // 直播中整体的布局视图│ └── ApplyLinkMicFloatView.java // 有观众申请连麦时，悬浮在顶层的提示连麦的视图│ ├── preview // 直播预览状态的视图目录│ ├── AnchorPreviewFunctionView.java // 直播预览时底部功能区的视图│ └── AnchorPreviewView.java // 直播预览整体的布局视图│ ├── video // 主播端推流画面视图目录│ └── AnchorVideoView.java // 主播端推流画面视图的实现│ └── AnchorView.java // 主播推流整体的视图布局├── audience // 观众视图层目录│ ├── livestreaming // 观众拉流的视图目录│ ├── link // 观众连麦相关的视图目录│ ├── SelectLinkMicTypePanel.java // 观众连麦弹出的选择语音连麦还是视频连麦的视图│ ├── VideoLinkSettingsPanel.java // 视频连麦时相关参数设置面板视图│ └── VideoSettingsAdapter.java // 视频连麦时相关参数设置的适配器│ ├── ActionConfirmationPanel.java // 观众列表 中显示 观众头像的适配器│ ├── AudienceFunctionView.java // 观众拉流页面底部功能区的视图│ ├── AudienceLivingView.java // 观众拉流页面子组建的布局视图│ └── AudienceWaitingPassView.java // 观众申请连麦时，等待主播统一的动画视图│ ├── video // 观众端拉流画面视图目录│ └── AudienceVideoView.java // 观众端拉流画面视图的实现│ └── AudienceView.java // 观众拉流整体的视图布局├── common // 主播推流和观众拉流公用的视图目录└── video // 摄像头采集的视频画面视图目录├── PlayerVideoView.java // 拉取远端视频流视图├── PusherVideoView.java // 摄像头采集的视频流视图├── RenderVideoViewModel.java // 视频流视图的 videomodel├── VideoView.java // 一路视频流的封装视图├── VideoViewFactory.java // 生成 VideoView 的工厂类└── WaitLinkMicAnimationView.java // 观众申请连麦时，主播提示观众连麦的动画视图
方案三：自定义全部 UI 方案
TUILiveKit 的整体功能是基于 TUIRoomEngine 这个无 UI SDK 实现的，您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见TUIRoomEngine API。
是
否
本页内容是否解决了您的问题？