项目地址
- 官网地址:https://github.com/stfalcon-studio/ChatKit
- 官方有比较详细的说明,不过时英文的。
- 本篇源码:
官方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。