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

最新推荐文章于 2018-09-18 22:44:28 发布
最新推荐文章于 2018-09-18 22:44:28 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： 自定义View

首先定义主布局文件

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:orientation="vertical">

    <include
        android:id="@+id/ic_chart"
        layout="@layout/public_toolbar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ic_chart"
        android:orientation="vertical">

        <android.support.v7.widget.RecyclerView

            android:id="@+id/lv_chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <include layout="@layout/chat_footbar" />
    </LinearLayout>

</RelativeLayout>

 

效果图

 

定义一个适配器

 

package com.petsknow.doctor.sessionmodule.adapter;

import android.app.Activity;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.easemob.chat.EMMessage;
import com.easemob.chat.ImageMessageBody;
import com.easemob.chat.TextMessageBody;
import com.easemob.util.DateUtils;
import com.petsknow.doctor.R;
import com.petsknow.doctor.commonmodule.activity.PhotoBrowerActivity;
import com.petsknow.doctor.commonmodule.constant.Constant;
import com.petsknow.doctor.commonmodule.constant.ConstantUrl;
import com.petsknow.doctor.commonmodule.glide.GlideUtils;
import com.petsknow.doctor.commonmodule.utils.L;
import com.petsknow.doctor.sessionmodule.utils.SmileUtils;

import java.util.Date;
import java.util.List;

/**
 * Created by yukuo on 2016/3/5.
 * 这是一个聊天界面的适配器
 */
