RecyclerView实现聊天界面

最新推荐文章于 2024-03-12 17:29:00 发布

Jackie·Tang

最新推荐文章于 2024-03-12 17:29:00 发布

阅读量414

点赞数

分类专栏： Android 文章标签： android

本文链接：https://blog.csdn.net/weixin_43323172/article/details/110384445

版权

Android 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

添加RecyclerView扩展

在app/build.gradle里面添加

implementation 'androidx.recyclerview:recyclerview:1.0.0'

在Activity页面引入RecyclerView

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

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_msg"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"></androidx.recyclerview.widget.RecyclerView>

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/et_input"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:hint="Type something here"
            android:maxLines="2"></EditText>

        <Button
            android:id="@+id/btn_send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send"></Button>

    </LinearLayout>

</LinearLayout>

布局界面的效果
在这里插入图片描述
此处用到高度自动适应，在LinearLayout布局下，要自动适应的View设置layout_height="0dp"或者layout_height=“0dp”，layout_weight=“1”，其他View设置固定高度或者宽度或者wrap_content，那么设置了layout_weight="1"的View就会自动适应

新建message_item.xm用来动态载入

<?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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ll_left"
        android:layout_gravity="left"
        android:background="@drawable/message_left">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_left"
            android:layout_gravity="center"
            android:textColor="#fff"></TextView>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ll_right"
        android:layout_gravity="right"
        android:background="@drawable/message_right">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tv_right"
            android:layout_gravity="center"
            android:textColor="#fff"></TextView>
    </LinearLayout>

</LinearLayout>

此处接收到的消息和发送出去的消息写在一起，我们要显示的时候可以设置另一个不显示
效果图
在这里插入图片描述

创建MessageAdapter适配器

package cn.edu.zufe.appsecond.adapter;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import org.w3c.dom.Text;

import java.util.List;

import cn.edu.zufe.appsecond.bean.Message;
import cn.edu.zufe.appsecond.R;

public class MessageAdapter extends RecyclerView.Adapter<MessageAdapter.ViewHolder> {

    private List<Message> mMessageList;

    static class ViewHolder extends RecyclerView.ViewHolder{

        LinearLayout ll_left;
        LinearLayout ll_right;
        TextView tv_left;
        TextView tv_right;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            ll_left = (LinearLayout) itemView.findViewById(R.id.ll_left);
            ll_right = (LinearLayout) itemView.findViewById(R.id.ll_right);
            tv_left = (TextView) itemView.findViewById(R.id.tv_left);
            tv_right = (TextView) itemView.findViewById(R.id.tv_right);
        }
    }

    public MessageAdapter(List<Message> messageList){
        mMessageList = messageList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.message_item, parent, false);
        final ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        Message message = mMessageList.get(position);
        if(message.getType() == Message.TYPE_RECEIVED){
            holder.ll_left.setVisibility(View.VISIBLE);
            holder.ll_right.setVisibility(View.GONE);
            holder.tv_left.setText(message.getContent());
        } else{
            holder.ll_left.setVisibility(View.GONE);
            holder.ll_right.setVisibility(View.VISIBLE);;
            holder.tv_right.setText(message.getContent());
        }
    }

    @Override
    public int getItemCount() {
        return mMessageList.size();
    }

}

MessageActivity的代码

package cn.edu.zufe.appsecond;

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

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

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

import cn.edu.zufe.appsecond.adapter.MessageAdapter;
import cn.edu.zufe.appsecond.bean.Message;

public class MessageActivity extends AppCompatActivity {

    private List<Message> messageList = new ArrayList<>();
    private EditText et_input;
    private Button btn_send;
    private RecyclerView rv_msg;
    private MessageAdapter adapter;
    private LinearLayoutManager layoutManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_message);
        initMessage();

        et_input = (EditText)findViewById(R.id.et_input);
        btn_send = (Button)findViewById(R.id.btn_send);
        rv_msg = (RecyclerView)findViewById(R.id.rv_msg);
        adapter = new MessageAdapter(messageList);
        layoutManager = new LinearLayoutManager(this);
        rv_msg.setLayoutManager(layoutManager);
        rv_msg.setAdapter(adapter);
        btn_send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content = et_input.getText().toString();
                if(!"".equals(content)){
                    Message message = new Message(content, Message.TYPE_SENT);
                    messageList.add(message);
                    //有新消息时刷新
                    adapter.notifyItemInserted(messageList.size() - 1);
                    //滚动到最后一条消息处
                    rv_msg.scrollToPosition(messageList.size() - 1);
                    et_input.setText("");
                }
            }
        });
    }

    private void initMessage(){
        Message message = new Message("Hello jackie", Message.TYPE_RECEIVED);
        messageList.add(message);
        message = new Message("Hello jingmeng", Message.TYPE_SENT);
        messageList.add(message);
        message = new Message("Have you finished the homework", Message.TYPE_RECEIVED);
        messageList.add(message);
    }
}