合集
腾讯云IM接入案列（一）
腾讯云IM接入案列（二）
腾讯云IM接入案列（三）
腾讯云IM接入案列（四）
本篇内容
这次我们会具体实现类似案例（一）的效果，实现过程最好先阅读一下案例（二）这样理解起来会比较容易，也方便日后自行扩展吧
基础准备
由于现实出来的界面，我都是通过扩展的消息内容来显示的，那么，我们是怎么通过在发送消息的时候添加自定义的字段信息呢
我们可以先来查看一下官方文档
b.PNG
从文档上可以了解到，我们发送的TIMMessage可以添加多个TIMElem，比如图片，文本，视频等Elem，所以在发送的时候，我们可以自定义一个TIMElem作为扩展内容。
然后我们看一下CustomMessage里面的一个方法
private void parse(byte[] data){
type = Type.INVALID;
try{
String str = new String(data, "UTF-8");
JSONObject jsonObj = new JSONObject(str);
int action = jsonObj.getInt("userAction");
switch (action){
case TYPE_TYPING:
type = Type.TYPING;
this.data = jsonObj.getString("actionParam");
if (this.data.equals("EIMAMSG_InputStatus_End")){
type = Type.INVALID;
}
break;
}
}catch (IOException | JSONException e){
Log.e(TAG, "parse json error");
}
}
可以知道，TIMElem可以以键值对的形式存储一些信息。
头像昵称显示
- 我们在chatActivity添加一个私有方法
/**
* 消息扩展内容，用户的一些基本信息
* @return
*/
private TIMCustomElem createUserInfoElem(){
//构造一个容器
TIMCustomElem elem=new TIMCustomElem();
// json的自定义消息
JSONObject jsonObject=new JSONObject();
try {
//虽然聊天界面可能用不到，但是会话列表总要显示昵称的
jsonObject.put("name","渣渣辉");
//这里用的是百度的一张图片，日后不知道会不会失效
jsonObject.put("avatar","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1522398341&di=60cdf3deabd3fc8bec2417fe8d95ea8f&imgtype=jpg&er=1&src=http%3A%2F%2Fimg1.ali213.net%2Fwebgamepic%2Fuploadfile%2Fnews%2F2017%2F07%2F06%2Fali20170706105114_77443_600.jpg");
elem.setData(jsonObject.toString().getBytes());
} catch (JSONException e) {
Log.d("tencentim","createUserInfoElem fail"+e.toString());
}
return elem;
}
然后找到发送普通文本消息的地方调用
/**
* 发送文本消息
*/
@Override
public void sendText() {
Message message = new TextMessage(input.getText());
//加入我们自己的扩展内容
message.getMessage().addElement(createUserInfoElem());
presenter.sendMessage(message.getMessage());
input.setText("");
}
- 已经把头像昵称信息发出去了，接着就是显示了，案例(二)里面分析了具体显示的方法是在具体的Message类中，而我们发出去的是TextMessage，所以我们进入TexTMessage做修改。
但是，由于腾讯Demo里面是把头像显示写死了，chatAdapter里面没有头像的控件，所以我们要自己添加一下
//省略一些代码
····
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
viewHolder = new ViewHolder();
//寻找头像控件，因为ide版本问题可以省去了强转
viewHolder.leftAvatar=view.findViewById(R.id.leftAvatar);
viewHolder.rightAvatar=view.findViewById(R.id.rightAvatar);
//省略一些代码
····
view.setTag(viewHolder);
public class ViewHolder{
//省略一些代码
···
//添加头像控件
public CircleImageView leftAvatar;
public CircleImageView rightAvatar;
}
OK，头像控件有了，显示只要设置就能显示了，我们进入TextMessage里的showMessage做处理
/**
* 在聊天界面显示消息
*
* @param viewHolder 界面样式
* @param context 显示消息的上下文
*/
@Override
public void showMessage(ChatAdapter.ViewHolder viewHolder, Context context) {
clearView(viewHolder);
if (checkRevoke(viewHolder)) return;
boolean hasText = false;
TextView tv = new TextView(MyApplication.getContext());
tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 18);
tv.setTextColor(MyApplication.getContext().getResources().getColor(isSelf() ? R.color.white : R.color.black));
tv.setPadding(10,0,10,0);
List<TIMElem> elems = new ArrayList<>();
for (int i = 0; i < message.getElementCount(); ++i){
elems.add(message.getElement(i));
if (message.getElement(i).getType() == TIMElemType.Text){
hasText = true;
}
}
SpannableStringBuilder stringBuilder = getString(elems, context);
if (!hasText){
stringBuilder.insert(0," ");
}
tv.setText(stringBuilder);
getBubbleView(viewHolder).addView(tv);
//前面部分可以不用管，腾讯demo里面获取文本信息的,下面是显示头像
//做一些判断，确保是我们发送的自定义扩展内容
if (message.getElementCount() > 1 && message.getElement(1) instanceof TIMCustomElem) {
try {
String otherAvatar;
JSONObject jsonObject = new JSONObject(new String(((TIMCustomElem) message.getElement(1)).getData(), "UTF-8"));
otherAvatar = jsonObject.getString("avatar");
Log.d("tencentim",otherAvatar);
if(message.isSelf()){
//这里我随便选了张本地的图片做显示，自行替换
Glide.with(context).load(R.drawable.head_me).dontAnimate().into(viewHolder.rightAvatar);
}else {
Glide.with(context).load(otherAvatar).dontAnimate().into(viewHolder.leftAvatar);
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (JSONException e) {
e.printStackTrace();
}
}
showStatus(viewHolder);
}
现阶段效果如下，收消息一下看到头像了
c.PNG
ps:对于自定义的imageview控件，加载图片的时候使用一下dontAnimate(),不然…你试试把
其他图片，视频消息也是同样的处理方式，至于觉得每个都要写一遍麻烦的，可自行想办法处理一下，这里留给大家扩展。
- 聊天界面有了，那么会话界面是怎样的呢，其实解析方法是同样的，但是总不能在头像解析一遍，昵称又解析一遍吧，所以我们自己定义一个方法来获取一个实体
3.1 首先新建一个用户实体
public class UserDto {
//请使用扩展字段里面用到的字符串，因为后面做Gson解析要用到
private String name;
private String avatar;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getAvatar() {
return avatar;
}
public void setAvatar(String avatar) {
this.avatar = avatar;
}
}
3.2 在Conversation添加一个抽象方法
/**
* 获取自定义的用户实体
* @return
*/
public abstract UserDto getUserDto();
3.3 在NomarConversation里面实现这个方法
@Override
public UserDto getUserDto() {
UserDto userDto = null;
if(lastMessage!=null&&lastMessage.getMessage()!=null&&lastMessage.getMessage().getElementCount()>1){
if(lastMessage.getMessage().getElement(1) instanceof TIMCustomElem){
TIMCustomElem elem = (TIMCustomElem) lastMessage.getMessage().getElement(1);
Gson gson = new Gson();
try {
userDto = gson.fromJson(new String(elem.getData(),"UTF-8"), UserDto.class);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
}
}
return userDto;
}
3.4 现在信息获取到了，那么就要用来显示了，在ConversationAdapter里面修改
（不清楚逻辑的可以回去阅读一下案列（二））
final Conversation data = getItem(position);
UserDto userDto=data.getUserDto();
if(userDto!=null){
viewHolder.tvName.setText(userDto.getNickName());
//这里说明一下
//1.一般会话列表我们是只显示对方的头像和昵称，所以这里你可以自定扩展一个id来识别,demo这里不展示了
//2.还有个问题，如果做了1的步骤，当我们发送消息给对方，而对方没有回复我们的时候是没有头像显示的，这时候就应该在点入聊天的时候
//保存一个用户id,然后查询数据库，如果数据库没有的话就通过网络获取
//3.当然，上面也只是建议，你有自己的实现思路也是可以的
Glide.with(getContext()).load(userDto.getAvatar()).dontAnimate().into(viewHolder.avatar);
}else {
viewHolder.tvName.setText(data.getName());
viewHolder.avatar.setImageResource(data.getAvatar());
}
效果如下
d.PNG
总结
本篇主要借助案例（二）中的逻辑在代码上做修改，就是增加了发送扩展字段和解析扩展字段的内容。
而我在这里只是做了最简单的内容扩展，具体更多的内容可以自行增加字段和对会话控件做修改，发挥你的小宇宙吧
（ps:本来就打算把聊天界面自定义消息界面也写了的，但感觉太长了，还是留到下篇吧,自定义消息有比较多需要注意的地方）
下篇
项目地址
你们最关注的来了
https://github.com/DongDian455/TIMDemo
下篇
待定
（ps:若有不理解或者有错误的地方欢迎留言评论）
