基于RecyclerView实现的实现多样化的item样式——类似IM即时通讯聊天界面的布局效果

最新推荐文章于 2024-02-21 17:55:56 发布
最新推荐文章于 2024-02-21 17:55:56 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Silence1515/article/details/79526688
版权


首先看一下实现的效果图：


RecyclerView实现多样化的item样式一般的实现代码还是比较简单的，直接上代码：

ChatDetailAdapter适配器：

package com.alter.popupwindowmenu.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.alter.popupwindowmenu.Command.C;
import com.alter.popupwindowmenu.R;
import com.alter.popupwindowmenu.model.ChatMessage;
import com.alter.popupwindowmenu.model.UserInfo;

import java.util.List;

/**
 * @CreateDate: 2018/1/26
 * @Author: lzsheng
 * @Description: 适配器，根据不同的数据类型，展示不同的UI效果
 * @Version:
 */
public class ChatDetailAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private Context mContext;
    private List<ChatMessage> mChatMessages;
    private OnRecyclerViewItemLongClick mOnRecyclerViewItemLongClick;

    private final int TYPE_MSG_SEND = C.TYPE_MSG_SEND;              //
    private final int TYPE_MSG_RECEIVE = C.TYPE_MSG_RECEIVE;          //

    public ChatDetailAdapter(Context context) {
        this.mContext = context;
    }

    public void setChatMessages(List<ChatMessage> chatMessages) {
        mChatMessages = chatMessages;
    }

    public void setOnRecyclerViewItemLongClick(OnRecyclerViewItemLongClick onRecyclerViewItemLongClick) {
        mOnRecyclerViewItemLongClick = onRecyclerViewItemLongClick;
    }

    /**
     * @CreateDate: 2018/2/3
     * @Author: lzsheng
     * @Description: 根据数据的类型, 返回不同的ItemViewType
     * @Params: [position]
     * @Return: int
     */
    @Override
    public int getItemViewType(int position) {
        if (mChatMessages != null && mChatMessages.size() > 0) {
            int from = mChatMessages.get(position).getFrom();
            if (from == C.TYPE_MSG_SEND) {
                return TYPE_MSG_SEND;
            } else if (from == C.TYPE_MSG_RECEIVE) {
                return TYPE_MSG_RECEIVE;
            }
        }
        return 0;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case TYPE_MSG_SEND:
                HolderChatSend holderChatSend = new HolderChatSend(
                        LayoutInflater.from(mContext).inflate(R.layout.rv_item_chat_msg_send, parent, false));
                return holderChatSend;
            case TYPE_MSG_RECEIVE:
                HolderChatReceive holderChatReceive = new HolderChatReceive(
                        LayoutInflater.from(mContext).inflate(R.layout.rv_item_chat_msg_receive, parent, false));
                return holderChatReceive;
            default:
                return null;
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        if (mChatMessages != null) {
            ChatMessage chatMessage = mChatMessages.get(position);
            int from = chatMessage.getFrom();
            switch (from) {
                case TYPE_MSG_SEND:
                    String msgContentSend = chatMessage.getMsgContent();
                    ((HolderChatSend) holder).tvMsgContent.setText(msgContentSend);
                    break;
                case TYPE_MSG_RECEIVE:
                    UserInfo userInfo = chatMessage.getUserInfo();
                    ((HolderChatReceive) holder).tvNickName.setText(userInfo.getNickName());
                    String msgContentReceive = chatMessage.getMsgContent();
                    ((HolderChatReceive) holder).tvMsgContent.setText(msgContentReceive);
                    break;
                default:
                    break;
            }
        }
    }

    @Override
    public int getItemCount() {
        if (mChatMessages != null && mChatMessages.size() > 0) {
            return mChatMessages.size();
        }
        return 0;
    }

    class HolderChatSend extends RecyclerView.ViewHolder implements View.OnLongClickListener {

        TextView tvNickName;
        TextView tvMsgContent;
        LinearLayout layoutChat;
        MotionEvent event;

        public HolderChatSend(View itemView) {
            super(itemView);
            tvNickName = (TextView) itemView.findViewById(R.id.textview_nick_name);
            tvMsgContent = (TextView) itemView.findViewById(R.id.textview_message);
            layoutChat = (LinearLayout) itemView.findViewById(R.id.layout_message);
            layoutChat.setOnLongClickListener(this);
        }

        @Override
        public boolean onLongClick(View v) {
            if (mOnRecyclerViewItemLongClick != null) {
                mOnRecyclerViewItemLongClick.onItemLongClick(v, event, getAdapterPosition());
            }
            return false;
        }
    }

    class HolderChatReceive extends RecyclerView.ViewHolder implements View.OnLongClickListener {

        TextView tvNickName;
        TextView tvMsgContent;
        LinearLayout layoutChat;
        MotionEvent event;

        public HolderChatReceive(View itemView) {
            super(itemView);
            tvNickName = (TextView) itemView.findViewById(R.id.textview_nick_name);
            tvMsgContent = (TextView) itemView.findViewById(R.id.textview_message);
            layoutChat = (LinearLayout) itemView.findViewById(R.id.layout_message);
            layoutChat.setOnLongClickListener(this);
        }

        @Override
        public boolean onLongClick(View v) {
            if (mOnRecyclerViewItemLongClick != null) {
                mOnRecyclerViewItemLongClick.onItemLongClick(v, event, getAdapterPosition());
            }
            return false;
        }
    }

    /**
     * item点击接口
     */
    public interface OnRecyclerViewItemLongClick {
        void onItemLongClick(View childView, MotionEvent event, int position);
    }
}