public class ChartListVIewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private List<EMMessage> list;
    private Intent intent;
    private Activity activity;
    private String avator;

    public ChartListVIewAdapter(List<EMMessage> list, Activity activity, String avator) {
        super();
        this.list = list;
        this.activity = activity;
        this.avator = avator;
    }

    /**
     * 这是一个添加一条数据并刷新界面的方法
     *
     * @param msg
     */
    public void addData(EMMessage msg) {
        list.add(list.size(), msg);
        notifyItemInserted(list.size());
    }

    /**
     * 这是一个根据不同的条目返回不同的类型的布局的方法
     *
     * @param position
     * @return
     */
    @Override
    public int getItemViewType(int position) {
        EMMessage msg = list.get(position);
        if (msg.direct == EMMessage.Direct.SEND) {
            if (msg.getType() == EMMessage.Type.TXT) {
                return Constant.SENDTXT;
            } else if (msg.getType() == EMMessage.Type.IMAGE) {
                return Constant.SENDIMAGE;
            }
        } else if (msg.direct == EMMessage.Direct.RECEIVE) {
            if (msg.getType() == EMMessage.Type.TXT) {
                return Constant.FROMTXT;
            } else if (msg.getType() == EMMessage.Type.IMAGE) {
                return Constant.FROMIMAGE;
            }
        }

        return super.getItemViewType(position);
    }

    /**
     * 根据不同的类型返回不同的holder
     * @param parent
     * @param viewType
     * @return
     */
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = null;
        if (viewType == Constant.SENDTXT) {
            //发送者文本
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_send_txt, parent, false);
            return new SendTxtVIewHolder(view);
        } else if (viewType == Constant.SENDIMAGE) {
            //发送者图片
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_send_image, parent, false);
            return new SendImageVIewHolder(view);
        } else if (viewType == Constant.FROMTXT) {
            //接受者文本
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_from_txt, parent, false);
            return new FromTxtVIewHolder(view);
        } else if (viewType == Constant.FROMIMAGE) {
            //接受者图片
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_chat_from_image, parent, false);
            return new FromImageVIewHolder(view);
        }
        return null;
    }

    /**
     * 这是一个绑定数据的方法
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (holder instanceof SendTxtVIewHolder) {
            TextMessageBody txtbody = (TextMessageBody) list.get(position).getBody();
            String content = txtbody.getMessage();

            ((SendTxtVIewHolder) holder).tv_item_send_txt.setText(SmileUtils.getSmiledText(activity, content));
            // 两条消息时间离得如果稍长，显示时间
            if (position == 0) {

            } else {
                if (DateUtils.isCloseEnough(list.get(position).getMsgTime(), list.get(position - 1).getMsgTime())) {
                    ((SendTxtVIewHolder) holder).tv_send_msg_date.setVisibility(View.GONE);
                } else {
                    ((SendTxtVIewHolder) holder).tv_send_msg_date.setText(DateUtils.getTimestampString(new Date(list.get(position).getMsgTime())));
                    ((SendTxtVIewHolder) holder).tv_send_msg_date.setVisibility(View.VISIBLE);
                }
            }

        } else if (holder instanceof SendImageVIewHolder) {
            final ImageMessageBody imageMessageBody = (ImageMessageBody) list.get(position).getBody();
            L.i("图片地址", imageMessageBody.getLocalUrl() + "****" + imageMessageBody.getRemoteUrl());
            GlideUtils.roundImageCenterGroup(imageMessageBody.getLocalUrl(), ((SendImageVIewHolder) holder).iv_item_send_image, 8);
            ((SendImageVIewHolder) holder).iv_item_send_image.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    intent = new Intent(activity, PhotoBrowerActivity.class);
                    intent.putExtra("url", imageMessageBody.getLocalUrl());
                    activity.startActivity(intent);
                }
            });
        } else if (holder instanceof FromTxtVIewHolder) {
            TextMessageBody txtbody = (TextMessageBody) list.get(position).getBody();
            String content = txtbody.getMessage();
            ((FromTxtVIewHolder) holder).tv_item_from_txt.setText(SmileUtils.getSmiledText(activity, content));
            GlideUtils.circleImage(ConstantUrl.qiniu + avator, ((FromTxtVIewHolder) holder).from_person_avator);
            // 两条消息时间离得如果稍长，显示时间
            if (position == 0) {

            } else {
                if (DateUtils.isCloseEnough(list.get(position).getMsgTime(), list.get(position - 1).getMsgTime())) {
                    ((FromTxtVIewHolder) holder).tv_from_msg_date.setVisibility(View.GONE);
                } else {
                    ((FromTxtVIewHolder) holder).tv_from_msg_date.setText(DateUtils.getTimestampString(new Date(list.get(position).getMsgTime())));
                    ((FromTxtVIewHolder) holder).tv_from_msg_date.setVisibility(View.VISIBLE);
                }
            }
        } else if (holder instanceof FromImageVIewHolder) {
            final ImageMessageBody imageMessageBody = (ImageMessageBody) list.get(position).getBody();
            L.i("图片地址接受者", imageMessageBody.getLocalUrl() + "****" + imageMessageBody.getRemoteUrl());
            GlideUtils.circleImage(ConstantUrl.qiniu + avator, ((FromImageVIewHolder) holder).iv_item_from_image);
            GlideUtils.roundImageCenterGroup(ConstantUrl.qiniu + imageMessageBody.getRemoteUrl(), ((FromImageVIewHolder) holder).from_person_avator, 8);
            ((FromImageVIewHolder) holder).iv_item_from_image.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    intent = new Intent(activity, PhotoBrowerActivity.class);
                    intent.putExtra("url", imageMessageBody.getRemoteUrl());
                    activity.startActivity(intent);
                }
            });
        }
    }

    /**
     * 条目个数
     * @return
     */
    @Override
    public int getItemCount() {
        return list.size();
    }

    /**
     * 以下四个内部类为定义的不同的holder
     */
    class SendTxtVIewHolder extends RecyclerView.ViewHolder {
        private TextView tv_item_send_txt;
        private TextView tv_send_msg_date;

        public SendTxtVIewHolder(View view) {
            super(view);
            tv_item_send_txt = (TextView) view.findViewById(R.id.tv_item_send_txt);
            tv_send_msg_date = (TextView) view.findViewById(R.id.tv_send_msg_date);
        }
    }

    class SendImageVIewHolder extends RecyclerView.ViewHolder {
        private ImageView iv_item_send_image;

        public SendImageVIewHolder(View view) {
            super(view);
            iv_item_send_image = (ImageView) view.findViewById(R.id.iv_send_image);
        }
    }

    class FromTxtVIewHolder extends RecyclerView.ViewHolder {
        private TextView tv_item_from_txt;
        private ImageView from_person_avator;
        private TextView tv_from_msg_date;

        public FromTxtVIewHolder(View view) {
            super(view);
            tv_item_from_txt = (TextView) view.findViewById(R.id.tv_item_from_txt);
            from_person_avator = (ImageView) view.findViewById(R.id.from_person_avator);
            tv_from_msg_date = (TextView) view.findViewById(R.id.tv_from_msg_date);
        }
    }

    class FromImageVIewHolder extends RecyclerView.ViewHolder {
        private ImageView iv_item_from_image;
        private ImageView from_person_avator;

        public FromImageVIewHolder(View view) {
            super(view);
            iv_item_from_image = (ImageView) view.findViewById(R.id.iv_from_image);
            from_person_avator = (ImageView) view.findViewById(R.id.from_person_avator);
        }
    }
}

