融云即时通信SDK集成 -- 定制UI(一) ——会话界面小改动

融云即时通信SDK集成 -- 定制UI(一) ——会话界面小改动

背景:

最近公司新上的app要加上即时通信的功能, 本身快速实现一个固然是不可能的了(项目deadline也顶不住哇).就从各家成熟的SDK厂商选来选去的, 各有各的好也各有各的不足.最后点兵点将,选了融云家的SDK(老板说了算hhhh).
他家的官网和文档地址:
官网:https://www.rongcloud.cn/
文档:https://docs.rongcloud.cn/v4
这个任务固然仍是落在个人头上. 我是使用的他们家的带UI的sdk,(他们家有带UI和不带UI的两种sdk, 不带UI的sdk就是只有即时通信能力, 全部的UI都须要开发者自定实现, 带UI的sdk封装了一些基本的界面,例如会话列表, 和别人聊天的会话界面.)固然这些已经集成了UI的sdk并不能彻底知足一个产品的需求, 因此这篇文章主要跟你们讲下如何对他们家的UI进行简单的自定义.html

融云SDK接入会话列表/会话界面

你们集成的话能够直接按照他们家的快速集成的步骤走, 包含了集成会话列表以及会话界面. 这里是连接: 快速集成SDK (https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/android.html)java

接入以后, 能够按照合适的逻辑跳转入这两个基本的界面, 如图所示:
会话列表:
img
会话界面
imgandroid

能够看到咱们的app中如今拥有了默认会话列表和会话界面UI, 可使用基本的功能了. 可是这些基本的UI虽然说不上难看, 可是也够不上精美. 因此UI这块仍是须要咱们自行来作一些定制的.app

为了给你们演示, 我这里改的比较夸张了一点, 十分丑陋, 但直观哈哈哈.ide

img

如图我直接更改了两边发送者&接收者的字体颜色,字体大小,字体样式. 也更改了双方的聊天气泡. 字体

修改普通文字消息类型的消息, 直接继承了TextMessageItemProvider. 把父类里边全部的代码都复制进来, 而后在bindView()的时候作修改ui

能够看到我把样式随便改了一下. 两个方向的气泡都改为了箭头左向的.this

@Override
    public void bindView(final View v, int position, TextMessage content, final UIMessage data) {
        ViewHolder holder = (ViewHolder) v.getTag();
        holder.receiverFire.setTag(data.getUId());
        if (data.getMessageDirection() == Message.MessageDirection.SEND) {
            holder.message.setBackgroundResource(R.drawable.rc_ic_bubble_right);
        } else {
            holder.message.setBackgroundResource(R.drawable.rc_ic_bubble_left);
        }
        if (content.isDestruct()) {
            bindFireView(v, position, content, data);
        } else {
            holder.sendFire.setVisibility(View.GONE);
            holder.receiverFire.setVisibility(View.GONE);
            holder.unRead.setVisibility(View.GONE);
            holder.message.setVisibility(View.VISIBLE);
            final AutoLinkTextView textView = holder.message;
            processTextView(v, position, content, data, textView);
        }
    }

作完改动, 还须要给这个类添加这样的注解才能绑定TextMessage的渲染:spa

@ProviderTag(
        messageContent = TextMessage.class,
        showReadState = true
)
    public class MyTextMessageItemProvider extends TextMessageItemProvider

而后记得在init 咱们SDK以后, 注册一下这个Provider.3d

RongIM.init(this, APP_KEY);
    RongIM.registerMessageTemplate(new MyTextMessageItemProvider());

这样全部收到的类型为TextMessage的消息, 都会按照我这里定义的TextMessageItemProvider来作展现了. 其余类型的消息也是同样的, 语音, 文件, 位置消息. 只要想改UI, 本质上都是集成相应的MessageItemProvider, 而后重写bindView()方法.

相关文章
相关标签/搜索