安卓编写精美的聊天界面

2021-09-09 11:46:46

这个小项目我做了差不多一周，太懒了太懒了，抠图也扣了很久。这博客是来记录下我的写代码过程。冲冲冲！

一、前期工作

1.我们应该先准备两个聊天框，我到网上找了两张并且抠了图。（左边图命名：pic_right，右边图命名：left7）

2.创建一个项目，并将两张图片存放到Android studio项目的res目录下的drawable中（我是放在新建的drawable-xhdpi文件夹，因为drawable目录没有指定具体的分辨率，一般不使用放置图片）

你也可以把图片弄得更好一点，用create 9-patch，因为我的图片刚刚好，所以就没有弄了，9妹太烦了。

3.添加扩展RecyclerView

网上很多帖子都是用support库的，但是安卓逐渐淘汰support之前的版本，Android studio 导入support.v7也会出错。现在改成在app下的buid.gradle中的dependencies中添加下面这句话，然后sync now

implementation ‘androidx.recyclerview:recyclerview:1.0.0‘

二、代码编写

1、编写主界面，activity_main.xml

编写了一个RecyclerView用于显示聊天的消息内容，EditText用于输入消息，Button用于发送消息

<?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="match_parent"
    android:background="#d8e0e8">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/msg_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_text"
            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"
            android:textAllCaps="false"/>

    </LinearLayout>


</LinearLayout>

效果图：

2.创建一个定义消息的类，Msg.java

/**
 * 定义消息的实体类
 */
public class Msg {
    //这是type类型的值
    public static final int TYPE_RECEIVE=0;//表示收到的一条信息
    public static final int TYPE_SEND=1;//表示发出的一条信息
    //content表示消息的内容，type表示消息的类型
    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;
    }
}

3.编写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"
    android:padding="10dp">
    <!-- 左边信息布局-->
    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:background="@drawable/left7">
        <!--android:maxLines="7"，最多显示7行。（这个和android:singleline = "true"效果一样）
         android:ellipsize="end"，这个意思就是多出来的字符用英语省略号“...”代替,“end”表示省略号在末尾显示。可选的属性有："start"：显示在开头，"middle"：显示在中间，"marquee"：跑马灯一样显示。-
         android:maxEms="7",这个代表最多显示7个字符-->
        <TextView
            android:id="@+id/left_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="25dp"
            android:ellipsize="end"
            android:gravity="left"
            android:maxEms="10"
            android:maxLines="7"

            android:textColor="#fff"
            android:textSize="20dp"
            android:typeface="monospace" />
    </LinearLayout>
    <!-- 右边信息布局-->
    <LinearLayout
        android:id="@+id/right_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/pic_right">

        <TextView
            android:id="@+id/right_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="25dp"
            android:gravity="left"
            android:textColor="#fff"
            android:textSize="20dp"
            android:typeface="monospace"
            android:maxLines="7"
            android:ellipsize="end"
            android:maxEms="10"
            />
    </LinearLayout>
</LinearLayout>

效果图

4.创建RecyclerView的适配器类，MsgAdapter.java

import org.w3c.dom.Text;

import java.util.List;

public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHold>{
    private List<Msg> mMsgList;

    static class ViewHold extends RecyclerView.ViewHolder{
        LinearLayout leftLayout;
        LinearLayout rightLayout;
        TextView leftMsg;
        TextView rightMsg;
        public ViewHold(@NonNull View itemView) {
            super(itemView);
            leftLayout=(LinearLayout)itemView.findViewById(R.id.left_layout);
            rightLayout=(LinearLayout)itemView.findViewById(R.id.right_layout);
            leftMsg=(TextView)itemView.findViewById(R.id.left_msg);
            rightMsg=(TextView)itemView.findViewById(R.id.right_msg);
        }
    }
    public MsgAdapter(List<Msg> msgList){
        mMsgList=msgList;
    }
    @NonNull
    @Override
    public MsgAdapter.ViewHold onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_item,parent,false);
        return new ViewHold(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MsgAdapter.ViewHold holder, int position) {
        Msg msg=mMsgList.get(position);//position是当前子项在集合中的位置，通过position参数得到当前项的Msg实例
        if(msg.getType()==Msg.TYPE_RECEIVE){
            //如果是收到的信息，则显示左边的布局信息，将右边的信息隐藏
            holder.leftLayout.setVisibility(View.VISIBLE);
            holder.rightLayout.setVisibility(View.GONE);
            holder.leftMsg.setText(msg.getContent());
        }else{
            //若是发出的信息，则显示右边的布局信息，隐藏左边的布局信息
            holder.rightLayout.setVisibility(View.VISIBLE);
            holder.leftLayout.setVisibility(View.GONE);
            holder.rightMsg.setText(msg.getContent());
        }

    }

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

