30分钟手动实现QQ聊天界面

github代码传送门

先上效果图：

giphy.gif

界面布局设计：

image.png

1. 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

2. 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

3. 消息实体类，这里只用了最基础的发送类型和消息内容：

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;
    }
}

4. 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);
    }
}

注：

1. activity在manifest中配置android:windowSoftInputMode="adjustPan"，输入消息将内容订上去
2. 不停输入recyclerview始终滚动到底部，使用recyclerView.smoothScrollToPosition(datas.size() - 1)

好了，完成了，是不是可以很快速实现？