关闭

ListView、RecyclerView 两种方式实现聊天界面支持文字、表情、图片和语音信息,支持下拉加载更多

标签: androidlistview对象数据界面
1639人阅读 评论(0) 收藏 举报
分类:

ChatDemo

项目地址:Maxi-Mao/ChatDemo
简介:ListView、RecyclerView 两种方式实现聊天界面支持文字、表情、图片和语音信息,支持下拉加载更多

主界面选择实现方式:

image

文字表情示例图片:

image

图片发送示例图片:

image

语音发送示例动图:

image

介绍:

  • 该项目是一个聊天界面,封装了包括文字、表情、图片和语音信息。
  • 支持静态表情,gif 表情,文字表情混排。图文混排实现参考:Android 聊天实现图文混编(包括 gif 显示)
  • 支持图片发送,裁剪图片形状,支持图片点击进入大图观看,支持放大缩小等。
  • 根据图片大小等比例缩放,并压缩显示。
  • 支持语音发送,接收语音未读状态显示,语音录制为 amr 格式保存文件,语音发送仿微信。
  • 若想录制 mp3 格式参考:Android 录制 mp3 格式
  • 没有录音权限则提示用户。实现方式参考:Android 录音权限被禁解决方案
  • 语音、图片支持三种状态:发送中、发送失败和发送成功(发送失败显示感叹号)。
  • 支持下拉加载更多,下拉加载更多用了 ViewDragHelper,实现方式参考:Android 下拉刷新
  • 支持时间显示,默认大于一分钟显示一次,具体规则参见 ChatAdapter 类。可根据需求修改。

详细说明

ListView:

image

RecyclerView:

image

主要:

  • ChatActivity:聊天界面
  • ChatListViewAdapter:ListView 聊天界面适配器
  • ChatRecyclerAdapter:RecyclerView 聊天界面适配器
  • ChatBean:聊天数据对象

其他

  • ImageViewActivity:大图观看界面
  • AudioRecordButton:自定义录音控件
  • BubbleImageView:自定义图片裁剪控件
  • MediaManager:语音播放控件
  • GifTextView:自定义图文混排控件
  • pulltorefresh 包:自定义下拉加载更多控件(仅支持下拉加载更多)
  • SlideInOutBottomItemAnimator:RecyclerView 添加 item 动画(上滑)

图片加载使用 Glide。

为了优化性能,滑动的过程中 gif 为静态显示。

文字发送按钮为键盘中的回车。

16/9/30 更新:

  • 界面由 ListView 改为 RecyclerView

  • 增加添加 item 动画

  • 修复界面随键盘弹起问题,类似微信。

  • 优化界面,提升用户体验

16/10/10 更新:

  • 添加 ListView 的实现方式:PullToRefreshListView

PullToRefreshRecyclerView 为 RecyclerView 的实现方式,若想切换 ListView 则需对 ChatActivity 和 PullToRefreshLayout 等做修改和一些属性修改。

ListView 适配器:ChatListViewAdapter

RecyclerView 适配器:ChatRecyclerAdapter

注:RecyclerView 仍在完善中,若急需使用建议使用 ListView。

后记:

该项目也是将之前做过的一些东西汇合了一下,时间比较短,大家就看一下具体的实现方式吧,可能有点乱,有时间的话我整理一下。

0
0
查看评论

仿微信聊天列表之RecyclerView多布局

背景最近在做关于聊天的项目,需要用到RecyclerView多布局,然而在网上却没有比较详细的讲解,于是萌生了自己写一篇的念头,可能写的不好,不喜勿喷。转载请标明出处,原创不易效果图不废话直接先上效果图: 代码既然说到RecyclerView,那就不能不提RecyclerViewAdapter,...
  • Android_zj
  • Android_zj
  • 2016-09-07 22:44
  • 1617

关于如何通过recycleview实现聊天界面的效果

首先定义主布局文件 xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android" androi...
  • EaskShark
  • EaskShark
  • 2016-04-12 11:46
  • 5033

使用RecyclerView来完成聊天对话框

聊天记录信息类,该类中2个成员变量聊天内容content和信息来源type public class Msg { public static final int TYPE_RECEIVE = 0; public static final int TYPE_SEND = 1; ...
  • SeaLong_
  • SeaLong_
  • 2017-01-23 11:05
  • 1672

仿微信、QQ聊天界面, 加入了上拉加载更多,下拉刷新

  • 2014-06-25 13:13
  • 74KB
  • 下载

使用RecyclerView实现简单的聊天页面

需要先创建两个item,每个item只有一个图片和一个textviewpublic class MainActivity extends AppCompatActivity { private RecyclerView recyclerView; // 声明一个数据集合,用来处...
  • linyj199102
  • linyj199102
  • 2016-07-14 21:53
  • 226

使用RecyclerView编写聊天界面及demo

  • 2016-12-01 23:35
  • 4.32MB
  • 下载

android 轻松实现在线即时聊天【图片、语音、表情、文字】等!含源码!

android即时聊天 源码 聊天源码
  • Gulaer
  • Gulaer
  • 2013-09-29 13:28
  • 6229

Android ListView、RecyclerView两种方式实现聊天界面搭建

示例主界面选择实现方式: 文字表情示例图片: 图片发送示例图片: 语音发送示例动图: 介绍: 该项目是一个聊天界面,封装了包括文字、表情、图片和语音信息。 支持静态表情,gif表情,文字表情混排。图文混排实现参考:Android聊天实现图文混编(包括gif显示) 支持图片发送,裁...
  • oMrApollo
  • oMrApollo
  • 2016-09-28 16:06
  • 6735

Android聊天Demo实现(数据库+RecyclerView)

  • 2017-05-07 10:45
  • 24.83MB
  • 下载

RecyclerView仿QQ消息列表左滑弹出菜单,标记已读和删除

仿QQ消息列表左滑弹出菜单,标记已读和删除话不多说,就这样的效果,心动吗?1.先上build .gradle,dependencies里面要这样写,其实就是导入v7里面的recyclerView。要用butterknife的话, 记得加到这里来:dependencies { compile ...
  • u013806766
  • u013806766
  • 2016-09-27 23:38
  • 1975
    个人资料
    • 访问:675877次
    • 积分:12860
    • 等级:
    • 排名:第1274名
    • 原创:536篇
    • 转载:305篇
    • 译文:2篇
    • 评论:232条
    ps 理解
    知道自己想做什么的人,比什么都想做的人更容易成功!
    博客专栏