ChatMessage消息实体类

package com.alter.popupwindowmenu.model;

/**
 * @CreateDate: 2018/3/9
 * @Author: lzsheng
 * @Description:
 * @Version:
 */
public class ChatMessage {

    private UserInfo userInfo;
    private int from;
    private String msgContent;

    public UserInfo getUserInfo() {
        return userInfo;
    }

    public void setUserInfo(UserInfo userInfo) {
        this.userInfo = userInfo;
    }

    public int getFrom() {
        return from;
    }

    public void setFrom(int from) {
        this.from = from;
    }

    public String getMsgContent() {
        return msgContent;
    }

    public void setMsgContent(String msgContent) {
        this.msgContent = msgContent;
    }

    @Override
    public String toString() {
        return "ChatMessage{" +
                "userInfo=" + userInfo +
                ", from=" + from +
                ", msgContent='" + msgContent + '\'' +
                '}';
    }
}

布局代码：

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="50dp"
        >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dp"
            android:layout_toLeftOf="@+id/layout_user"
            android:orientation="vertical"
            >

            <!--<LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:orientation="vertical"
                >

                <TextView
                    android:id="@+id/textview_nick_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="5dp"
                    android:layout_marginRight="15dp"
                    android:gravity="right"
                    android:text="Alter"
                    />
            </LinearLayout>-->

            <LinearLayout
                android:id="@+id/layout_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/chat_msg_send_bg"
                android:gravity="center"
                android:orientation="vertical"
                >

                <TextView
                    android:id="@+id/textview_message"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="10dp"
                    />
            </LinearLayout>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/layout_user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:orientation="vertical"
            >

            <ImageView
                android:id="@+id/imageview_pic"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/user_pic"
                android:scaleType="centerInside"
                />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="50dp"
        >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/layout_user"
            android:orientation="vertical"
            >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:orientation="vertical"
                >

                <TextView
                    android:id="@+id/textview_nick_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="3dp"
                    android:layout_marginLeft="15dp"
                    android:textColor="#898989"
                    android:text="Mia"
                    />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/layout_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/chat_msg_receive_bg"
                android:gravity="center"
                android:orientation="vertical"
                >

                <TextView
                    android:id="@+id/textview_message"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_margin="10dp"
                    />
            </LinearLayout>
        </LinearLayout>


        <LinearLayout
            android:id="@+id/layout_user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >

            <ImageView
                android:id="@+id/imageview_pic"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:scaleType="centerCrop"
                android:src="@drawable/girl_pic"
                />
        </LinearLayout>
    </RelativeLayout>
</FrameLayout>


MainActivity的代码:

package com.alter.popupwindowmenu.activity;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

import com.alter.popupwindowmenu.R;
import com.alter.popupwindowmenu.adapter.ChatDetailAdapter;
import com.alter.popupwindowmenu.model.ChatMessage;

import java.util.ArrayList;
import java.util.List;


/**
 * @CreateDate: 2018/3/9
 * @Author: lzsheng
 * @Description:
 * @Version:
 */
public class MainActivity extends Activity {

