先上效果图：
giphy.gif
界面布局设计：
image.png
- 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"
tools:context="com.example.chatui.MainActivity"
android:background="#f4f4f4">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/blue_sky">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="范冰冰"
android:textColor="@color/white"
android:textSize="16sp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:padding="8dp">
<EditText
android:id="@+id/et_input"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="35dp"
android:padding="2dp"
android:background="@drawable/shape_chat_et"/>
<TextView
android:layout_width="60dp"
android:layout_height="35dp"
android:onClick="sendMsg"
android:layout_marginLeft="5dp"
android:background="@drawable/shape_chat_sendbtn"
android:gravity="center"
android:textSize="16sp"
android:textColor="@color/white"
android:text="发送"/>
</LinearLayout>
</LinearLayout>
activity_main.xml布局预览：
image.png
- item布局
这里直接用的两种发消息布局在一个item里面，用type来显示隐藏对应类型的消息。扩展功能的话，需要用多布局控制item，如扩展发图片，语音的item。
<?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">
<RelativeLayout
android:id="@+id/rl_receive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:id="@+id/iv_avator_recieve"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@mipmap/avator1"
android:layout_marginRight="8dp"/>
<TextView
android:id="@+id/tv_nickname_recieve"
android:text="范冰冰"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/iv_avator_recieve"
android:layout_marginTop="5dp"/>
<TextView
android:id="@+id/tv_msg_receive"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/left_messages"
android:text="你发的"
android:layout_toRightOf="@id/iv_avator_recieve"
android:layout_below="@id/tv_nickname_recieve"
android:layout_marginTop="5dp"
android:gravity="center"/>
</RelativeLayout>
<LinearLayout
android:id="@+id/ll_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="right">
<TextView
android:id="@+id/tv_nickname_send"
android:text="李晨"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"/>
<TextView
android:id="@+id/tv_msg_send"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/right_messages"
android:text="我发的"
android:layout_marginTop="5dp"
android:gravity="center"/>
</LinearLayout>
<ImageView
android:id="@+id/iv_avator_send"
android:layout_width="30dp"
android:layout_height="30dp"
android:background="@mipmap/avator2"
android:layout_marginLeft="8dp"/>
</LinearLayout>
</LinearLayout>
item布局预览：
image.png
- 消息实体类，这里只用了最基础的发送类型和消息内容：
public class MsgContentBean {
private int type;
private String content;
public MsgContentBean(int type, String content) {
this.type = type;
this.content = content;
}
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
- Mainactivity
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.EditText;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import com.zhy.adapter.recyclerview.CommonAdapter;
import com.zhy.adapter.recyclerview.base.ViewHolder;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ArrayList<MsgContentBean> datas = new ArrayList<>();
private RecyclerView recyclerView;
private CommonAdapter<MsgContentBean> adapter;
private EditText etInput;
private final int RECIEVE = 1;
private final int SEND = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
datas.add(new MsgContentBean(RECIEVE,"晚上去看电影啊"));
datas.add(new MsgContentBean(RECIEVE,"有空吗"));
datas.add(new MsgContentBean(SEND,"我看看有没有时间吧，我很忙的"));
etInput = (EditText) findViewById(R.id.et_input);
recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
adapter = new CommonAdapter<MsgContentBean>(getApplicationContext(),R.layout.item_chat,datas) {
@Override
protected void convert(ViewHolder holder, MsgContentBean msgContentBean, int position) {
RelativeLayout llRecieve = holder.getView(R.id.rl_receive);
LinearLayout llSend = holder.getView(R.id.ll_send);
if(msgContentBean.getType() == 0){
llRecieve.setVisibility(View.GONE);
llSend.setVisibility(View.VISIBLE);
holder.setText(R.id.tv_msg_send,msgContentBean.getContent());
}else{
llRecieve.setVisibility(View.VISIBLE);
llSend.setVisibility(View.GONE);
holder.setText(R.id.tv_msg_receive,msgContentBean.getContent());
}
}
};
recyclerView.setAdapter(adapter);
}
//点击发送消息
public void sendMsg(View view){
String content = etInput.getText().toString().trim();
datas.add(new MsgContentBean(SEND,content));
adapter.notifyDataSetChanged();
etInput.setText("");
//滚动到底部
recyclerView.smoothScrollToPosition(datas.size() - 1);
}
}
注：
- activity在manifest中配置android:windowSoftInputMode="adjustPan"，输入消息将内容订上去
- 不停输入recyclerview始终滚动到底部，使用recyclerView.smoothScrollToPosition(datas.size() - 1)
好了，完成了，是不是可以很快速实现？
网友评论