Conference
  • 产品概述
  • Web
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 虚拟背景
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 定义
    • 常见问题
  • iOS
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Android
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Electron
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 定义
    • 常见问题
  • Flutter
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • In-Conference Chat
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • 产品概述
    • 产品概述
  • 开通服务
  • 价格中心
    • 免费时长
    • TRTC 多人音视频 Conference 包月套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 服务器 API
    • REST 接口
      • RESTful 接口概述
      • RESTful 接口列表
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • 用户管理
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • 错误码
Conference

UI 定制

本文将介绍如何定制 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() {
@Override
public void onItemSelected(boolean isSelected) {
enableCamera(isSelected);
}
});
cameraItemData.setSelectItemData(camaraSelectItemData);
return cameraItemData;
}

方案三:自定义全部 UI 方案

TUIRoomKit 的整体功能是基于 TUIRoomEngine 这个无 UI SDK实现的,您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见TUIRoomEngine API 接口地址。