5.最后到MainActivity.java

为RecyclerView初始化一些数据，并给发送按钮加入点击事件

package com.example.uibestpractive;

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 android.widget.LinearLayout;

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

public class MainActivity extends AppCompatActivity {
    private List<Msg> msgList=new ArrayList<>();
    private Button send;
    private EditText inputText;
    private RecyclerView msgRecyclerView;
    private MsgAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();//初始化UI控件
        initdata();//初始化数据


    }
    private void initView(){
        inputText=(EditText)findViewById(R.id.input_text);
        send=(Button)findViewById(R.id.send);
        msgRecyclerView=(RecyclerView)findViewById(R.id.msg_recycler_view);
    }
    private void initdata(){
        initmessage();//初始化信息
        LinearLayoutManager layoutManager=new LinearLayoutManager(MainActivity.this);
        msgRecyclerView.setLayoutManager(layoutManager);
        adapter=new MsgAdapter(msgList);
        msgRecyclerView.setAdapter(adapter);
    }
    private void initmessage(){
        Msg msg1=new Msg("hello guy",Msg.TYPE_RECEIVE);
        msgList.add(msg1);
        Msg msg2=new Msg("hello,who is that?",Msg.TYPE_SEND);
        msgList.add(msg2);
        Msg msg3=new Msg("This is Tom.Nice to meet you.",Msg.TYPE_RECEIVE);
        msgList.add(msg3);
   }

    @Override
    protected void onResume() {
        super.onResume();
        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content=inputText.getText().toString();
                if(!"".equals(content)){
                    //如果字符串不为空，则创建Msg对象
                    Msg msg=new Msg(content,Msg.TYPE_SEND);
                    msgList.add(msg);
                    adapter.notifyItemInserted(msgList.size()-1);//当有新消息是刷新RecyclerView中的显示
                    msgRecyclerView.scrollToPosition(msgList.size()-1);//将RecyclerView定位在最后一行
                    inputText.setText("");//清空输入框的内容
                    inputText.requestFocus();//输入光标回到输入框中
                }
            }
        });

} }

加一个键盘按enter键直接发送功能（在MainActivity.main的onResume()中添加代码）

@Override
    protected void onResume() {
        super.onResume();

        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String content=inputText.getText().toString();
                if(!"".equals(content)){
                    //如果字符串不为空，则创建Msg对象
                    Msg msg=new Msg(content,Msg.TYPE_SEND);
                    msgList.add(msg);
                    adapter.notifyItemInserted(msgList.size()-1);//当有新消息是刷新RecyclerView中的显示
                    msgRecyclerView.scrollToPosition(msgList.size()-1);//将RecyclerView定位在最后一行
                    inputText.setText("");//清空输入框的内容
                    inputText.requestFocus();//输入光标回到输入框中
                }
            }
        });
        inputText.setOnKeyListener(new EditText.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                // TODO Auto-generated method stub
                boolean flag=false;
                if (keyCode == KeyEvent.KEYCODE_ENTER) {
                    //这里写发送信息的方法
                    String content=inputText.getText().toString();
                    if(!"".equals(content)){
                        //如果字符串不为空，则创建Msg对象
                        Msg msg=new Msg(content,Msg.TYPE_SEND);
                        msgList.add(msg);
                        adapter.notifyItemInserted(msgList.size()-1);//当有新消息是刷新RecyclerView中的显示
                        msgRecyclerView.scrollToPosition(msgList.size()-1);//将RecyclerView定位在最后一行
                        inputText.setText("");//清空输入框的内容
                        inputText.requestFocus();//输入光标回到输入框中
                    }
                    flag=true;
                }
                return flag;

            }
        });
    }

最终效果图

安卓编写精美的聊天界面

码农公寓

相关文章