前言

  • 上文学问Chat UI(2)分析了消息适配器的实现;
  • 本文主要学习下插件功能如何实现的.并以图片插件功能作为例子详细说明,分析从具体代码入手;

概要

  • 分析策略说明
  • “+”功能UI布局如何实现?分析整体思路与所用的哪些控件;
  • 分析DefaultExtensionModule与PluginAdapter两个类
  • 图片插件如何实现?

分析策略

  • 1.从融云提供完整的demo,操作“+”按钮,选择图片发送图片消息;
  • 2.根据1的操作,寻找对应的控件与事件,理清逻辑;
  • 3.从整体把握,看如何实现插件功能;

“+”功能UI布局如何实现

  • 从UI看是两个部分:“+”按钮与扩展面板,点击会触发事件,判断扩展面板状态,未显示则显示扩展面板,显示状态则隐藏扩展面板;
  • 代码上mPluginToggle对象就是那个"+"按钮,它是ImageView的实例,其中点击会触发RongExtension.this.setPluginBoard()方法;
  1. this.mPluginToggle.setOnClickListener(new OnClickListener() {
  2. public void onClick(View v) {
  3. if(RongExtension.this.mExtensionClickListener != null) {
  4. RongExtension.this.mExtensionClickListener.onPluginToggleClick(v, RongExtension.this);
  5. }
  6. RongExtension.this.setPluginBoard();
  7. }
  8. });
  • 前面的是小菜,下面好好品下正菜,说明下后面所有代码中出现的8与0,分别代表Gone(消失)与Visible(可见);
  • mPluginAdapter初始化状态与mPluginAdapter中显示状态作为主要判断条件;
  1. private void setPluginBoard() {
  2. if(this.mPluginAdapter.isInitialized()) {
  3. if(this.mPluginAdapter.getVisibility() == 0) {
  4. //省略部分代码
  5. } else {
  6. //省略部分代码
  7. }
  8. }
  9. }
  • 看到这里,我们会有疑问,mPluginAdapter是用来干什么的?在解答这个疑问之前,先来看下DefaultExtensionModule类。

