设置会话列表
会话列表由标题区 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() {@Overridepublic 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() {@Overridepublic void OnItemLongClick(View view, int position, ConversationInfo conversationInfo) {startPopShow(view, position, conversationInfo);}});}
设置会话列表不同的文字大小和头像圆角大小效果图如下所示：
默认样式 | 自定义样式 |
 |  |
设置头像的风格样式
IM SDK 不做头像存储，需要集成者有头像存储接口获取头像 URL，这里 TUIKit 通过随机头像接口进行演示，如何设置头像。
首先您需要在个人资料页面中，上传头像图片，调用修改资料接口。
V2TIMUserFullInfo v2TIMUserFullInfo = new V2TIMUserFullInfo();// 头像if (!TextUtils.isEmpty(mIconUrl)) {v2TIMUserFullInfo.setFaceUrl(mIconUrl);}V2TIMManager.getInstance().setSelfInfo(v2TIMUserFullInfo, new V2TIMCallback() {@Overridepublic void onError(int code, String desc) {}@Overridepublic void onSuccess() {}});
conversationIconView.setConversation(conversation);
设置聊天窗口的样式
聊天窗口包含标题区 TitleBarLayout，用法与会话列表相同。除此之外，聊天窗口还包含三个区域，从上到下为通知区 NoticeLayout、消息区 MessageRecyclerView 和输入区 InputView，如下图所示：
/*** 获取聊天窗口 Input 区域 Layout** @return*/InputView getInputLayout();/*** 获取聊天窗口 Message 区域 Layout** @return*/MessageRecyclerView getMessageLayout();/*** 获取聊天窗口 Notice 区域 Layout** @return*/NoticeLayout getNoticeLayout();
设置通知区域 NoticeLayout 样式
通知区域由两个 TextView 组成，如下图所示：
效果如下图所示：
// 从 ChatView 获取 NoticeLayoutNoticeLayout noticeLayout = layout.getNoticeLayout();// 可以使通知区域一致展示noticeLayout.alwaysShow(true);// 设置通知主题noticeLayout.getContent().setText("现在插播一条广告");// 设置通知提醒文字noticeLayout.getContentExtra().setText("参看有奖");// 设置通知的点击事件noticeLayout.setOnNoticeClickListener(new View.OnClickListener() {@Overridepublic 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<Object> urllist = new ArrayList<>();urllist.add(msg.getFaceUrl());if (isForwardMode) {leftUserIcon.setIconUrls(urllist);} else {if (msg.isSelf()) {rightUserIcon.setIconUrls(urllist);} else {leftUserIcon.setIconUrls(urllist);}}} else {rightUserIcon.setIconUrls(null);leftUserIcon.setIconUrls(null);}
如果用户没有设置头像会显示默认头像，您可以自定义设置默认头像、头像是否圆角以及头像大小等。
示例代码如下：
// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();////// 设置聊天背景 //////messageRecyclerView.setBackground(new ColorDrawable(0xFFEFE5D4));////// 设置头像 //////// 设置默认头像，默认与朋友与自己的头像相同messageRecyclerView.setAvatar(R.drawable.core_default_user_icon_light);// 设置头像圆角messageRecyclerView.setAvatarRadius(50);// 设置头像大小messageRecyclerView.setAvatarSize(new int[]{68, 68});
默认头像样式 | 自定义头像样式 |
 |  |