发送者文本的布局

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_send_msg_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:text="2015-6-6 06:06:06"
        android:textSize="12sp"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:gravity="right">

        <TextView
            android:id="@+id/tv_item_send_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="110dp"
            android:layout_marginRight="10dp"
            android:background="@drawable/pop_right"
            android:gravity="center_vertical"
            android:paddingBottom="6dp"
            android:paddingLeft="8dp"
            android:paddingRight="16dp"
            android:paddingTop="6dp"
            android:textColor="@android:color/white"
            android:textSize="16sp" />

        <ImageView
            android:id="@+id/from_person_avator02"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_toRightOf="@id/tv_item_send_txt"
            android:background="@drawable/default_icon_headphoto" />
    </LinearLayout>
</LinearLayout>

效果图

 

发送者文本效果发送者文本效果

发送者图片的布局

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_send_msg_Image_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:text="2015-6-6 06:06:06"
        android:textSize="12sp"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:gravity="right"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_send_image"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:layout_marginRight="10dp"
            android:clickable="true"
            android:focusable="true"
            android:paddingBottom="5dp"
            android:paddingLeft="5dp"
            android:paddingRight="13dp"
            android:paddingTop="5dp" />

        <ImageView
            android:id="@+id/from_person_avator02"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/default_icon_headphoto"
            android:clickable="true" />
    </LinearLayout>
</LinearLayout>

效果图

 

发送者图片效果发送者图片效果

接收者文本布局

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_from_msg_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:text="2015-6-6 06:06:06"
        android:textSize="12sp"
        android:visibility="gone" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <ImageView
            android:id="@+id/from_person_avator"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/default_icon_headphoto" />

        <TextView
            android:id="@+id/tv_item_from_txt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="70dp"
            android:layout_toRightOf="@id/from_person_avator"
            android:background="@drawable/pop_left"
            android:gravity="center_vertical"
            android:paddingBottom="6dp"
            android:paddingLeft="15dp"
            android:paddingRight="8dp"
            android:paddingTop="6dp"
            android:text="你好!"
            android:textSize="16sp" />
    </RelativeLayout>
</LinearLayout>

效果图

 

接收者字体效果接收者字体效果

接收者图片布局

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tv_from_msg_Image_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:text="2015-6-6 06:06:06"
        android:textSize="12sp"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:orientation="horizontal">


        <ImageView
            android:id="@+id/from_person_avator"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/default_icon_headphoto" />

        <ImageView
            android:id="@+id/iv_from_image"
            android:layout_width="100dp"
            android:layout_height="120dp"
            android:layout_marginLeft="10dp"
            android:clickable="true"
            android:paddingBottom="5dp"
            android:paddingLeft="13dp"
            android:paddingRight="5dp"
            android:paddingTop="5dp" />
    </LinearLayout>

</LinearLayout>

效果图

 

接收者图片效果接收者图片效果

主页面的逻辑

 

/**
 * 获取当前会话所有的会话列表
 */
public void getallmessage() {
    //获取此会话的所有消息
    emMessages = conversation.getAllMessages();
    chartListVIewAdapter = new ChartListVIewAdapter(emMessages, ChatActivity.this, userAvator);
    lvChart.setLayoutManager(new LinearLayoutManager(this));
    lvChart.setAdapter(chartListVIewAdapter);
    lvChart.smoothScrollToPosition(emMessages.size());
    chartListVIewAdapter.notifyDataSetChanged();
    L.i("消息个数", emMessages.size() + "");
}

ok!完事看下效果

 

最后效果最后效果

