GitHub聊天通信开源UI框架stfalcon-studio/ChatKit使用教程

项目地址

• 官网地址：https://github.com/stfalcon-studio/ChatKit
• 官方有比较详细的说明，不过时英文的。
• 本篇源码：
  • Gitee：https://gitee.com/up55/chatkit-test
  • CSND ：https://download.csdn.net/download/JieZhongBa/20030052?spm=1001.2014.3001.5501

官方demo

强烈建议把官方的demo跑出来，可以看到他的效果，还有他的实现方式，毕竟能参考资料真的不多。
部分效果：

使用的时候主要就是结合GitHub里的教程和demo。其实官方给出的教程也比较详细了。

利用demo快速搭建

1. 依赖

首先创建一个新项目，并添加依赖。
先在项目全局gradle中加上这个，才正确导入。

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

再加依赖，第二个是图像加载的，使用简单，用来加载头像图片之类的。

//Chatkit
implementation 'com.github.stfalcon-studio:Chatkit:0.4.1'
//Picasso
implementation "com.squareup.picasso:picasso:2.71828"

2. 布局

页面布局，添加会话列表

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

	//会话列表
    <com.stfalcon.chatkit.dialogs.DialogsList
        android:id="@+id/dialogList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

3. 实体类

编写实体类，官方已经提供了接口，需要自己实现，这里直接用demo里的，也可自己实现更多效果。
直接复制demo三个实体类，省事。可自行调整。
复制这三个类

4. 数据源

为了方便展示效果，列表的数据源先用demo中的数据，就是写死在代码中，一些数组，存了图片地址、用户名、对话这些，获取数据的时候随机拉取一些，拼凑成聊天记录。demo已经封装好了，直接一个方法调用，很方便，后面再自己替换成自己的数据就好了。
复制下图三个类，他们用了上面三个实体类，复制过来要重新import一下。
其中FixturesData这个类是提供数据的，里面的图片链接有些已经打不开了，自己去网上找几个连接贴上去就好，另外别忘了声明网络权限。

5. 适配器

在activity的onCreate中初始化列表

private DialogsList dialogsList;
private DialogsListAdapter<Dialog> dialogsListAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    dialogsList = findViewById(R.id.dialogList);

    //初始化适配器并添加图像加载
    dialogsListAdapter=new DialogsListAdapter<>((imageView, url, payload) -> Picasso.get().load(url).into(imageView));
    //通过DialogsFixtures给予列表初始数据
    dialogsListAdapter.addItems(DialogsFixtures.getDialogs());
    //item项的点击事件，跳转到聊天界面
    dialogsListAdapter.setOnDialogClickListener(dialog -> {
        startActivity(new Intent(this,chat.class));
    });
    
    dialogsList.setAdapter(dialogsListAdapter);
}

最简单的构造就是这样了，跑一跑看看效果吧。
还有其他的方法，如item项的长按事件，等，可以参考官方文档。
一些常用的构造器方法：

添加多个会话：addItems(List)
添加单个会话：addItem(索引位置, Dialog);
可以通过item项的set方法更改数据改变会话。
刷新列表：notifyDataSetChanged()
item点击事件：setOnDialogClickListener()
item长按事件：setOnDialogLongClickListener()
···

6. 聊天界面布局

接下来是聊天界面
xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".chat">

    <com.stfalcon.chatkit.messages.MessagesList
        android:id="@+id/messagesList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/input" />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/input"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="#e8e8e8" />

    <com.stfalcon.chatkit.messages.MessageInput
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:inputHint="Message"
        app:showAttachmentButton="true" />

</RelativeLayout>

7. 聊天界面适配器

适配器，看注释吧

public class chat extends AppCompatActivity implements MessagesListAdapter.OnLoadMoreListener{
    private MessagesList messagesList;
    private MessageInput input;

    private MessagesListAdapter<Message> messagesListAdapter;
    private Date lastLoadedDate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);

        messagesList = findViewById(R.id.messagesList);
        input = findViewById(R.id.input);

        /*
         * senderId:自己的id，用于区分自己和对方，控制消息气泡的位置。
         * imageLoader:图像加载器
         *
         * */
        messagesListAdapter = new MessagesListAdapter<>("0", (imageView, url, payload) -> Picasso.get().load(url).into(imageView));
        //滑倒顶部时加载历史记录
        messagesListAdapter.setLoadMoreListener(this);

        //发送输入框中的文本，addToStart的第二个参数是列表滚动到底部
        input.setInputListener(input1 -> {
            messagesListAdapter.addToStart(MessagesFixtures.getTextMessage(input1.toString()), true);
            return true;
        });
        //小加号按钮点击事件，发送一张图片
        input.setAttachmentsListener(() -> {
   			//第二个参数表示是否滚动列表到最底部
            messagesListAdapter.addToStart(MessagesFixtures.getImageMessage(), true);
        });

        messagesList.setAdapter(messagesListAdapter);
        //初始化时调用一次加载历史记录
        onLoadMore(0,1);
    }

	//滚动到顶部加载历史记录
    @Override
    public void onLoadMore(int page, int totalItemsCount) {
        new Handler().postDelayed(() -> {
            ArrayList<Message> messages = MessagesFixtures.getMessages(lastLoadedDate);
            lastLoadedDate = messages.get(messages.size() - 1).getCreatedAt();
            messagesListAdapter.addToEnd(messages, false);
        }, 1000);
    }
}

好了这样就能跑了，看看效果吧。

最终效果：

更多效果

可以自定义item样式，但是id必须对应，而官方demo中已经有多个模板，基本上够用了，复制过来即可，也可以自己稍作修改，详情见官方文档很demo。