安卓编写精美的聊天界面
这个小项目我做了差不多一周，太懒了太懒了，抠图也扣了很久。这博客是来记录下我的写代码过程。冲冲冲！
一、前期工作
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; } }); }
最终效果图
