【Android】RecyclerView实现聊天界面Demo

1.效果

2.工程结构

3.聊天内容圆角

左侧内容圆角（shape_0111_10dp_corners）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

右侧内容圆角（shape_1011_10dp_corners）

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#8BC34A" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp" />
</shape>

4.聊天内容布局（list_item）

在一个文件中同时声明左右两侧聊天内容气泡，发送的信息则将左侧设置为GONE右侧设置为VISIBLE，接收时相反。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical">
    <!--左侧聊天内容    -->
    <LinearLayout
        android:id="@+id/left_bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:dividerPadding="10dp"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:cardCornerRadius="6dp"
            app:cardElevation="4dp">

            <ImageView
                android:id="@+id/left_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"></ImageView>
        </androidx.cardview.widget.CardView>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/left_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#9F9F9F"
                android:textSize="10dp"></TextView>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:background="@drawable/shape_0111_10dp_corners"
                android:orientation="horizontal"
                android:padding="10dp">

                <TextView
                    android:id="@+id/left_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text=""></TextView>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    <!--右侧聊天内容    -->
    <LinearLayout
        android:id="@+id/right_bubble"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:dividerPadding="10dp"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:orientation="vertical">

            <TextView
                android:id="@+id/right_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#9F9F9F"
                android:textSize="10dp"></TextView>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="2dp"
                android:background="@drawable/shape_1011_10dp_corners"
                android:orientation="horizontal"
                android:padding="10dp">

                <TextView
                    android:id="@+id/right_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"></TextView>
            </LinearLayout>
        </LinearLayout>

        <androidx.cardview.widget.CardView

            android:layout_width="50dp"
            android:layout_height="50dp"
            app:cardCornerRadius="6dp"
            app:cardElevation="4dp">

            <ImageView
                android:id="@+id/right_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"></ImageView>
        </androidx.cardview.widget.CardView>
    </LinearLayout>
</LinearLayout>

5.聊天类实体

package com.example.myapplication.myrecyclerview.model;

/**
 * 聊天类实体
 */
public class ChatModel {
    //发送类型
    public static final int SEND = 0;
    //接收类型
    public static final int RECEIVE = 1;


    private int imgId;
    private String name;
    private String content;

    //收发类型
    private int type;

    public ChatModel(int imgId, String name, String content, int type) {
        this.imgId = imgId;
        this.name = name;
        this.content = content;
        this.type = type;
    }

    public int getImgId() {
        return imgId;
    }

    public String getName() {
        return name;
    }

    public String getContent() {
        return content;
    }

    public int getType() {
        return type;
    }

}

6.适配器

package com.example.myapplication.myrecyclerview;

import android.graphics.drawable.Drawable;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.example.myapplication.R;
import com.example.myapplication.myrecyclerview.model.ChatModel;

import java.util.List;

public class ChatAdapter extends RecyclerView.Adapter<ChatAdapter.ViewHolder> {
    //存放数据
    List<ChatModel> chatModelList;


    //通过构造函数传入数据
    public ChatAdapter(List<ChatModel> dataList) {
        this.chatModelList = dataList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //布局加载器
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
        return new ViewHolder(view);
    }

    /**
     * 位置对应的数据与holder进行绑定
     *
     * @param holder
     * @param position
     */
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ChatModel chatModel = chatModelList.get(position);
        if (chatModel.getType() == ChatModel.SEND) {
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.rightNameTextView.setText(chatModel.getName());
            holder.rightContentTextView.setText(chatModel.getContent());
            holder.rightImageView.setImageResource(chatModel.getImgId());
        } else {
            holder.rightLayout.setVisibility(View.GONE);
            holder.leftLayout.setVisibility(View.VISIBLE);
            holder.leftNameTextView.setText(chatModel.getName());
            holder.leftContentTextView.setText(chatModel.getContent());
            holder.leftImageView.setImageResource(chatModel.getImgId());
        }

    }

    /**
     * 获取数据长度
     *
     * @return
     */
    @Override
    public int getItemCount() {
        return chatModelList.size();
    }

    /**
     * 缓存页面布局，页面快速滚动时不必每次都重新创建View
     */
    static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView leftImageView;
        TextView leftNameTextView;
        TextView leftContentTextView;
        LinearLayout leftLayout;

        ImageView rightImageView;
        TextView rightNameTextView;
        TextView rightContentTextView;
        LinearLayout rightLayout;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            leftImageView = (ImageView) itemView.findViewById(R.id.left_image);
            leftContentTextView = (TextView) itemView.findViewById(R.id.left_content);
            leftNameTextView = (TextView) itemView.findViewById(R.id.left_name);
            leftLayout = (LinearLayout) itemView.findViewById(R.id.left_bubble);

            rightImageView = (ImageView) itemView.findViewById(R.id.right_image);
            rightContentTextView = (TextView) itemView.findViewById(R.id.right_content);
            rightNameTextView = (TextView) itemView.findViewById(R.id.right_name);
            rightLayout = (LinearLayout) itemView.findViewById(R.id.right_bubble);

        }
    }
}

7.Activity

package com.example.myapplication.myrecyclerview;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.example.myapplication.R;
import com.example.myapplication.myrecyclerview.model.ChatModel;

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

public class RecyclerActivity extends AppCompatActivity {
    List<ChatModel> chatModelList = new ArrayList<ChatModel>();
    RecyclerView recyclerView;
    ChatAdapter chatAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);
        initRecycler();
        this.setTitle("😂");

        Button sendBtn = (Button) findViewById(R.id.send_btn);
        EditText editText = (EditText) findViewById(R.id.content_input);

        sendBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String msg = editText.getText().toString();
                if (!msg.isEmpty()) {
                    sendMessage(msg);
                    reply(msg);
                    editText.setText("");
                } else {
                    Toast.makeText(RecyclerActivity.this, "Cant be empty！", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

    private void initRecycler() {
        chatModelList.clear();
        recyclerView = (RecyclerView) findViewById(R.id.my_recyclerView);
        //给recyclerView创建布局方式
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        //创建适配器
        chatAdapter = new ChatAdapter(chatModelList);
        recyclerView.setAdapter(chatAdapter);
    }

    /**
     * 发送信息
     *
     * @param message
     */
    void sendMessage(String message) {
        ChatModel chatModel = new ChatModel(R.drawable.image, "金城武", message, ChatModel.SEND);
        chatModelList.add(chatModel);
        chatAdapter.notifyItemInserted(chatModelList.size() - 1);
        recyclerView.scrollToPosition(chatModelList.size() - 1);
    }

    /**
     * 接收信息
     *
     * @param message
     */
    void receiveMessage(String message) {
        ChatModel chatModel = new ChatModel(R.drawable.image3, "邱淑贞", message, ChatModel.RECEIVE);
        chatModelList.add(chatModel);
        chatAdapter.notifyItemInserted(chatModelList.size() - 1);
        recyclerView.scrollToPosition(chatModelList.size() - 1);
    }

    /**
     * 回复
     * @param msg
     */
    void reply(String msg){
        String rMsg="";
        switch (msg){
            case "hello":
                rMsg="hello! How are you？";
                break;
            case  "How old are you?":
                rMsg="22";
                break;
        }
        if(!rMsg.isEmpty()){
            receiveMessage(rMsg);
        }
    }

}