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.DialogsListandroid: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.MessagesListandroid:id="@+id/messagesList"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@+id/input" /><Viewandroid: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.MessageInputandroid: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;@Overrideprotected 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);}//滚动到顶部加载历史记录@Overridepublic 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);}
}

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

最终效果：