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

关注

发布于: 2021 年 03 月 15 日

背景:

最近公司新上的 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 进行简单的自定义.

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

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

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

会话界面

可以看到我们的 app 中现在拥有了默认会话列表和会话界面 UI, 可以使用基本的功能了. 但是这些基本的 UI 虽说不上难看, 但是也够不上精美. 所以 UI 这块还是需要我们自行来做一些定制的.

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

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

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

可以看到我把样式随便改了一下. 两个方向的气泡都改成了箭头左向的.

    @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 的渲染:

@ProviderTag(

复制代码

        messageContent = TextMessage.class,

复制代码

        showReadState = true

复制代码

    public class MyTextMessageItemProvider extends TextMessageItemProvider

复制代码

然后记得在 init 我们 SDK 之后, 注册一下这个 Provider.

    RongIM.init(this, APP_KEY);

复制代码

    RongIM.registerMessageTemplate(new MyTextMessageItemProvider());

复制代码

这样所有收到的类型为 TextMessage 的消息, 都会按照我这里定义的 TextMessageItemProvider 来做展示了. 其他类型的消息也是一样的, 语音, 文件, 位置消息. 只要想改 UI, 本质上都是集成相应的 MessageItemProvider, 然后重写bindView()方法.

发布于: 2021 年 03 月 15 日阅读数: 8

融云 RongCloud

关注

还未添加个人签名 2021.01.26 加入

还未添加个人简介

发布

暂无评论

创作场景

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

背景:

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

融云 RongCloud

评论