    private RecyclerView mRecyclerView;
    private LinearLayoutManager mLinearLayoutManager;
    private ChatDetailAdapter mChatDetailAdapter;
    private List<ChatMessage> mChatMessages;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initVariable();
        initViews();
        initData();
        setViewsData();
    }

    private void initVariable() {
        mChatMessages = new ArrayList<>();
    }

    private void initViews() {
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview_messages);
        mLinearLayoutManager = new LinearLayoutManager(MainActivity.this);
        mRecyclerView.setLayoutManager(mLinearLayoutManager);
    }

    private void initData() {
        for (int i = 'A'; i <= 'Z'; i++) {
            ChatMessage chatMessage = new ChatMessage();
            chatMessage.setFrom((int) (Math.random() * 2) + 1);
//            int s = (int) (Math.random() * ('Z' - 'A' + 1)) + 'A';
//            int e = (int) (Math.random() * ('Z' - 'A' + 1)) + 'A';
            int s = (int) (Math.random() * 120) + 1;
            int e = (int) (Math.random() * 120) + 1;
            Log.d(MainActivity.class.getSimpleName(), "s = " + s);
            Log.d(MainActivity.class.getSimpleName(), "e = " + e);
            int min = 0;
            int max = 0;
            if (s <= e) {
                min = s;
                max = e;
            } else {
                min = e;
                max = s;
            }
            StringBuffer buffer = new StringBuffer();
            for (int j = min; j <= max; j++) {
                int c = (int) (Math.random() * ('Z' - 'A' + 1)) + 'A';
                Log.d(MainActivity.class.getSimpleName(), "c = " + c);
//                buffer.append(String.valueOf((char) (Math.random() * max) + min));
                buffer.append(String.valueOf((char) c));
            }
            chatMessage.setMsgContent(buffer.toString());
            buffer.setLength(0);
            // 或者：
            // buffer.delete(0, buffer.length());
            mChatMessages.add(chatMessage);
            Log.d(MainActivity.class.getSimpleName(), "i = " + i + "\n===========分割线==============");
        }
    }

    private void setViewsData() {
        mChatDetailAdapter = new ChatDetailAdapter(MainActivity.this);
        mChatDetailAdapter.setChatMessages(mChatMessages);
        mRecyclerView.setAdapter(mChatDetailAdapter);
//        mRecyclerView.smoothScrollToPosition(mChatDetailAdapter.getItemCount());
//        mLinearLayoutManager.scrollToPositionWithOffset(mChatDetailAdapter.getItemCount() + 1, 0);
        mRecyclerView.scrollToPosition(mChatDetailAdapter.getItemCount() - 1);
        mChatDetailAdapter.setOnRecyclerViewItemLongClick(new ChatDetailAdapter.OnRecyclerViewItemLongClick() {
            @Override
            public void onItemLongClick(View childView, MotionEvent event, int position) {
                Toast.makeText(MainActivity.this, mChatMessages.get(position).getMsgContent(), Toast.LENGTH_SHORT).show();
            }
        });
    }

}

由于作者水平有限，语言描述及代码实现中难免有纰漏，望各位看官多提宝贵意见！

Hello , World !

感谢所有！