Luckie stone
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
RecyclerView实现聊天界面
u010221508的博客
03-27 2962
先看一下效果图 RecyclerView简介 RecyclerView是从Android5.0开始，谷歌公司推出的一个用于大量数据展示的新控件。RecyclerView可以替代传统的ListView，它更加强大和灵活，RecyclerView的官方定义如下 A flexible view for providing a limited window into a large data ...
RecycleView的简易聊天界面
da_xin的博客
03-16 138
1. 在build.gradle的dependencies中添加dependencies { implementation fileTree(include: ['*.jar'], dir: 'libs') implementation 'com.android.support:appcompat-v7:26.0.0' // testImplementation 'juni...
Android利用RecyclerView编写聊天界面
01-20
本文实例为大家分享了Android RecyclerView编写聊天界面的具体代码，供大家参考，具体内容如下 1、待会儿会用到RecyclerView，首先在app/build.gradle（注意有两个build.gradle，选择app下的那个）当中添加依赖库，如下： dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:24.2.1' compile 'com.android.support:recyclerview-v7:
recycleview多item布局的实现（简单聊天界面）
stupid_boy1103的博客
03-02 1225
因项目需求，需要在一个列表中实现多个不同的布局方式 ，模拟了一个聊天界面 recycleview多item布局最主要的还是adapter部分，也就是适配器的写法 适配器代码如下：package com.example.lenovo.myapplication;import android.content.Context; import android.media.Image; import an
recycleview聊天界面的从底部开始显示的处理
kururunga的博客
09-18 5694
做聊天项目的时候，由于要显示最底部的聊天记录，我开始用的是recycleview。smothtoposition的方法，这个方法可以，但是问题是会有一个滑动到底部的动画，用户体验不好，所以我在找一种从底部开始加载加载数据的方法，最终找到了，是在layoutmanager里的， linearLayoutManager.setStackFromEnd(true); 注意的是gridlayoutm...
模拟QQ聊天记录界面 RecyclerView
So_Band的博客
08-05 1005
首先，在build.gradle中添加函数依赖库。 编辑主界面。 &lt;《》LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schem...
Android进阶——RecycleView的使用之自定义聊天界面（三）
最美不过，心中有梦，身旁有你！
10-07 3722
RecycleView得以正常完成基本的工作离不开RecycleView.Adapter和RecyclerView.LayoutManager，RecycleView相当于只是一个容器，如果没有Adapter那么它就没有任何价值。Acitivty通过布局加载RecycleView，然后触发对应的生命周期方法，去完成AdapterView的初始化工作。
Android ListView、RecyclerView两种方式实现聊天界面搭建
热门推荐
Maxi的专栏
09-28 1万+
示例主界面选择实现方式： 文字表情示例图片： 图片发送示例图片： 语音发送示例动图： 介绍： 该项目是一个聊天界面，封装了包括文字、表情、图片和语音信息。 支持静态表情，gif表情，文字表情混排。图文混排实现参考：Android聊天实现图文混编（包括gif显示） 支持图片发送，裁剪图片形状，支持图片点击进入大图观看，支持放大缩小等。 根据图片大小等比例缩放，并压缩显示。 支持语音
Android学习——利用RecyclerView编写聊天界面
anjiukonghe77852的博客
07-17 261
1、待会儿会用到RecyclerView，首先在app/build.gradle（注意有两个build.gradle，选择app下的那个）当中添加依赖库，如下： 1 dependencies { 2 compile fileTree(dir: 'libs', include: ['*.jar']) 3 compile 'com.android.support:a...
recycleView 实现卡片滑动 层叠效果
01-23
recycleView 实现卡片滑动 层叠效果,让你的ui更加强大
使用RecyclerView实现聊天界面
01-23
使用RecyclerView，简单实现聊天界面，用户自己可以进行本地对聊
利用RecyclerView实现QQ聊天界面效果
07-12
1、简单的实现了一个聊天界面，非常简陋； 2、没有用到气泡，想自己设置气泡可以使用.9.png图片；
基于RecyclerView实现的仿微信聊天界面，item长按根据触摸位置弹出对话框
03-12
基于RecyclerView实现的仿微信聊天界面，item长按根据触摸位置弹出对话框
android中仿微信图片选择并展示在RecyclerView
06-26
android仿微信选择图片的效果，并展示在recyclerview上，要源码的可自行下载。大家一起研究，共同进步！
recyclepager:recycleview实现抖音上下翻页效果
04-30
使用recycleview实现抖音上下翻页效果，实现原理主要是借助于PagerSnapHelper实现的，每次上下只能够翻动一页。 项目当中使用了mvp架构，网络访问使用到了retrofit2.0+rxjava。 详细的效果图如下，有需要的可以fork...
RecycleView实现viewpager加fragment效果
04-09
RecycleView viewpager加fragment 。。。。。。。。。。。。。。。。。。
Android之RecycleView实现指定范围的拖动效果
08-18
主要介绍了Android之RecycleView实现指定范围的拖动效果的实例代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
recycleView实现的循环banner效果
11-19
Gallery画廊效果，循环banner效果，Gallery画廊效果，循环banner效果Gallery画廊效果，循环banner效果Gallery画廊效果，循环banner效果
超爽的抽屉效果.zip
最新发布
04-19
android 源码学习. 资料部分来源于合法的互联网渠道收集和整理，供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权，请通知本人删除。感谢CSDN官方提供大家交流的平台
使用recycleview实现下载进度列表
05-01
RecycleView是Android平台上用于显示数据集合的一种控件，可以实现高效的数据显示和优化，可以实现大量数据的性能高效显示。使用RecycleView实现下载进度列表可以让用户直观地了解每个下载任务的状态，并可以直接...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值