前提:
准备两个.png图片,分别为message_left.png和message_right.png,分别作为接收到消息和已发送消息的背景图片。为实现背景图片根据内容被适当拉伸,需要将以上两个图片制作成Nine-Patch图片,这是一种经过特殊处理的图片,可以指定那些区域能够被拉伸,那些区域不可以。
Nine-Patch制作工具为draw9patch.bat,在Android SDK的tools文件下。使用前需要在环境变量中配置JDK的bin目录。配置完成后,双击打开draw9patch.bat,添加图片后对其设定。
背景图片准备好了之后,创建一个 android project项目,不用更改,直接使用默认的MainActivity作为启动活动。
接下来就可以开始设计聊天界面了。设计步骤如下:
1. 聊天界面需要用到RecyclerView控件,需要在app/build.gradle中添加其依赖库。在dependencies闭包中添加库compile ‘com.android.support:recyclerview-v7:24.2.1’,然后点击Sync同步gradle文件。
2. 编写聊天主界面activity_main.xml,将RecyclerView控件添加进去。RecyclerView用于显示聊天的消息内容。然后增加一个线性布局,用于放置消息编辑框EditText和发送按钮Button。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#d8e08e">
<android.support.v7.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="请输入..."
android:maxLines="2"/>
<Button
android:id="@+id/send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="发送"/>
</LinearLayout>
</LinearLayout>
3.编写RecyclerView子项布局msg_item.xml,即为消息编写布局。外层为线性布局,布局方向为垂直方向。外层布局内有两个线性布局,分别为left_layout和right_layout。接收到的消息使用布局left_layout,该布局的背景图片就是我们之前准备好的message_left。left_layout布局中还有一个文本显示框TextView,用于显示接收到的消息内容。发送的消息使用right_layout布局,背景图片为message_right。
<?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/message_left">
<TextView
android:id="@+id/left_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:textColor="#fff"
android:text="收到的消息"/>
</LinearLayout>
<LinearLayout
android:id="@+id/right_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:background="@drawable/message_right">
<TextView
android:id="@+id/right_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"/>
</LinearLayout>
</LinearLayout>
4.编写消息实体类Msg
public class Msg {
public static final int TYPE_RECEIVED=0;//代表一条收到的消息
public static final int TYPE_SENT=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;
}
}
5.创建RecyclerView的适配器类,该类继承自RecyclerView.Adapter
public class MsgAdapter extends RecyclerView.Adapter<MsgAdapter.ViewHolder> {
private List<Msg> mMsgLit;
//内部类,用于缓存控件实例
static class ViewHolder extends RecyclerView.ViewHolder{
LinearLayout left_layout;
LinearLayout right_layout;
TextView leftMsg;
TextView rightMsg;
public ViewHolder(View view){
super(view);
left_layout=(LinearLayout)view.findViewById(R.id.left_layout);
right_layout=(LinearLayout)view.findViewById(R.id.right_layout);
leftMsg=(TextView)view.findViewById(R.id.left_msg);
rightMsg=(TextView)view.findViewById(R.id.right_msg);
}
}
public MsgAdapter(List<Msg> msgLit){
this.mMsgLit=msgLit;
}
//创建ViewHolder实例,并把加载出来的布局msg_item.xml传入到构造函数中
@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);
}
//用于对RecyclerView子项的数据进行赋值,在每个子项(消息)被滚动到屏幕内时执行
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
Msg msg=mMsgLit.get(position);
if(msg.getType()==Msg.TYPE_RECEIVED){
//如果是收到的消息,则显示左边的布局,右边的布局隐藏掉
holder.left_layout.setVisibility(View.VISIBLE);
holder.right_layout.setVisibility(View.GONE);
holder.leftMsg.setText(msg.getContent());
}else if(msg.getType()==Msg.TYPE_SENT){
holder.right_layout.setVisibility(View.VISIBLE);
holder.left_layout.setVisibility(View.GONE);
holder.rightMsg.setText(msg.getContent());
}
}
@Override
public int getItemCount() {
return mMsgLit.size();
}
}
6.最后,修改MainActivity,为RecyclerView初始化数据,并为“发送”按钮,添加监听器,注册点击事件
public class MainActivity extends AppCompatActivity {
private List<Msg> msgList=new ArrayList<>();
private EditText inputText;
private Button send;
private RecyclerView msgRecyclerView;
private MsgAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化消息内容
initMsgs();
//获得控件实例
inputText=(EditText) findViewById(R.id.input_text);
send=(Button)findViewById(R.id.send);
msgRecyclerView=(RecyclerView)findViewById(R.id.msg_recycler_view);
//布局管理器,用于RecyclerView
LinearLayoutManager layoutManager=new LinearLayoutManager(this);
msgRecyclerView.setLayoutManager(layoutManager);
//创建适配器,用于将数据与RecyclerView关联起来
adapter=new MsgAdapter(msgList);
msgRecyclerView.setAdapter(adapter);
//给发送按钮注册监听器,实现消息发送
send.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String content=inputText.getText().toString();
if(!content.equals("")){
Msg msg=new Msg(content,Msg.TYPE_SENT);
msgList.add(msg);
//刷新RecyclerView,通知RecyclerView有新的数据加入
adapter.notifyItemInserted(msgList.size()-1);
//定位到最后一行数据,即定位到最新发送的消息
msgRecyclerView.scrollToPosition(msgList.size()-1);
inputText.setText("");
}
}
});
}
//初始化数据源
private void initMsgs(){
Msg msg1=new Msg("Hello,girl",Msg.TYPE_RECEIVED);
msgList.add(msg1);
Msg msg2=new Msg("Hello,who is that",Msg.TYPE_SENT);
msgList.add(msg2);
Msg msg3=new Msg("This is Claire,nice to see you",Msg.TYPE_RECEIVED);
msgList.add(msg3);
}
}
7.运行项目,即可看到刚刚设计好的聊天界面,且可以输入信息,点击“发送”按钮进行发送。
菜鸟一只,只能边看书,边记录一些觉得重要的知识点。