合集
騰訊云IM接入案列（一）
騰訊云IM接入案列（二）
騰訊云IM接入案列（三）
騰訊云IM接入案列（四）
本篇內(nèi)容
這次我們會具體實現(xiàn)類似案例（一）的效果，實現(xiàn)過程最好先閱讀一下案例（二）這樣理解起來會比較容易儡首，也方便日后自行擴展吧
基礎(chǔ)準(zhǔn)備
由于現(xiàn)實出來的界面，我都是通過擴展的消息內(nèi)容來顯示的蔬胯，那么，我們是怎么通過在發(fā)送消息的時候添加自定義的字段信息呢
我們可以先來查看一下官方文檔
b.PNG
從文檔上可以了解到氛濒，我們發(fā)送的TIMMessage可以添加多個TIMElem，比如圖片舞竿，文本，視頻等Elem骗奖，所以在發(fā)送的時候，我們可以自定義一個TIMElem作為擴展內(nèi)容执桌。
然后我們看一下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添加一個私有方法
/**
* 消息擴展內(nèi)容，用戶的一些基本信息
* @return
*/
private TIMCustomElem createUserInfoElem(){
//構(gòu)造一個容器
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;
}
然后找到發(fā)送普通文本消息的地方調(diào)用
/**
* 發(fā)送文本消息
*/
@Override
public void sendText() {
Message message = new TextMessage(input.getText());
//加入我們自己的擴展內(nèi)容
message.getMessage().addElement(createUserInfoElem());
presenter.sendMessage(message.getMessage());
input.setText("");
}
- 已經(jīng)把頭像昵稱信息發(fā)出去了漱竖，接著就是顯示了畜伐，案例(二)里面分析了具體顯示的方法是在具體的Message類中馍惹，而我們發(fā)出去的是TextMessage，所以我們進入TexTMessage做修改万矾。
但是，由于騰訊Demo里面是把頭像顯示寫死了良狈，chatAdapter里面沒有頭像的控件，所以我們要自己添加一下
//省略一些代碼
····
view = LayoutInflater.from(getContext()).inflate(resourceId, null);
viewHolder = new ViewHolder();
//尋找頭像控件薪丁，因為ide版本問題可以省去了強轉(zhuǎn)
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，頭像控件有了严嗜，顯示只要設(shè)置就能顯示了，我們進入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里面獲取文本信息的,下面是顯示頭像
//做一些判斷，確保是我們發(fā)送的自定義擴展內(nèi)容
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);
}
現(xiàn)階段效果如下，收消息一下看到頭像了
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里面實現(xiàn)這個方法
@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 現(xiàn)在信息獲取到了震蒋，那么就要用來顯示了躲庄，在ConversationAdapter里面修改
（不清楚邏輯的可以回去閱讀一下案列（二））
final Conversation data = getItem(position);
UserDto userDto=data.getUserDto();
if(userDto!=null){
viewHolder.tvName.setText(userDto.getNickName());
//這里說明一下
//1.一般會話列表我們是只顯示對方的頭像和昵稱查剖，所以這里你可以自定擴展一個id來識別,demo這里不展示了
//2.還有個問題噪窘，如果做了1的步驟，當(dāng)我們發(fā)送消息給對方效览，而對方?jīng)]有回復(fù)我們的時候是沒有頭像顯示的，這時候就應(yīng)該在點入聊天的時候
//保存一個用戶id,然后查詢數(shù)據(jù)庫丐枉，如果數(shù)據(jù)庫沒有的話就通過網(wǎng)絡(luò)獲取
//3.當(dāng)然，上面也只是建議瘦锹，你有自己的實現(xiàn)思路也是可以的
Glide.with(getContext()).load(userDto.getAvatar()).dontAnimate().into(viewHolder.avatar);
}else {
viewHolder.tvName.setText(data.getName());
viewHolder.avatar.setImageResource(data.getAvatar());
}
效果如下
d.PNG
總結(jié)
本篇主要借助案例（二）中的邏輯在代碼上做修改，就是增加了發(fā)送擴展字段和解析擴展字段的內(nèi)容弯院。
而我在這里只是做了最簡單的內(nèi)容擴展，具體更多的內(nèi)容可以自行增加字段和對會話控件做修改听绳，發(fā)揮你的小宇宙吧
（ps:本來就打算把聊天界面自定義消息界面也寫了的，但感覺太長了椅挣，還是留到下篇吧,自定義消息有比較多需要注意的地方）
下篇
項目地址
你們最關(guān)注的來了
https://github.com/DongDian455/TIMDemo
下篇
待定
（ps:若有不理解或者有錯誤的地方歡迎留言評論）