DefaultExtensionModule干啥的

  • 英文翻译下的意思默认的扩展功能模块,实现了图片,文件,地理位置3个基本插件;
  • DefaultExtensionModule实现了IExtensionModule接口,其中要重点讲下onAttachedToExtension,onDetachedFromExtension,getPluginModules方法;
  • 1.简单点说,onAttachedToExtension与onDetachedFromExtension负责管理其在RongExtension的生命周期,但是这里有个问题会出现内存泄露;*
  1. public void onAttachedToExtension(RongExtension extension) {
  2. this.mEditText = extension.getInputEditText();
  3. Context context = extension.getContext();
  4. RLog.i(TAG, "attach " + this.stack.size());
  5. //mEditText编辑框存放到stack栈对象中
  6. this.stack.push(this.mEditText);
  7. Resources resources = context.getResources();
  8. try {
  9. this.types = resources.getStringArray(resources.getIdentifier("rc_realtime_support_conversation_types", "array", context.getPackageName()));
  10. } catch (NotFoundException var5) {
  11. ;
  12. }
  13. }
  14. //判断栈大小,如果大于0出栈,并返回mEditText
  15. public void onDetachedFromExtension() {
  16. RLog.i(TAG, "detach " + this.stack.size());
  17. if(this.stack.size() > 0) {
  18. this.stack.pop();
  19. this.mEditText = this.stack.size() > 0?(EditText)this.stack.peek():null;
  20. }
  21. }
    1. 2.`getPluginModules方法`主要把功能插件对象--实现IPluginModule接口存放到ArrayList中,提供给外部使用;*
  • 需要说明的是地理位置在单聊的时候与群聊功能略有不同,单聊多了位置共享的功能,那么怎么区别呢?通过ConversationType参数判断;
  • 地理位置功能默认集成的是高德SDK,确定AMapNetworkLocationClient存在后才会把地理位置插件加到ArrayList;
  1. public List<IPluginModule> getPluginModules(ConversationType conversationType) {
  2. ArrayList pluginModuleList = new ArrayList();
  3. ImagePlugin image = new ImagePlugin();
  4. FilePlugin file = new FilePlugin();
  5. pluginModuleList.add(image);
  6. String e;
  7. Class cls;
  8. try {
  9. //判断高德定位服务类是否存在,存在的话根据ConversationType类型把位置共享插件与我的位置插件添加ArrayList中;
  10. e = "com.amap.api.netlocation.AMapNetworkLocationClient";
  11. cls = Class.forName(e);
  12. if(cls != null) {
  13. CombineLocationPlugin constructor = new CombineLocationPlugin();
  14. DefaultLocationPlugin recognizer = new DefaultLocationPlugin();
  15. boolean typesDefined = false;
  16. if(this.types != null && this.types.length > 0) {
  17. String[] arr$ = this.types;
  18. int len$ = arr$.length;
  19. for(int i$ = 0; i$ < len$; ++i$) {
  20. String type = arr$[i$];
  21. if(conversationType.getName().equals(type)) {
  22. typesDefined = true;
  23. break;
  24. }
  25. }
  26. }
  27. if(typesDefined) {
  28. pluginModuleList.add(constructor);
  29. } else if(this.types == null && conversationType.equals(ConversationType.PRIVATE)) {
  30. pluginModuleList.add(constructor);
  31. } else {
  32. pluginModuleList.add(recognizer);
  33. }
  34. }
  35. } catch (Exception var15) {
  36. RLog.i(TAG, "Not include AMap");
  37. var15.printStackTrace();
  38. }
  39. if(conversationType.equals(ConversationType.GROUP) || conversationType.equals(ConversationType.DISCUSSION) || conversationType.equals(ConversationType.PRIVATE)) {
  40. pluginModuleList.addAll(InternalModuleManager.getInstance().getExternalPlugins(conversationType));
  41. }
  42. pluginModuleList.add(file);
  43. //判断科大讯飞sdk是否存在,存在的话通过反射实例化语音识别插件并加入到ArraryList中
  44. try {
  45. e = "com.iflytek.cloud.SpeechUtility";
  46. cls = Class.forName(e);
  47. if(cls != null) {
  48. cls = Class.forName("io.rong.recognizer.RecognizePlugin");
  49. Constructor var16 = cls.getConstructor(new Class[0]);
  50. IPluginModule var17 = (IPluginModule)var16.newInstance(new Object[0]);
  51. pluginModuleList.add(var17);
  52. }
  53. } catch (Exception var14) {
  54. RLog.i(TAG, "Not include Recognizer");
  55. var14.printStackTrace();
  56. }
  57. return pluginModuleList;
  58. }