设置气泡的背景色
左边为对方的气泡，右边为自己的气泡，您可以自定义设置双方的气泡背景。
示例代码如下：
// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();// 设置自己聊天气泡的背景messageRecyclerView.setRightBubble(context.getResources().getDrawable(R.drawable.chat_bubble_self_bg_lively));// 设置朋友聊天气泡的背景messageRecyclerView.setLeftBubble(context.getResources().getDrawable(R.drawable.chat_bubble_other_bg_lively));
设置气泡背景图片效果图如下所示：
默认气泡背景图片 | 自定义气泡背景图片 |
|  |
设置发送者的昵称样式
您可以自定义设置昵称的字体大小与颜色等，但双方昵称样式必须保持一致。
示例代码如下：
// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();////// 设置昵称样式（对方与自己的样式保持一致）//////messageRecyclerView.setNameFontSize(12);messageRecyclerView.setNameFontColor(0x8B5A2B00);
设置发送者昵称文字颜色效果图如下所示：
默认昵称颜色 | 自定义昵称颜色 |
|  |
设置聊天内容样式
您可以自定义设置聊天内容的字体大小、双方字体颜色等，但双方字体大小必须保持一致。
示例代码如下：
// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();// 设置聊天内容字体大小，朋友和自己用一种字体大小messageRecyclerView.setChatContextFontSize(15);// 设置自己聊天内容字体颜色messageRecyclerView.setRightChatContentFontColor(0xA9A9A900);// 设置朋友聊天内容字体颜色messageRecyclerView.setLeftChatContentFontColor(0xA020F000);
设置聊天内容字体效果图如下所示：
默认字体样式 | 自定义字体样式 |
|  |
设置聊天时间线样式
您可以自定义设置聊天时间线的背景、字体大小以及字体颜色等。示例代码如下：
// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();// 设置聊天时间线的背景messageRecyclerView.setChatTimeBubble(new ColorDrawable(0x8B691400));// 设置聊天时间的字体大小messageRecyclerView.setChatTimeFontSize(20);// 设置聊天时间的字体颜色messageRecyclerView.setChatTimeFontColor(0xEE00EE00);
设置时间线效果图如下所示：
默认时间线样式 | 自定义时间线样式 |
|  |
设置聊天的提示信息样式
您可以自定义设置提示信息的背景、字体大小以及字体颜色等。示例代码如下：
// 从 ChatView 获取 MessageRecyclerViewMessageRecyclerView messageRecyclerView = layout.getMessageLayout();// 设置提示的背景messageRecyclerView.setTipsMessageBubble(new ColorDrawable(0xA020F000));// 设置提示的字体大小messageRecyclerView.setTipsMessageFontSize(20);// 设置提示的字体颜色messageRecyclerView.setTipsMessageFontColor(0x7CFC0000);
设置提示信息效果图如下所示：
默认提示信息样式 | 自定义提示信息样式 |
 |  |
设置输入区域 InputView
输入区域 InputView，包含语音输入、文字输入、表情输入以及更多的“+”输入。
隐藏不要的功能
您可以自定义隐藏或展示更多“+”面板的图片、拍照、摄像以及发送文件的功能。
// 从 ChatView 获取 InputLayoutInputView inputView = layout.getInputLayout();// 隐藏拍照并发送inputView.disableCaptureAction(true);// 隐藏发送文件inputView.disableSendFileAction(true);// 隐藏发送图片inputView.disableSendPhotoAction(true);// 隐藏摄像并发送inputView.disableVideoRecordAction(true);
增加自定义的功能
您可以自定义新增更多“+”面板的动作单元实现相应的功能。
本文以隐藏发送文件，增加一个动作单元且该动作单元会发送一条消息为例，示例代码如下：
// 从 ChatView 获取 InputViewInputView inputView = layout.getInputLayout();// 隐藏发送文件inputView.disableSendFileAction(true);// 定义一个动作单元InputMoreActionUnit unit = new InputMoreActionUnit();unit.setIconResId(R.drawable.default_user_icon); // 设置单元的图标unit.setTitleId(R.string.profile); // 设置单元的文字标题unit.setOnClickListener(unit.new OnActionClickListener() { // 定义点击事件@Overridepublic void onClick() {ToastUtil.toastShortMessage("自定义的更多功能");TextMessageBean info = ChatMessageBuilder.buildTextMessage("我是谁");layout.sendMessage(info, false);}});// 把定义好的单元增加到更多面板inputView.addAction(unit);
替换点击“+”的事件
您可以自定义替换更多“+”面板的各个动作单元的功能。
// 从 ChatView 获取 InputViewInputView inputView = layout.getInputLayout();// 可以用自定义的事件来替换更多功能的入口inputView.replaceMoreInput(new View.OnClickListener() {@Overridepublic void onClick(View v) {ToastUtil.toastShortMessage("自定义的更多功能按钮事件");TextMessageBean info = ChatMessageBuilder.buildTextMessage("自定义的消息");layout.sendMessage(info, false);}});
替换点击“+”弹出的面板
您可以自定义更多“+”面板的样式、各个动作单元以及其对应的功能。
// 从 ChatView 获取 InputViewInputView inputView = layout.getInputLayout();// 可以用自定义的 fragment 来替换更多功能inputView.replaceMoreInput(new CustomInputFragment());
新面板 CustomInputFragment 的实现和普通的 Fragment 没有区别，在 onCreateView 时 inflate 自己的 View ，设置事件即可。本文以添加两个按钮 ，点击时弹出 toast 为例，示例代码如下：
public static class CustomInputFragment extends BaseInputFragment {@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {View baseView = inflater.inflate(R.layout.test_chat_input_custom_fragment, container, false);Button btn1 = baseView.findViewById(R.id.test_send_message_btn1);btn1.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {ToastUtil.toastShortMessage("发送一条超链接消息");}});Button btn2 = baseView.findViewById(R.id.test_send_message_btn2);btn2.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {ToastUtil.toastShortMessage("发送一条视频文字混合消息");}});return baseView;}}
效果如下图所示：
