融云 IM 集成，UI 修改等问题

第一次集成融云 IM，感觉官方的文档很杂乱，也有些没说明白，边看文档边看代码慢慢摸索，记录下自己集成过程中的一些问题，方便以后查阅，也方便遇到同样问题的朋友可以看看。集成步骤就不说了，看官方文档就行了，这里主要讲一些 UI 修改的问题。

0、会话列表集成（Fragment）

官方文档中集成教程中的会话列表是个 Activity，但有些场景需要它是 Fragment，且有些需要自定义的功能，所以我自定义了 MyConversationListFragment 继承 ConversationListFragment：

    public class MyConversationListFragment extends ConversationListFragment {}

这样就可以把会话列表界面作为一个 Fragment 使用了：

    private void setConversationView() {
        ConversationListFragment conversationListFragment = new MyConversationListFragment();
        Uri uri = Uri.parse("rong://" + getApplicationInfo().packageName).buildUpon().appendPath("activity_chat_main")
                .appendQueryParameter(Conversation.ConversationType.PRIVATE.getName(), "false") 
                .appendQueryParameter(Conversation.ConversationType.GROUP.getName(), "false")
                .appendQueryParameter(Conversation.ConversationType.SYSTEM.getName(), "true").build();
        conversationListFragment.setUri(uri);
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        Fragment fragment = fragmentManager.findFragmentByTag("1");
        if (fragment == null) {
            // rong_container 是一个 FrameLayout
            transaction.add(R.id.rong_container, conversationListFragment, "1").commit();
        } else if (fragment.isAdded()) {
            transaction.show(fragment).commit();
            hideOther("1");
        } else {
            transaction.add(R.id.rong_container, conversationListFragment, "1").commit();
        }
    }

1、会话列表布局

（1）会话列表布局：rc_fr_conversationlist.xml
（2）头像布局：rc_item_conversation.xml
（3）文字布局：rc_item_base_conversation.xml

2、会话界面

（1）会话界面头像、时间布局：rc_item_message.xml
（2）会话界面文字消息布局：rc_item_text_message.xml，文字颜色不在 xml 里面修改，需要设置 TextMessageItemProvider

    /**
     * 设置聊天窗口的发送与接收的文字颜色
     */
    @ProviderTag(messageContent = TextMessage.class, showReadState = true)
    public class MyTextMessageItemProvider extends TextMessageItemProvider {
        @Override
        public void bindView(View v, int position, TextMessage content, UIMessage data) {
            super.bindView(v, position, content, data);
            TextView textView = (TextView) v;
            // 发送者与接收者的文字颜色不一样
            if (data.getMessageDirection() == Message.MessageDirection.SEND) {
                textView.setTextColor(Color.WHITE);
            } else {
                textView.setTextColor(getResources().getColor(R.color.colorTextBlack333333));
            }
        }
    }

    RongIM.registerMessageTemplate(new MyTextMessageItemProvider());

（3）会话界面语音消息布局：rc_item_voice_message.xml
（4）要修改 item 的背景，不是在代码中设置颜色，而是要替换以下几张图，注意是 9.png

（5）要修改发送时语音的图标、颜色，同样只需替换以下几张图片，

3、发送图片时的相册

（1）相册列表布局：rc_picsel_activity.xml
（2）图片预览布局：rc_picprev_activity.xml
（3）需要修改颜色、形状的几张图：

image.png

4、其他

更多图片资源的替换，可以看 IMKit 项目中的 drawable-xhdpi