本文将介绍如何定制 TUIRoomKit 的用户界面，我们提供了两个方案供您选择：界面微调方案和自实现 UI 方案。
方案一：界面微调方案
通过直接修改我们提供的 UI 源代码，对 TUIRoomKit 的用户界面进行调整，TUIRoomKit 的界面源代码位于 Github 中的
Android/tuiroomkit文件夹下面：替换图标
您可以直接替换
src/main/res/drawable-xxhdpi文件夹下的图标，以确保整个 App 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
替换文案
您可以通过修改 values-zh 和 values 中的
strings.xml文件来修改视频会议界面的字符串内容。方案二：自定义部分 UI 方案
您可以通过修改
src/main/java/com/tencent/cloud/tuikit/roomkit/view文件下的不同页面来调整多人视频会议界面的 UI 布局：view├── basic│ ├── BaseBottomDialog.java // 通用底部弹框│ ├── BaseDialogFragment.java // 通用对话框│ ├── BaseSettingItem.java // 通用设置项│ ├── ConfirmDialog.java // 通用确认对话框│ ├── NotificationView.java // 通用通知栏│ ├── PrepareView.java // 准备界面│ ├── RoomToast.java // 通用普通 Toast│ ├── RoundRelativeLayout.java // 通用圆角 RelativeLayout│ ├── SwitchSettingItem.java // 通用 switch 开关│ └── TipToast.java // 通用提示 Toast├── create // 创建会议界面│ ├── CreateConferenceActivity.java│ ├── CreateConferenceView.java│ └── RoomTypeSelectView.java├── join // 加入会议界面│ ├── EnterConferenceActivity.java│ └── EnterConferenceView.java├── main // 会议主界面│ ├── ConferenceMainFragment.java // 会议主界面 Fragment│ ├── ConferenceMainView.java // 会议主界面 View│ ├── RoomMainActivity.java // 会议主界面 Activity│ ├── RoomWindowManager.java // 会议主界面和悬浮窗切换的管理者│ ├── aisssistant // AI 助手│ │ └── AIAssistantDialog.java│ ├── bottomnavigationbar // 底部栏│ │ ├── BottomLayout.java│ │ ├── BottomView.java│ │ └── SeatRequestCountView.java│ ├── chat // 聊天弹窗│ │ └── ChatActivity.java│ ├── conferenceinvitation // 会中邀请│ │ ├── InvitationReceivedActivity.java│ │ ├── InvitationReceivedView.java│ │ └── SlideToAcceptView.java│ ├── exitroom // 退出会议│ │ └── ExitRoomDialog.java│ ├── floatwindow // 悬浮窗│ │ ├── screensharingindicate│ │ │ └── ScreenSharingIndicateFloatView.java│ │ └── videoplaying // 视频播放悬浮窗│ │ ├── RoomFloatViewService.java│ │ └── RoomVideoFloatView.java│ ├── invite // 底部邀请弹窗│ │ └── InviteDialog.java│ ├── localaudioindicator // 本地音频状态显示│ │ └── LocalAudioToggleView.java│ ├── mediasettings // 媒体设置，包括音频和视频的设置│ │ ├── MediaSettingPanel.java│ │ ├── QualityInfoPanel.java│ │ ├── VideoFrameRateChoicePanel.java│ │ └── VideoResolutionChoicePanel.java│ ├── raisehandcontrolpanel // 举手用户管理面板│ │ ├── RaiseHandApplicationListPanel.java│ │ └── RaiseHandNotificationView.java│ ├── roominfo // 会议信息│ │ └── RoomInfoDialog.java│ ├── screensharecontrol // 屏幕共享控制(成员列表更多更多功能)│ │ └── MoreFunctionDialog.java│ ├── share // 分享会议│ │ └── ShareRoomDialog.java│ ├── speechtotext // 语音转文字│ │ ├── SpeechToTextActivity.java│ │ ├── SpeechToTextRecyclerView.java│ │ └── SpeechToTextSubtitleView.java│ ├── topnavigationbar // 顶部栏│ │ ├── AudioRouteSwitchView.java│ │ ├── CameraSwitchView.java│ │ ├── ConferenceDurationView.java│ │ ├── ConferenceNameView.java│ │ └── TopView.java│ ├── transferownercontrolpanel // 转让房主选择面板│ │ └── TransferMasterPanel.java│ ├── usercontrolpanel // 用户管理面板│ │ ├── UserListPanel.java│ │ ├── UserListTypeSelectView.java│ │ ├── UserRecyclerView.java│ │ ├── userlistitem // 用户管理面板列表项│ │ │ ├── CallUserView.java│ │ │ ├── CameraIconView.java│ │ │ ├── InviteSeatButton.java│ │ │ ├── ListUserInfoView.java│ │ │ ├── MicIconView.java│ │ │ └── ScreenIconView.java│ │ └── usermanager // 用户管理面板点击后的用户管理弹窗│ │ ├── ModifyNameKeyboard.java│ │ └── UserManagementPanel.java│ ├── videoseat // 视频流画面布局│ │ └── TUIVideoSeatView.java│ └── watermark // 水印│ └── TextWaterMarkView.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() {@Overridepublic void onItemSelected(boolean isSelected) {enableCamera(isSelected);}});cameraItemData.setSelectItemData(camaraSelectItemData);return cameraItemData;}
方案三：自定义全部 UI 方案
TUIRoomKit 的整体功能是基于 RTC Room Engine SDK实现的，您可以完全基于 RTC Room Engine SDK 实现一套自己的 UI 界面。详情可见
