腾讯云实时音视频Android_音视频解决方案_同尘科技

本文将介绍如何定制 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 接口地址。

对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案