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