关于PluginAdapter

  • 继续上面提到的关于PluginAdapter的疑问,首先看下PluginAdapter这个类,代码如下:
  • 这里暂时不去关注网格效果实现方式,关注mInitialized布尔类型值与addPlugins方法
  • mInitialized值在bindView被写入为true,说明被初始化了,而addPlugins方法把DefaultExtensionModule的插件集合加到mPluginModules中,并在initView使用到;
  1. public class PluginAdapter {
  2. private static final String TAG = "PluginAdapter";
  3. private List<IPluginModule> mPluginModules = new ArrayList();
  4. private boolean mInitialized;
  5. public PluginAdapter() {
  6. }
  7. public boolean isInitialized() {
  8. return this.mInitialized;
  9. }
  10. //省略部分方法
  11. public void addPlugins(List<IPluginModule> plugins) {
  12. for(int i = 0; plugins != null && i < plugins.size(); ++i) {
  13. this.mPluginModules.add(plugins.get(i));
  14. }
  15. }
  16. //省略部分方法
  17. public void bindView(ViewGroup viewGroup) {
  18. this.mInitialized = true;
  19. this.initView(viewGroup.getContext(), viewGroup);
  20. }
  21. private void initView(Context context, ViewGroup viewGroup) {
  22. //省略部分方法
  23. }
  24. public int getVisibility() {
  25. return this.mPluginPager != null?this.mPluginPager.getVisibility():8;
  26. }
  27. //省略部分代码
  28. }
  • 下面从RongExtension看PluginAdapter如何被使用?

    1.PluginAdapter在RongExtension的构造函数中被实例化,然后initPlugins方法把插件加到PluginAdapter对象中;

    2.接下来,重点分析是上面提到的setPluginBoard方法;长话多说,如果mPluginAdapter(插件适配器)未初始化,先进行初始化;

    否则,根据扩展面板是否显示,显示则隐藏键盘与扩展面板,隐藏的话显示扩展面板并隐藏表面面板与键盘;最后要做的是,把语音输入隐藏,mEditTextLayout布局显示;
  1. private void setPluginBoard() {
  2. if(this.mPluginAdapter.isInitialized()) {
  3. if(this.mPluginAdapter.getVisibility() == 0) {
  4. View pager = this.mPluginAdapter.getPager();
  5. if(pager != null) {
  6. pager.setVisibility(pager.getVisibility() == 8?0:8);
  7. } else {
  8. this.mPluginAdapter.setVisibility(8);
  9. this.mContainerLayout.setSelected(true);
  10. this.showInputKeyBoard();
  11. }
  12. } else {
  13. this.mEmoticonToggle.setImageResource(drawable.rc_emotion_toggle_selector);
  14. if(this.isKeyBoardActive()) {
  15. this.getHandler().postDelayed(new Runnable() {
  16. public void run() {
  17. RongExtension.this.mPluginAdapter.setVisibility(0);
  18. }
  19. }, 200L);
  20. } else {
  21. this.mPluginAdapter.setVisibility(0);
  22. }
  23. this.hideInputKeyBoard();
  24. this.hideEmoticonBoard();
  25. this.mContainerLayout.setSelected(false);
  26. }
  27. } else {
  28. this.mEmoticonToggle.setImageResource(drawable.rc_emotion_toggle_selector);
  29. this.mPluginAdapter.bindView(this);
  30. this.mPluginAdapter.setVisibility(0);
  31. this.mContainerLayout.setSelected(false);
  32. this.hideInputKeyBoard();
  33. this.hideEmoticonBoard();
  34. }
  35. this.hideVoiceInputToggle();
  36. this.mEditTextLayout.setVisibility(0);
  37. }

图片插件如何实现?

  • 前面的内容为后面理解图片插件的实现提供了铺垫,上面的getPluginModules方法提到的ImagePlugin类是讲解的重点;
  • 在看ImagePlugin之前先来看下DefaultExtensionModule中的插件如何与PluginAdapter关联起来的?
DefaultExtensionModule中的插件如何与PluginAdapter关联

1 1.点击“+”的时候插件功能已经可以使用了,那么说明在聊天界面渲染之前插件已经被建立起来,很容易,想到初始化聊天IM服务是最好的时机;

  1. //调用RongIM的public静态init方法,参数呢是实例化的DefaultExtensionModule
  2. RongExtensionManager.getInstance().registerExtensionModule(new DefaultExtensionModule());
  • RongExtensionManager中有一个List对象,简单点说,调用registerExtensionModule就是把对象加入到List中;
  1. public void registerExtensionModule(IExtensionModule extensionModule) {
  2. if(mExtModules == null) {
  3. RLog.e("RongExtensionManager", "Not init in the main process.");
  4. } else if(extensionModule != null && !mExtModules.contains(extensionModule)) {
  5. RLog.i("RongExtensionManager", "registerExtensionModule " + extensionModule.getClass().getSimpleName());
  6. if(mExtModules.size() <= 0 || !((IExtensionModule)mExtModules.get(0)).getClass().getCanonicalName().equals("com.jrmf360.rylib.modules.JrmfExtensionModule") && !((IExtensionModule)mExtModules.get(0)).getClass().getCanonicalName().equals("com.melink.bqmmplugin.rc.BQMMExtensionModule")) {
  7. mExtModules.add(extensionModule);
  8. } else {
  9. mExtModules.add(0, extensionModule);
  10. }
  11. extensionModule.onInit(mAppKey);
  12. } else {
  13. RLog.e("RongExtensionManager", "Illegal extensionModule.");
  14. }
  15. }

2 2.再看RongExtension的initData方法,把RongExtensionManager中的List对象赋值给mExtensionModuleList,并实例化了PluginAdapter--插件适配器类

  1. private void initData() {
  2. this.mExtensionModuleList = RongExtensionManager.getInstance().getExtensionModules();
  3. this.mPluginAdapter = new PluginAdapter();//省略若干代码
  4. }

