本文介绍如何自定义音视频呼叫页面和音视频通话页面的 UI。1 对 1 娱乐社交场景方案中的呼叫页面及音视频通话页面均由 CallActivity 实现，通过切换不同的 Fragment 来实现呼叫 UI 与通话中 UI 的切换。

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

自定义呼叫页面的 UI

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

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

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

自定义音频通话页面的 UI

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

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

资源 ID	描述
fl_avatar	对方头像
tv_nick	对方昵称
tv_title	昵称下方的标题
tv_subtitle	通话时长
bottom_bar	麦克风、静音、挂断布局
security_tips	音频通话触发敏感词时的消息提醒布局

自定义视频通话页面的 UI

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

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

资源 ID	描述
tv_big_video_desc	大屏幕视频画布的摄像头开关状态的文案
big_video	大屏幕视频画布
big_video_security_mask	大屏幕视频违规时的遮罩
tv_small_video_desc	小屏幕视频画布的摄像头开关状态的文案
small_video	小屏幕视频画布
small_video_security_mask	小屏幕视频违规时的遮罩
fl_local_camera	本端摄像头开关状态
iv_avatar	对方头像
tv_nickname	对方昵称
tv_duration	通话时长
bottom_bar	麦克风、静音、摄像头切换、挂断布局
security_tips	视频通话触发敏感词时的消息提醒布局

自定义会话列表的 UI

在 1 对 1 示例项目源码中，会话列表界面基于 IM UIKit 实现，如果您需要定制会话列表的UI，请基于 IM UIKit 进行自定义 UI，具体请参见自定义会话列表界面 UI。

自定义聊天界面的 UI

在 1 对 1 娱乐社交示例项目源码中，聊天界面的代码为 CustomChatP2PActivity，您可以通过修改该文件来自定义UI样式。如果您需要更加个性化的定制，您也可以基于 IM UIKit 进行自定义 UI，具体请参见自定义会话界面 UI。

资源 ID	描述
activity_my_chat_p2p.xml	顶部视图
chat_message_bottom_layout.xml	底部菜单栏布局
AudioInputDialog	语音输入中视图
HotTopicDialog	热聊话题
ReportDialog	举报视图