腾讯云即时通信IMAndroid_AI解决方案_同尘科技

本文介绍如何设置 Android 界面风格。更多实操教学视频请参见 设置样式（Android）。

设置会话列表

会话列表由标题区 TitleBarLayout 与列表区 ConversationListLayout 组成，每部分都提供了 UI 样式以及事件注册的接口可供修改。

设置标题样式

标题区除了本身作为 View 所具有的属性功能之外，还包含左、中、右三块区域，如下图所示：您可参见 ITitleBarLayout 进行自定义修改。
例如，在会话列表中，隐藏左边的 LeftGroup，设置中间的标题，隐藏右边的文本和图片按钮，代码如下：
（参见 MainActivity 中的实现）

mainTitleBar.setTitle(getResources().getString(R.string.conversation_title), ITitleBarLayout.Position.MIDDLE);mainTitleBar.getLeftGroup().setVisibility(View.GONE);mainTitleBar.getRightGroup().setVisibility(View.VISIBLE);mainTitleBar.setRightIcon(R.drawable.more_btn);

效果如下图所示：另外，您也可以定制点击事件：

Menu menu = new Menu(this, mainTitleBar);mainTitleBar.setOnRightClickListener(new View.OnClickListener() {    @Override    public void onClick(View v) {        if (menu == null) {            return;        }        if (menu.isShowing()) {            menu.hide();        } else {            menu.show();        }    }});

设置会话列表样式

列表区的自定义 layout 继承自 RecyclerView，登录后 TUIKit 会根据用户名从 SDK 读取该用户的会话列表。
会话列表提供一些常用功能定制，例如，头像是否圆角、背景、字体大小、点击与长按事件等。示例代码如下：

public static void customizeConversation(final ConversationLayout layout) {    // 从 ConversationLayout 获取会话列表    ConversationListLayout listLayout = layout.getConversationList();    listLayout.setItemTopTextSize(16); // 设置 item 中 top 文字大小    listLayout.setItemBottomTextSize(12);// 设置 item 中 bottom 文字大小    listLayout.setItemDateTextSize(10);// 设置 item 中 timeline 文字大小    listLayout.setItemAvatarRadius(5); // 设置 adapter item 头像圆角大小    listLayout.disableItemUnreadDot(false);// 设置 item 是否不显示未读红点，默认显示    // 长按弹出菜单    listLayout.setOnItemLongClickListener(new ConversationListLayout.OnItemLongClickListener() {        @Override        public void OnItemLongClick(View view, int position, ConversationInfo conversationInfo) {            startPopShow(view, position, conversationInfo);        }    });}

设置会话列表不同的文字大小和头像圆角大小效果图如下所示：

默认样式	自定义样式
	

更多详细信息请参见 ConversationLayoutSetting.java。

设置头像的风格样式

IM SDK 不做头像存储，需要集成者有头像存储接口获取头像 URL，这里 TUIKit 通过随机头像接口进行演示，如何设置头像。
首先您需要在个人资料页面中，上传头像图片，调用修改资料接口。

V2TIMUserFullInfo v2TIMUserFullInfo = new V2TIMUserFullInfo();// 头像if (!TextUtils.isEmpty(mIconUrl)) {    v2TIMUserFullInfo.setFaceUrl(mIconUrl);}V2TIMManager.getInstance().setSelfInfo(v2TIMUserFullInfo, new V2TIMCallback() {    @Override    public void onError(int code, String desc) {    }
    @Override    public void onSuccess() {    }});

会话列表设置头像在 ConversationCommonHolder.java 中进行获取展示：

conversationIconView.setConversation(conversation);

设置聊天窗口的样式

聊天窗口包含标题区 TitleBarLayout，用法与会话列表相同。除此之外，聊天窗口还包含三个区域，从上到下为通知区 NoticeLayout、消息区 MessageRecyclerView 和输入区 InputView，如下图所示：

/** * 获取聊天窗口 Input 区域 Layout * * @return */InputView getInputLayout();/** * 获取聊天窗口 Message 区域 Layout * * @return */MessageRecyclerView getMessageLayout();
/** * 获取聊天窗口 Notice 区域 Layout * * @return */NoticeLayout getNoticeLayout();

更多详细信息请参见 ChatLayoutSetting.java。

设置聊天列表标题栏样式

聊天列表和会话列表的标题栏都使用 TitleBarLayout。可以参见会话列表标题栏的设置方式 修改聊天列表的标题栏。如果聊天列表内置的标题栏不满足您的需求，推荐自定义标题栏，替换 聊天列表内置的标题栏。不建议直接修改 TitleBarLayout，因为 TUIKit 内的页面都使用 TitleBarLayout，修改了 TitleBarLayout 会导致其他界面的标题栏都发生变化。

设置通知区域 NoticeLayout 样式

通知区域由两个 TextView 组成，如下图所示：效果如下图所示：

// 从 ChatView 获取 NoticeLayoutNoticeLayout noticeLayout = layout.getNoticeLayout();// 可以使通知区域一致展示noticeLayout.alwaysShow(true);// 设置通知主题noticeLayout.getContent().setText("现在插播一条广告");// 设置通知提醒文字noticeLayout.getContentExtra().setText("参看有奖");// 设置通知的点击事件noticeLayout.setOnNoticeClickListener(new View.OnClickListener() {    @Override    public void onClick(View v) {        ToastUtil.toastShortMessage("赏白银五千两");    }});

设置消息区域 MessageRecyclerView 样式

MessageRecyclerView 继承自 RecyclerView ，本文提供自定义修改聊天背景、气泡、文字、是否显示昵称等常见的用法，更多详情请参见 IMessageProperties.java。

设置聊天窗口的背景色

您可以自定义设置聊天背景色，示例代码如下：

// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();////// 设置聊天背景 //////messageRecyclerView.setBackground(new ColorDrawable(0xB0E2FF00));

设置不同的聊天窗口背景色效果图如下所示：

默认颜色	自定义颜色
	

设置发送者的头像样式

TUIKit 的界面在显示用户时，会从用户资料中读取头像地址并显示。
示例代码如下：

// 聊天界面设置头像if (!TextUtils.isEmpty(msg.getFaceUrl())) {    List