android聊天列表UI android聊天界面实现

转载

mob64ca141a683a 2023-08-21 23:11:03

文章标签 android聊天列表UI 聊天界面 Android聊天 android xml 文章分类 Android 移动开发

要编写聊天界面就肯定要有收到的消息和发出的消息，还需要准备两张气泡对话框的.9图，图片可以在千库网上下载，下载好后改成.9.png形式就可以了（不会的话可以百度点9图的制作）。由于一会会用到recyclerview，因此首先需要在app/build.gradle当中添加依赖库，如下所示：

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation'com.android.support:recyclerview-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
}

接下来编写主界面，修改activity_main.xml中的代码，如下所示：

<?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"
    android:background="#d8e0e8"
    tools:context="com.study.xda.web_view.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"

        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

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

        <Button
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SEND" />

    </LinearLayout>


</LinearLayout>

我们在主界面中放置了一个recyclerview用于显示聊天的消息和内容，又放置了一个EditText用于输入消息，还放置了一个button来发送消息。

然后定义消息的实体类，新建Msg，代码如下：

package com.study.xda.web_view;

/**
 * Created by Administrator on 2018/5/8.
 */

public class Msg {
    public static final int TYPE_RECEIVED = 0 ;
    public static final int TYPE_SEND = 1;
    private String content;
    private int type;

    public Msg(String content,int type){
        this.content = content;
        this.type =type;
    }

    public String getContent(){
        return content;
    }
    public int getType(){
        return type;
    }
}

Msg类中只有两个字段，content表示消息的内容，type表示消息的类型，TYPE_RECEIVED表示这是一条收到的消息，TYPE_SEND表示这是一条发出去的消息。

然后编写recyclerview子项的布局，新建msg_item.xml。代码如下所示:

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

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

        <TextView
            android:id="@+id/received_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:textColor="#123456"/>

    </LinearLayout>


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

        <TextView
            android:id="@+id/send_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="10dp"
            android:textColor="#123456"/>

    </LinearLayout>

</LinearLayout>

这里让收到的消息左对齐，发出的消息右对齐，并且分别使用bubble.9.png和bubbleright.9.png作为布景图。现在写好了就不用管这个布局了，稍后在代码中根据消息的类型来决定隐藏和显示哪种消息的布局就可以了。

然后需要创建recyclerview的适配器类，新建类MsgApadter，代码如下所示：

package com.study.xda.web_view;

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

import java.util.List;
import java.util.zip.Inflater;

/**
 * Created by Administrator on 2018/5/8.
 */

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

    private List<Msg> mMsgList;





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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Msg msg = mMsgList.get(position);
        //判断消息类型 如果是收到的消息 显示左边的消息布局，隐藏右边的消息布局
        if (msg.getType() == Msg.TYPE_RECEIVED){
            holder.received_layout.setVisibility(View.VISIBLE);
            holder.send_layout.setVisibility(View.GONE);
            holder.leftMsg.setText(msg.getContent());
         //判断消息类型 如果是发送的消息 显示右边的消息布局，隐藏左边的消息布局
        }else if (msg.getType() == Msg.TYPE_SEND){
            holder.send_layout.setVisibility(View.VISIBLE);
            holder.received_layout.setVisibility(View.GONE);
            holder.rightMsg.setText(msg.getContent());
        }
    }

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

    public class ViewHolder extends RecyclerView.ViewHolder {
        LinearLayout received_layout;
        LinearLayout send_layout;
        TextView leftMsg;
        TextView rightMsg;
        public ViewHolder(View view) {
            super(view);
            received_layout = view.findViewById(R.id.left_layout);
            send_layout =view.findViewById(R.id.right_layout);
            leftMsg =view.findViewById(R.id.received_msg);
            rightMsg =view.findViewById(R.id.send_msg);
        }
    }
    public MsgAdapter(List<Msg> msgList){
        mMsgList = msgList;
    }
}

以上代码跟一般的recyclerview的适配器代码基本一致，只不过在onBindViewHolder()方法中增加了对消息类型的判断。如果这条消息的收到的消息，则显示左边的布局，隐藏右边的布局，反之则隐藏左边布局显示右边布局，已经写得很清晰了。

最后修改MainActivity中的代码，来为recyclerview初始化一些数据，并给发送按钮加入点击事件，代码如下所示：

package com.study.xda.web_view;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

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

public class MainActivity extends AppCompatActivity {

    private List<Msg> msgList = new ArrayList<>();
    private EditText input_text;
    private Button bt_send;
    private RecyclerView mRecyclerView;
    private MsgAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化消息数据
        initMsg();
        input_text = findViewById(R.id.input);
        bt_send = findViewById(R.id.send);
        mRecyclerView = findViewById(R.id.recycler_view);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        adapter = new MsgAdapter(msgList);
        mRecyclerView.setAdapter(adapter);
        bt_send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String content = input_text.getText().toString();
                if (!"".equals(content)){
                    Msg msg = new Msg(content,Msg.TYPE_SEND);
                    msgList.add(msg);
                    //当有新消息时，调用notifyItemInserted方法刷新listview中的显示
                    adapter.notifyItemInserted(msgList.size()-1);
                    //将listview定位到最后一行
                    mRecyclerView.scrollToPosition(msgList.size()-1);
                    //新消息显示在listview中 清空输入框中的内容
                    input_text.setText("");
                }
            }
        });

    }

    private void initMsg() {
        Msg msg1 = new Msg("你可真是个小精灵鬼1111111111sadas asda sdasdasdasdasd", Msg.TYPE_RECEIVED);
        msgList.add(msg1);
        Msg msg2 = new Msg("呵呵，你这小东西真别致",Msg.TYPE_SEND);
        msgList.add(msg2);
        Msg msg3 = new Msg("兄dei 买挂吗？", Msg.TYPE_RECEIVED);
        msgList.add(msg3);
    }
}

在initMsg()方法中，我们先初始化了几条数据用于在recyclerview中显示，然后在发送按钮的点击事件里获取了EditText中的内容，做一个判断，如果内容不为null则创建出一个Msg对象，并把他添加到msgList列表中。之后调用适配器真的notifyItemInserted()方法，用于通知列表有新的数据插入，这样新的一条消息才能再recyclerview中显示，接着调用recyclerview的scrollToPosition()方法将显示的数据定位到最后一行，以保证一定可以看得到最后发出的一条消息，最后调用EditText的setText()方法将输入的内容清空。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。