Android自定义UI相关问题

针对Android IM SDK 的 UI 自定义的常见问题汇总
发布时间: 2019-08-02 14:56

回答:

1.如何替换聊天的气泡 ?

替换资源图片中的 rc_ic_bubble_left_file.9.png 、rc_ic_bubble_right_file.9.png


2.自定义消息如何不显示头像,且居中?

自定义消息的展示模版MessageItemProvider设置如下ProviderTag即可:

@ProviderTag(messageContent = XXXMessage.class, showPortrait = false, centerInHorizontal = true, showProgress = false, showSummaryWithName = false

showPortrait = false 表示不显示头像

centerInHorizontal = true 表示居中显示

showProgress = false 表示不显示发送进度

showSummaryWithName = false 表示 会话页面不在消息上面显示昵称


3.如何修改会话列表、会话页面的用户头像为圆形?

sdk4.X会话列表 :在 rc_item_conversation.xml 里给 rc_left 控件,设置 app:RCShape="circle" 属性,如下:

<io.rong.imkit.widget.AsyncImageView
    android:id="@+id/rc_left"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:layout_gravity="center"
    android:background="@android:color/transparent"
    app:RCCornerRadius="3dp"
    app:RCDefDrawable="@drawable/rc_default_portrait"
    app:RCShape="circle" />

会话页面:在 rc_item_message.xml 里给 rc_left 和 rc_right 控件设置 app:RCShape="circle" 属性

sdk5.X可以在初始化之后调用下面方法

//设置头像圆角
RongConfigCenter.featureConfig().setKitImageEngine(new GlideKitImageEngine() {
    @Override
    public void loadConversationListPortrait(@NonNull Context context, @NonNull  String url, @NonNull ImageView imageView, Conversation conversation) {
        super.loadConversationListPortrait(context, url, imageView, conversation);
        Glide.with(imageView).load(url)
                .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                .into(imageView);
    }

    @Override
    public void loadConversationPortrait(@NonNull  Context context, @NonNull  String url, @NonNull ImageView imageView, Message message) {
        super.loadConversationPortrait(context, url, imageView, message);
        Glide.with(imageView).load(url)
                .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                .into(imageView);
    }
});


4.如何自定义会话列表的 adapter ?

sdk4.X可参考https://docs.rongcloud.cn/v4/views/im/ui/guide/list/custom/android.html#customadapter

    1.自定义会话列表 adapter 继承自 ConversaitonListAdapter ,根据您的需求复写其中的 newView() 或者 bindView() 方法。

    2.自定义会话列表 fragment 继承自 ConversationListFragment,复写 onResolveAdapter() 方法,返回自定义的 adapter。另外您的 activity 布局文件中也需要配置成自定义的 fragment。

sdk5.X可参考

https://docs.rongcloud.cn/v4/5X/views/im/ui/guide/list/custom/android.html#selfDefineProvider

    1. 创建 CustomConversationProvider 继承 BaseConversationProvider

    2. 复写 isItemViewType() 和其它需要自定义的方法。

    3. 注册自定义模板


5.如何自定义会话页面的 adapter ?

sdk4.X参考

https://docs.rongcloud.cn/v4/views/im/ui/guide/private/conversation/custom/android.html#messagelistadapter

    1.自定义会话页面 adapter 继承自 MessageListAdapter ,根据您的需求复写其中的 newView() 或者 bindView() 方法。

    2.自定义会话页面 fragment 继承自 ConversationFragment,复写 onResolveAdapter() 方法,返回自定义的 adapter。另外您的 activity 布局文件中也需要配置成自定义的 fragment。

sdk5.X消息展示自定义参考https://docs.rongcloud.cn/v4/5X/views/im/ui/guide/private/conversation/custom/android.html#messagelistprovider

    1. 创建 CustomMessageProvider 继承 BaseMessageItemProvider<CustomMessage>

    2. 实现 isMessageViewType() 和其它需要自定义的方法。

    3. 注册自定义模板

        RongConfigCenter.conversationConfig().addMessageProvider(new CustomMessageProvider());

    4. 配置模板属性


6.如何给会话列表设置头布局?

sdk4.X参考 https://docs.rongcloud.cn/v4/views/im/ui/guide/list/custom/android.html#addheardview

自定义 fragment 继承自 ConversationListFragment ,重写 onAddHeaderView 方法,返回要添加的头布局 view.

/**
 * 会话列表添加头部
 *
 * @return 头部view
 */
protected List<View> onAddHeaderView()

sdk5.1.0+参考

https://docs.rongcloud.cn/v4/5X/views/im/ui/guide/list/custom/android.html#addHeaderFooter

    1.可在会话列表添加自定义布局(头部,尾部,数据空) 1.在 activity 找到 ConversationListFragment 2.调用 ConversationListFragment 的 addHeaderView(),addFooterView(),setEmptyView() 方法,设置布局

    

7.会话列表如何过滤(不显示)某个会话?

sdk4.X

自定义 fragment 继承自 ConversationListFragment ,重写 shouldFilterConversation 方法。可根据 conversaitonType 和 targetId 来判断是否要过滤该会话,需要过滤 return true ,不需要过滤 return false 。

/**
 * 会话列表界面是否过滤某一会话,过滤之后,用户往该会话发送消息,也不会在会话列表展示
 *
 * @param type     会话类型
 * @param targetId 会话的目标Id。根据不同的 conversationType,可能是用户 Id、讨论组 Id、群组 Id 或聊天室 Id。
 * @return
 */
public boolean shouldFilterConversation(ConversationType type, String targetId)

sdk5.X参考文档

https://docs.rongcloud.cn/v4/5X/views/im/ui/guide/list/event/android.html


8.如何填充自定义数据到会话列表页面?

自定义 fragment 继承自 ConversationListFragment ,重写 getConversaitonList 方法,通过 callback 返回要显示的数据,具体说明如下:

/**
 * 开发者可以重写此方法,来填充自定义数据到会话列表界面。
 * 如果需要同时显示 sdk 中默认会话列表数据,在重写时可使用 super.getConversationList()。反之,不需要调用 super 方法。
 * <p>
 * 注意:通过 callback 返回的数据要保证在 UI 线程返回。
 *
 * @param conversationTypes 当前会话列表已配置显示的会话类型。
 */
public void getConversationList(ConversationType[] conversationTypes, final IHistoryDataResultCallback<List<Conversation>> callback)

此方法仅限4.X使用。


9.如何获取到会话列表的数据?

当直接修改布局文件和自定义 adapter 都无法满足您的需求,您可以通过 RongIM 提供的接口来获取会话列表的数据,然后完全自己来实现 UI ,这样可自定义的层度更高。接口说明如下.

回调的方式获取会话列表的所有数据:

/**
 * 获取会话列表。
 *
 * @param callback 会话列表数据回调。
 *                 Conversation。
 */
public void getConversationList(RongIMClient.ResultCallback<List<Conversation>> callback)

回调的方式获取会话列表某几个类型的数据:

/**
 * 根据会话类型,回调方式获取会话列表。
 *
 * @param callback 获取会话列表的回调。
 * @param types    会话类型。
 */
public void getConversationList(RongIMClient.ResultCallback<List<Conversation>> callback, Conversation.ConversationType... types) {


10.如何去掉会话页面的“文件 plugin ”?

文件 plugin 和 图片 plugin 是 SDK里默认自带的 plugin , 如果不需要,可以通过如下方式去掉:

自定义一个 ExtensionModule 继承自 DefaultExtensionModule,复写其中的 getPluginModules() 方法,remove掉类型为 FilePlugin 或 ImagePlugin 的插件,如下:

public class MyExtensionModule extends DefaultExtensionModule {
    @Override
    public List<IPluginModule> getPluginModules(Conversation.ConversationType conversationType) {
        List<IPluginModule> pluginModules = super.getPluginModules(conversationType);
        Iterator<IPluginModule> it = pluginModules.iterator();
        while (it.hasNext()) {
            IPluginModule pluginModule = it.next();
            if (pluginModule instanceof FilePlugin) {
                it.remove();
            }
        }
        return pluginModules;
    }
}

具体文档参考:https://docs.rongcloud.cn/v4/5X/views/im/ui/guide/private/conversation/plugin/android.html


11.想修改拓展区域的布局,在哪里修改?

部分布局文件如下,您可以通过修改对应的布局文件来调整界面布局,修改背景,更改字体等。

1、rc_ext_extension_bar.xml 输入框布局文件。它是整个输入框的容器,内部有对各部分组件功能描述。

2、rc_ext_input_edit_text.xml EditText 布局文件。如果想要替换背景,直接修改即可。

3、rc_ext_voice_input.xml 语音输入布局文件。


12.如何增加或删除会话页面中消息的长按菜单中的 item ?

调 RongMessageItemLongClickActionManager 的 addMessageItemLongClickAction 来添加长按菜单,如:

RongMessageItemLongClickActionManager.getInstance().addMessageItemLongClickAction(clickActionReference, 2);

调 removeMessageItemLongClickAction 移除长按菜单:

public void removeMessageItemLongClickAction(MessageItemLongClickAction action)