3 3.再看RongExtension的setConversation方法调用this.initPlugins(),当当当的,调用了实例化插件对象的addPlugins把插件加入到其中,从而形成关联;

  1. private void initPlugins() {
  2. Iterator i$ = this.mExtensionModuleList.iterator();
  3. while(i$.hasNext()) {
  4. IExtensionModule module = (IExtensionModule)i$.next();
  5. List pluginModules = module.getPluginModules(this.mConversationType);
  6. if(pluginModules != null && this.mPluginAdapter != null) {
  7. this.mPluginAdapter.addPlugins(pluginModules);
  8. }
  9. }
  10. }
ImagePlugin
  • ImagePlugin实现了IPluginModule接口,总共四个方法,代码如下:
  1. public interface IPluginModule {
  2. Drawable obtainDrawable(Context var1);
  3. String obtainTitle(Context var1);
  4. void onClick(Fragment var1, EditExtension var2);
  5. void onActivityResult(int var1, int var2, Intent var3);
  6. }
  • 看到这里你可能对四个方法是干什么产生疑问?别着急,欲知此事,请往下阅读;
  • 贴上ImagePlugin的具体代码,这里看具体实现的代码,请看代码中注释;
  1. public class ImagePlugin implements IPluginModule {
  2. ConversationType conversationType;
  3. String targetId;
  4. public ImagePlugin() {
  5. }
  6. //item的背景图片
  7. public Drawable obtainDrawable(Context context) {
  8. return ContextCompat.getDrawable(context, R.drawable.rc_ext_plugin_image_selector);
  9. }
  10. //item的插件标题
  11. public String obtainTitle(Context context) {
  12. return context.getString(R.string.rc_plugin_image);
  13. }
  14. //item点击事件
  15. public void onClick(Fragment currentFragment, EditExtension extension) {
  16. String[] permissions = new String[]{"android.permission.READ_EXTERNAL_STORAGE"};
  17. //这里考虑android6.0权限变更,不仅需要声明权限,而且敏感权限需要允许时申请
  18. if(PermissionCheckUtil.requestPermissions(currentFragment, permissions)) {
  19. this.conversationType = extension.getConversationType();
  20. this.targetId = extension.getTargetId();
  21. Intent intent = new Intent(currentFragment.getActivity(), PictureSelectorActivity.class);
  22. //回调Fragment 中的onActivityResult
  23. extension.startActivityForPluginResult(intent, 23, this);
  24. }
  25. }
  26. public void onActivityResult(int requestCode, int resultCode, Intent data) {
  27. }
  28. }
  • 下面看下ConversationFragment选完图片以后回调如何进行?
  • 首先对requestCode做了判断,如果不是102则回调了mRongExtension对象的onActivityPluginResult方法,然后根据请求代码分析是哪个插件回调回来的,在调用IExtensionClickListener接口对应的方法;
  1. public void onActivityResult(int requestCode, int resultCode, Intent data) {
  2. super.onActivityResult(requestCode, resultCode, data);
  3. if(requestCode == 102) {
  4. this.getActivity().finish();
  5. } else {
  6. this.mRongExtension.onActivityPluginResult(requestCode, resultCode, data);
  7. }
  8. }
  • 这里有几个问题?onActivityResult可不可以直接处理?requestCode 的如何作用?

    1 第一个问题,可以进行直接数据处理,但是需要约定好requestCode,如果通过融云回调的话不需要约定;

    2 第二个问题,单独一个int类型的值容纳得信息有限,做过处理的就与众不同了,融云的方法是把后8位作为requestCode,前24位作为postion,为何要+1不是很懂,有知道请再评论中指出;
  1. this.mFragment.startActivityForResult(intent, (position + 1 << 8) + (requestCode & 255));
    1. 上述代码完成以后可以通过回调ConversationFragment实现的`this.mExtensionClickListener.onImageResult(list, lat1);`方法发送图片消息了,代码就不贴了;

总结

  • 插件实现通过接口方式,耦合度降低,扩展性好;
  • 添加插件时,无需大改RongExtension代码只要实现IPluginModule接口并注册到实现IExtensionModule的插件模块中,并在初始化RongIM时注册插件模块;
  • 考虑功能的时候需要考虑到兼容性,扩展性;

