- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- 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 政策
- 词汇表
本文将介绍如何定制 TUIRoomKit 的用户界面，我们提供了两个方案供您选择：界面微调方案和自实现 UI 方案。
方案一：界面微调方案
通过直接修改我们提供的 UI 源代码，对 TUIRoomKit 的用户界面进行调整，TUIRoomKit 的界面源代码位于 Github 中的
Android/tuiroomkit 文件夹下面：替换图标
您可以直接替换
src/res/drawable-xxhdpi 文件夹下的图标，以确保整个 App 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改 values-zh 和 values-en 中的
strings.xml 文件来修改视频会议界面的字符串内容。方案二：自定义部分 UI 方案
TUIRoomKit 的 UI 代码位于
src/main/java/com/tencent/cloud/tuikit/roomkit/view目录下，视屏 view 位于 TUIVideoSeat 组件中TUIRoomKit 的 View 关键文件如下，您可以按照您的需求更改对应的view，调整您的UI
｜—— PrepareActivity // 准备页面Activity｜｜—— CreateRoomActivity // 创建房间Activity｜｜—— EnterRoomActivity // 进入房间Activity｜activity ——｜—— RoomMainActivity // 房间主页面Activity｜view ——｜｜component——｜—— PrepareView // 准备页面View｜｜—— CreateRoomView // 创建房间View｜｜—— EnterRoomView // 进入房间View｜｜—— RoomMainView // 音视频会议页面主页面View｜｜—— TopView // 顶部按钮所在view，顶部按钮包括：扬声器/听筒切换，切换摄像头等｜｜—— BottomView // 底部按钮所在view，底部按钮包括：摄像头、麦克风、成员管理等｜｜—— UseListView // 用户列表所在view｜｜—— RaiseHandApplicationListView // 举手发言模式，举手申请列表页面｜｜—— TransferMasterView // 房主转让页面｜｜—— MoreFunctionView // “更多“功能所在view，更多功能有聊天、美颜以及设置功能｜｜—— MeetingActivity // 音视频会议界面主activity
底部按钮 BottomView 的修改
为了方便您自定义底部的功能按钮，我们的 BottomView 是通过读取 list 来自动构造，以开关视频按钮为例子，代码如下
private BottomItemData createCameraItem() {BottomItemData cameraItemData = new BottomItemData();//设置按钮类型用于区分不同按钮cameraItemData.setType(BottomItemData.Type.VIDEO);//设置按钮是否可点击if (isOwner()) {cameraItemData.setEnable(true);} else if (mRoomStore.roomInfo.enableSeatControl) {cameraItemData.setEnable(false);} else {cameraItemData.setEnable(mRoomStore.roomInfo.enableVideo);}//设置按钮默认图标cameraItemData.setIconId(R.drawable.tuiroomkit_ic_camera_off);//设置按钮背景图片cameraItemData.setBackground(R.drawable.tuiroomkit_bg_bottom_item_black);//设置按钮不可点击时的图标cameraItemData.setDisableIconId(R.drawable.tuiroomkit_ic_camera_off);//设置按钮默认图标cameraItemData.setName(mContext.getString(R.string.tuiroomkit_item_open_camera));//按钮点击效果，如果您的按钮点击时需要切换图片/名称等，需要构造此数据BottomSelectItemData camaraSelectItemData = new BottomSelectItemData();//设置按钮选中时的名称camaraSelectItemData.setSelectedName(mContext.getString(R.string.tuiroomkit_item_close_camera));//设置按钮未选中时的名称camaraSelectItemData.setUnSelectedName(mContext.getString(R.string.tuiroomkit_item_open_camera));//设置按钮是否选中camaraSelectItemData.setSelected(false);//设置按钮选中时的图标camaraSelectItemData.setSelectedIconId(R.drawable.tuiroomkit_ic_camera_on);//设置按钮未选中时的图标camaraSelectItemData.setUnSelectedIconId(R.drawable.tuiroomkit_ic_camera_off);//设置按钮选中/未选中时的点击事件camaraSelectItemData.setOnItemSelectListener(new BottomSelectItemData.OnItemSelectListener() {@Overridepublic void onItemSelected(boolean isSelected) {enableCamera(isSelected);}});cameraItemData.setSelectItemData(camaraSelectItemData);return cameraItemData;}
方案三：自定义全部 UI 方案
TUIRoomKit 的整体功能是基于 TUIRoomEngine 这个无 UI SDK实现的，您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见TUIRoomEngine API 接口地址。
是
否
本页内容是否解决了您的问题？