安卓編寫精美的聊天界面

這個小項目我做了差不多一周，太懶了太懶了，摳圖也扣了很久。這博客是來記錄下我的寫代碼過程。沖沖沖！

一、前期工作

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;

            }
        });
    }

 

 

 最終效果圖