学问Chat UI(3)的更多相关文章

  1. 学问Chat UI(1)

    前言 由于项目需要,最近开始借鉴学习下开源的Android即时通信聊天UI框架,为此结合市面上加上本项目需求列了ChatUI要实现的基本功能与扩展功能. 融云聊天UI-Android SDK 2.8. ...

  2. 学问Chat UI(2)

    前言 上文讲了下要去做哪些事,重点分析了融云Sdk中RongExtension这个扩展控件,本文来学习下同样是融云Sdk中的AutoRefreshListView如何适配多种消息的实现方式,写的有不足 ...

  3. 学问Chat UI(4)

    前言 写这个组件是在几个月前,那时候是因为老大讲RN项目APP的通讯聊天部分后面有可能自己实现,让我那时候尝试着搞下Android通讯聊天UI实现的部分,在这期间,找了不少的Android原生项目:蘑 ...

  4. 77.Android之代码混淆

    转载:http://www.jianshu.com/p/7436a1a32891 简介 作为Android开发者,如果你不想开源你的应用,那么在应用发布前,就需要对代码进行混淆处理,从而让我们代码即使 ...

  5. 【SignalR学习系列】5. SignalR WPF程序

    首先创建 WPF Server 端,新建一个 WPF 项目 安装 Nuget 包 替换 MainWindows 的Xaml代码 <Window x:Class="WPFServer.M ...

  6. 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)

    做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动.   BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...

  7. Android: apk反编译 及 AS代码混淆防反编译

    一.工具下载: 1.apktool(资源文件获取,如提取出图片文件和布局文件) 反编译apk:apktool d file.apk –o path 回编译apk:apktool b path –o f ...

  8. 带你彻底明白 Android Studio 打包混淆

    前言 在使用Android Studio混淆打包时,该IDE自身集成了Java语言的ProGuard作为压缩,优化和混淆工具,配合Gradle构建工具使用很简单.只需要在工程应用目录的gradle文件 ...

  9. “四核”驱动的“三维”导航 -- 淘宝新UI(需求分析篇)

    前言 孔子说:"软件是对客观世界的抽象". 首先声明,这里的"三维导航"和地图没一毛钱关系,"四核驱动"和硬件也没关系,而是为了复杂的应用而 ...

随机推荐

  1. C++第四篇--重载_指针_引用

    C++第四篇--重载_指针_引用 1. 基础知识 重载:函数名相同,根据参数不同(类型.数量.顺序不同)调用同名函数 指针和引用:引用就是别名,引用时必须初始化,引用你定义的变量. int a; in ...

  2. servlet之注册登录(简写)

    1.注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...

  3. hadoop入门,跑出第一个WordCount

    1.环境准备 下载:http://mirror.bit.edu.cn/apache/hadoop/common/hadoop-2.7.2/hadoop-2.7.2.tar.gz 解压:解压后,修改et ...

  4. 走进STM32世界之Hex程序烧写

    多数51单片机(STC系列单片机)的初学者都知道,在51单片机初上电时,可以通过PC机上位机软件将程序引导至bootloader,从而将新程序的hex文件下载至单片机中,完成程序的升级或是更新.在32 ...

  5. 49. leetcode 94. Binary Tree Inorder Traversal

    94. Binary Tree Inorder Traversal    二叉树的中序遍历 递归方法: 非递归:要借助栈,可以利用C++的stack

  6. mysql控制台出现“unknown column 'password' in 'field list'问题

    今天在windows系统上使用MySQL命令时,出现下面的"unknown column 'password' in 'field list'问题 解决办法如下,使用authenticati ...

  7. git bash命令行使用https协议方式进行克隆和提交到github服务器

    在本地创建一个文件夹来存放远程服务器仓库:如创建一个git8文件夹: 在命令行中,使用git clone https://github.com/serverking/weixin.git进行克隆git ...

  8. VM虚拟机的配置

    1.软件安装 点击如图所示文件安装虚拟机 点击下一步,再安装过程中输入密钥 1F04Z-6D111-7Z029-AV0Q4-3AEH8 设置相关内容完成安装 2.加载虚拟机 点击软件图标打开软件 软件 ...

  9. HTML 基本标签02

    02-html基本标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  10. nio系列(一)---nio重要组成

    nio重要组成部分 前言:通过本文可以了解nio的重要组成部分,了解完基础的内容后后面理解才会简单一点.下一篇会讲讲nio的应用和io的对比.如果有不正确的地方还望指正. channel chanel ...