windfallsheng
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
PopupWindowMenuIM:基于RecyclerView实现的仿IM聊天界面，item长按根据触摸位置弹出对话框
05-10
PopupWindowMenuIM 基于RecyclerView实现的仿IM聊天界面，item长按根据触摸位置弹出对话框 ;; see . 由于作者水平有限，语言描述及代码实现中难免有纰漏，望各位看官多提宝贵意见！ Hello , World ! 感谢所有！
RecyclerView添加多个样式不同的Item布局
u013245095的博客
06-19 1万+
RecyclerView加载一种Item显示，往往不能满足我们在项目中开发的需要，下面我来给大家演示一下RecyclerView如何给它添加多个布局文件 那么现在问题来了，这样实现的方式有很多种，1、通过RecyclerView中的Adapter中的getItemType();进行判断加载不的布局属于哪一种样式， 通过样式来加载，但是这儿就会写很多的代码，比如每一个viewHolder对应一种
RecyclerView多样式Item布局设计
T丶快乐知己丬
09-12 3113
说明 因为RecyclerView使用灵活方便导致开发中使用越来越频繁，特别是多样式的Item布局使用RecyclerView来显示比起以前使用ScrollView嵌套ListView，GridView要简单灵活多了。通过参考别人对RecyclerView多条目样式封装，也尝试着写了一个关于RecyclerView多样式的Item布局。 先看个效果图： 实现原理 实现
Android基础之--RecyclerView实现多种Item布局
最新发布
star_nwe的博客
02-21 1103
本示例实现两种不通类型的Item布局，因此需要自定义2个ViewHolder，在ViewHolder中根据Id去获取各自Item布局中的控件；= null= nullinit{= null= nullinit{这里定义常量主要是作为重写getItemViewType方法的判断条件，即哪种情况下显示哪种Item布局；如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。
RecyclerView点击事件之修改被点击的item样式
qq_46653910的博客
03-30 2053
在写RecyclerVIew的适配器时，我们都要重写一个方法onBindViewHolder，这个方法在何时会执行呢？只要有一个item进入了手机界面（只要有item进入了手机界面，那么就会被加载），那么这个方法就会执行，对于的position就是这个item的下标。 比如现在有界面中14个测试item 我们在onBindViewHolder方法中通过Log.d输出以下内容 Log.d("onBindViewHolder","item"+position); 可以看到确实输出了14个item.
RecyclerView多样式Item优雅方案之旅
郭霖
08-19 1596
/ 今日科技快讯 /近日，百度世界大会2021上，大会首发环节，百度创始人、董事长兼首席执行官李彦宏首次提出了“汽车机器人”概念，并发布了Apollo“汽车机器人”。配置方面，百度...
RecyclerView的Item多种类型的选择和不同样式展示之利用框架方法实现
willba的博客
06-06 1800
同样的道理,我们直接上效果图: 从这个示意图中也可以看出:其也是由三部分组成,头部+RecyclerView+尾部,只不过其头部比较复杂,所以我们采用一个第三方的框架: compile 'com.jakewharton:butterknife:7.0.1' //recyclerView头部框架 compile 'com.bartoszlipinski.recyclerview
IM即时通讯聊天系统源码UNIAPP开源费附教程
04-24
IM即时通讯聊天系统源码UNIAPP开源项目 开放28018 8383 1236端口 演示ys.bzoss.top 安装mongodb 修改端口为28018 删除全部禁用函数 命令安装： mongodb安装 cd /www/server cd mongodb cd bin ./configure make &...
飞享即时聊天系统web客户端，即时通讯IM，使用vue框架，基于websocket实现基于json的文本协议实现即时通信
05-31
飞享即时聊天系统web客户端，即时通讯IM，使用vue框架，基于websocket实现基于json的文本协议实现即时通信。消息与android客户端同步，支持文字，图片发送，支持视频相关消息显示。支持与android端互通音视频通话。
基于Python的简易安全即时通讯系统（类似于QQ聊天软件）.zip
06-09
资源包含文件：设计报告wrod+客户端服务端源码及数据库文件 本系统的核心控制逻辑在于 C-S-C 之间发送的数据中包含了操作码，接收方通过对接收码的识别作出规定的操作。例如服务端接收添加好友的操作码会执行 add_...
Uniapp实现IM聊天即时通讯源码.zip
05-09
Uniapp实现IM聊天即时通讯功能列表： 私聊、群聊、会话列表，文字、表情，图片，语音，视频消息 支持发送自定义业务消息，比如处方，订单，红包，地理位置等 手机通知栏提醒，厂商通道支持：iOS，谷歌FCM，华为，...
一个用RecyclerView实现的画廊效果，被选中item居中放大，效果很自然。
05-22
一个用RecyclerView实现的画廊效果，被选中item居中放大，效果很自然。
Android RecycleView实现不同样式Item样式效果完美解决
tasty
11-03 3411
 在我们开发过程中经常会遇到需要我们展示不同样式列表的情况，通常我们都会使用ListView展示列表，然后实现BaseAdapter两个方法，即：getViewTypeCount() 和 getItemViewType(int position)即可实现 不过在Android Nougat Google发布了RecycleView之后，大家都纷纷弃ListView ,GridView，而使用Re...
RecyclerView用法--展示多种类型Item数据
jb_home的博客
01-04 1047
如题，本文主要介绍RecyclerView的基本使用方法，像ListView一样展示多种类型的Item数据。 首先构造一个实体类：ItemPO，用来表示每个Item代表的数据类型： import java.io.Serializable; public class ItemPO implements Serializable { private static final long serialVersionUID = 7879752396036182745L; private
IM会话列表刷新优化思考
star_nwe的博客
01-05 560
DiffUtil比较两个数据源(一般是List)的差异（Diff），Callback中比对时传递的参数是 positionSortedList能完成数据集的排序和去重，Callback中比对时，传递的参数是ItemData都能完成自动定向刷新 + 部分绑定，一种自动定向刷新的手段DiffUtil: 检测不出重复的，会被认为是新增的DiffUtil高级用法支持子线程中处理数据，而SortList不支持。
RecyclerView定制：通用ItemDecoration及全展开RecyclerView的实现
happylishang的专栏
12-27 2105
Android L面世之后，Google就推荐在开发项目中使用RecyclerView来取代ListView，因为RecyclerView的灵活性跟性能都要比ListView更强，但是，带来的问题也不少，比如：列表分割线都要开发者自己控制，再者，RecyclerView的测量与布局的逻辑都委托给了自己LayoutManager来处理，如需对RecyclerView进行改造，也要对其LayoutManager定制
设置RecyclerView某Item背景色
热门推荐
Magic1an的博客
03-05 1万+
还是先上效果图，我们在查看小说目录时，可以看到正在阅读的章节字体为红色，其余章节字体为黑色。 主要解决方式来自于https://blog.csdn.net/qq_34882161/article/details/54944188，感谢！ 思路在于将当前章节的章节名传递给adapter，然后调用notifydata，此时会调用onBindViewHolder重新绘制，我们在这个函数中进行比...
使用tio实现im 即时通讯
05-23
要实现IM即时通讯，您需要编写一个支持网络连接的命令行程序，并使用TIO提供的WebSocket API来实现与浏览器的通信。 以下是实现IM即时通讯的一些基本步骤： 1. 设计数据交换协议： 在IM系统中，数据交换协议非常...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

windfallsheng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值