本文介绍如何自定义音视频呼叫界面、音视频通话界面、会话消息界面和会话列表界面的 UI。

背景信息

• 互联网问诊场景方案中的呼叫界面及音视频通话界面由 CallActivity 实现，通过切换不同的 Fragment 来实现呼叫 UI 与通话中 UI 的切换。

  如果您想完全自定义 Activity，请参考 呼叫组件中的自定义 UI。

• 互联网问诊场景方案中的会话列表和聊天界面在 IMCustomConfig 中实现。

自定义呼叫界面

呼叫界面包括主叫和被叫，统一由 CallFragment 实现，layout 资源文件为 fragment_call.xml。您可以通过修改该文件来自定义UI样式。

fragment_call.xml 对应的UI元素如下表所示。

资源 ID	描述
iv_avatar	对方头像
tv_nick	对方昵称
tv_title	对方昵称下方的标题
tv_subtitle	对方昵称下方的副标题
ll_invite	主叫挂断按钮布局
rl_invited	被叫拒绝及接听的布局

自定义音频通话界面

音频通话界面包括主叫和被叫，统一由 InAudioCallFragment 实现，layout资源文件为in_audio_call_fragment.xml。您可以通过修改该文件来自定义UI样式。

in_audio_call_fragment.xml 对应的UI元素如下表所示。

资源 ID	描述
fl_avatar	对方头像
tv_nick	对方昵称
tv_in_call	通话中状态
tv_duration	通话时长
bottom_bar	麦克风、静音、挂断布局

自定义视频通话界面

视频通话界面包括主叫和被叫，统一由 InVideoCallFragment 实现，layout 资源文件为 in_video_call_fragment.xml。您可以通过修改该文件来自定义UI样式。

in_video_call_fragment.xml 对应的UI元素如下表所示。

资源 ID	描述
tv_big_video_desc	大屏幕视频画布的摄像头开关状态的文案
big_video	大屏幕视频画布
tv_small_video_desc	小屏幕视频画布的摄像头开关状态的文案
small_video	小屏幕视频画布
tv_nickname	对方昵称
tv_duration	通话时长
bottom_bar	麦克风、静音、摄像头切换、挂断布局

自定义会话列表界面

您可以配置会话列表的 Title Bar、item 点击事件等内容，具体实现方法请参见互联网问诊示例项目源码中 IMCustomConfig 中的实现。

通过修改 IM UIKit 的ConversationKitClient.setConversationUIConfig 方法来自定义该界面。

实现隐藏 Title Bar，示例代码如下：

// 会话界面配置
  public static void configConversationUI() {
    ConversationUIConfig conversationUIConfig = new ConversationUIConfig();
    conversationUIConfig.showTitleBar = false; // 设置会话界面不展示Title Bar
    ConversationKitClient.setConversationUIConfig(conversationUIConfig);
  }

如果您想要完全自定义会话列表界面 UI，请参见 自定义会话列表界面 UI。

自定义聊天界面

您可以自定义聊天界面 UI，详细实现方法请参见互联网问诊示例项目源码中 IMCustomConfig 中的实现。通过修改 IM UIKit 的 ChatKitClient.setChatUIConfig 方法来自定义该界面。

• 实现隐藏聊天界面右上角的更多按钮，示例代码如下：

  ChatUIConfig uiConfig = new ChatUIConfig();
  uiConfig.messageProperties = new MessageProperties();
  uiConfig.messageProperties.showTitleBarRightIcon = false; // 标题栏 右侧icon不展示
  ChatKitClient.setChatUIConfig(uiConfig);
  

• 自定义底部消息类型的布局，示例代码如下：

  ChatUIConfig uiConfig = new ChatUIConfig();
  uiConfig.chatViewCustom =
          layout -> { // 底部消息类型布局自定义
            int role = SpUtils.getInstance().getInt(AppConstants.ROLE, -1);
            if (role == Role.SUFFERER) {
              return;
            }
            FrameLayout frameLayout = layout.getChatBodyBottomLayout();
            IMBottomView imBottomView = new IMBottomView(context);
            imBottomView.setClickListener(
                new IMBottomView.IBottomViewClick() {
                  @Override
                  public void clickSuffererInfo() {
                    new SuffererInfoDialog(layout.getContext()).show();
                  }
  
                  @Override
                  public void clickHistory() {
                    ToastX.showShortToast(context.getString(R.string.medical_feature_tip));
                  }
  
                  @Override
                  public void clickEndConsultation() {
                    ToastX.showShortToast(context.getString(R.string.medical_feature_tip));
                  }
                });
            FrameLayout.LayoutParams layoutParams =
                new FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            layoutParams.leftMargin = context.getResources().getDimensionPixelSize(R.dimen.dp_16);
            frameLayout.addView(imBottomView, layoutParams);
          };
  ChatKitClient.setChatUIConfig(uiConfig);
  
  

• 自定义长按消息展示的菜单，示例代码如下：

  ChatUIConfig uiConfig = new ChatUIConfig();
  uiConfig.chatPopMenu =
          new IChatPopMenu() { // 长按消息 消息操作菜单自定义
            @NonNull
            @Override
            public void customizePopMenu(
                List<ChatPopMenuAction> menuList, ChatMessageBean messageBean) { // 可根据需要自行处理添加删除菜单，示例内移除转发标记功能
              List<ChatPopMenuAction> customMenuList = new ArrayList<>();
              for (int i = 0; i < menuList.size(); i++) {
                ChatPopMenuAction menuAction = menuList.get(i);
                if (!TextUtils.equals(menuAction.getAction(), ActionConstants.POP_ACTION_TRANSMIT)
                    && !TextUtils.equals(menuAction.getAction(), ActionConstants.POP_ACTION_PIN)) {
                  customMenuList.add(menuAction);
                }
              }
              menuList.clear();
              menuList.addAll(customMenuList);
            }
  
            @Override
            public boolean showDefaultPopMenu() {
              return true;
            }
          };
  ChatKitClient.setChatUIConfig(uiConfig);
      
  

• 如果您想要完全自定义会话消息界面 UI，请参见 自定义会话消息界面 UI。