产品动态
产品近期公告
关于 TRTC Live 正式上线的公告
关于TRTC Conference 正式版上线的公告
Conference 商业化版本即将推出
关于多人音视频 Conference 开启内测公告
关于音视频通话 Call 正式版上线的公告
关于腾讯云音视频终端 SDK 播放升级及新增授权校验的公告
关于 TRTC 应用订阅套餐服务上线的相关说明
Android
本文将介绍如何定制 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
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 的整体功能是基于 TUIRoomEngine 这个无 UI SDK实现的，您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见TUIRoomEngine API 接口地址。
文档反馈