有奖:文档满意度调查问卷,诚邀您填写> HOT
本文将介绍如何定制 TUIRoomKit 的用户界面,我们提供了两个方案供您选择:界面微调方案自实现 UI 方案

方案一:界面微调方案

通过直接修改我们提供的 UI 源代码,对 TUIRoomKit 的用户界面进行调整,TUIRoomKit 的界面源代码位于 Github 中的Android/tuiroomkit文件夹下面:

替换图标

您可以直接替换src/res/drawable-xxhdpi文件夹下的图标,以确保整个 App 中的图标色调风格保持一致,请在替换时保持图标文件的名字不变。




替换文案

您可以通过修改 values-zh 和 values-en 中的strings.xml文件来修改视频会议界面的字符串内容。

方案二:自定义部分 UI 方案

您可以通过修改src/main/java/com/tencent/cloud/tuikit/roomkit/view文件下的不同页面来调整多人视频会议界面的 UI 布局:
view
├── component
│ ├── BaseBottomDialog.java //通用底部弹框
│ ├── ConfirmDialog.java //通用确认对话框
│ ├── QRCodeView.java //通用二维码空间
│ └── RoundRelativeLayout.java //通用圆角 RelativeLayout
└── Page
├── RoomMaiActivity.java //会议主界面Activity
├── RoomMainView.java //会议主界面View
├── RoomWindowManager.java //会议主界面和悬浮窗切换的管理者
└── Widget
├── BottomNavigationBar //底部栏
│ ├── BottomLayout.java
│ └── BottomView.java
├── Chat //聊天弹窗
│ └── ChatActivity.java
├── Dialog //特定弹框
│ ├── ExitRoomDialog.java
│ ├── InviteUserDialog.java
│ └── RoomInfoDialog.java
├── FloatWindow //悬浮窗
│ ├── ScreenSharingIndicate //屏幕分享指示悬浮窗
│ │ └── ScreenSharingIndicateFloatView.java
│ └── VideoPlaying //视频播放悬浮窗
│ ├── RoomFloatViewService.java
│ └── RoomVideoFloatView.java
├── LocalAudioIndicator //本地本音状态显示
│ ├── LocalAudioToggleView.java
│ ├── LocalAudioToggleViewAction.java
│ └── LocalAudioToggleViewResponder.java
├── MediaSettings //媒体设置,包括音频和视频的设置
│ ├── MediaSettingPanel.java
│ ├── VideoFrameRateChoicePanel.java
│ └── VideoResolutionChoicePanel.java
├── RaiseHandControlPanel //举手用户管理面板
│ ├── RaiseHandApplicationListAdapter.java
│ └── RaiseHandApplicationListPanel.java
├── TopNavigationBar //顶部栏
│ └── TopView.java
├── TransferOwnerControlPanel //房间转让选择面板
│ ├── TransferMasterPanel.java
│ └── TransferOwnerAdapter.java
└── UserControlPanel //用户管理面板
├── UserListAdapter.java
├── UserListPanel.java
└── UserManagementView.java

底部按钮 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 接口地址