Android smack聊天輸入框與RecyclerView的實現與兼容（ChatActivity界面佈局）--優化

Android smack聊天輸入框與RecyclerView的實現與兼容（ChatActivity界面佈局）

本文通過自己手寫的例子來看如何實現聊天輸入框以及RecyclerView與輸入框之間的相互適應。

開始之前，我們先自定義一個EditTextView

這個自定義的MyEditTextView是有作用的，主要爲了後面消息展示的時候去監控軟件盤的關閉，方便消息item的位置調整

package cn.xie.imchat.view;

import android.content.Context;
import android.util.AttributeSet;
import android.view.KeyEvent;
import android.widget.EditText;

/**
 * 攔截鍵盤向下的 EditTextView
 *
 * @author xiejinbo
 * @date 2019/9/29 0029 13:44
 */
public class MyEditTextView extends EditText {

    public MyEditTextView(Context context) {
        super(context);
    }

    public MyEditTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyEditTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    @Override
    public boolean onKeyPreIme(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == 1) {
            super.onKeyPreIme(keyCode, event);
            onKeyBoardHideListener.onKeyHide(keyCode, event);
            return false;
        }
        return super.onKeyPreIme(keyCode, event);
    }

    /**
     * 鍵盤監聽接口
     */
    OnKeyBoardHideListener onKeyBoardHideListener;

    public void setOnKeyBoardHideListener(OnKeyBoardHideListener onKeyBoardHideListener) {
        this.onKeyBoardHideListener = onKeyBoardHideListener;
    }

    public interface OnKeyBoardHideListener {
        void onKeyHide(int keyCode, KeyEvent event);
    }
}

首先，我們來看看整體輸入框佈局實現的效果

再來看看具體的佈局實現

下面的代碼就是上面截圖的具體實現。整個activity_chat.xml的layout佈局中，最外層是LinearLayout，包裹着兩個 RelativeLayout，分別是頂部標題欄、下面的輸入欄（+聊天信息展示），相信大家都能看得懂。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".activity.ChatActivity">

    <!--頂部標題-->
    <RelativeLayout
        android:id="@+id/title"
        style="@style/HeadRelativeLayout">

        <ImageView
            android:id="@+id/back"
            android:layout_centerVertical="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@mipmap/back"
            android:layout_marginLeft="10dp"/>

        <TextView
            android:id="@+id/chat_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="聊天人稱呼"
            android:textColor="@android:color/white"
            android:layout_centerVertical="true"
            android:layout_centerInParent="true"/>
    </RelativeLayout>

    <!--第一層次：底部輸入框 和 消息顯示框-->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--輸入框緊貼底部-->
        <RelativeLayout
            android:id="@+id/re_input_view"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/bg_content"
            android:layout_alignParentBottom="true">
            <ImageView
                android:layout_marginLeft="10dp"
                android:id="@+id/input_voice"
                android:layout_centerVertical="true"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@mipmap/voice" />
            <RelativeLayout
                android:id="@+id/send_more"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <ImageView
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:id="@+id/more"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:background="@mipmap/more"
                    />
                <TextView
                    android:visibility="gone"
                    android:id="@+id/send"
                    android:layout_marginLeft="5dp"
                    android:layout_width="40dp"
                    android:layout_height="30dp"
                    android:text="@string/send"
                    android:background="@android:color/holo_blue_light"
                    android:textColor="@android:color/white"
                    android:gravity="center|center_vertical"/>
            </RelativeLayout>

            <ImageView
                android:layout_marginLeft="10dp"
                android:id="@+id/input_emotion"
                android:layout_toLeftOf="@id/send_more"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@mipmap/emotion"
                android:layout_centerVertical="true"/>
            <cn.xie.imchat.view.MyEditTextView
                android:layout_toRightOf="@+id/input_voice"
                android:layout_toLeftOf="@+id/input_emotion"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:paddingLeft="5dp"
                android:id="@+id/input_text"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:background="@drawable/round_input_bg"
                android:gravity="center_vertical"
                />
        </RelativeLayout>
        <!--消息顯示框緊貼輸入框頂部-->
        <!--聊天內容-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_chat"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/re_input_view"
            android:overScrollMode="always">
        </androidx.recyclerview.widget.RecyclerView>
    </RelativeLayout>


</LinearLayout>

接下來就詳細的給大家講解邏輯處理以及相關優化

首先，是當輸入框值不爲空顯示和爲空的顯示

如下面的兩張圖所示，當值爲空時，顯示+號，當值不爲空時，顯示發送按鈕。

要實現如上面的效果，除了佈局要根據我之前給的那樣，還需要在ChatActivity中進行邏輯的處理。

inputText = findViewById(R.id.input_text);
        inputText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                //這裏控制輸入框裏面沒有值時顯示+按鈕，有值時顯示發送按鈕
                if (!TextUtils.isEmpty(s.toString())){
                    more.setVisibility(View.GONE);
                    send.setVisibility(View.VISIBLE);
                }else {
                    more.setVisibility(View.VISIBLE);
                    send.setVisibility(View.GONE);
                }
            }
        });

其次，如何控制當軟件盤彈出來的時候，不遮住RecyclerView顯示的消息內容

要讓軟件盤彈出的時候，不去遮住RecyclerView顯示的消息內容，首先在AndroidManifest.xml對應的activity配置了android:windowSoftInputMode=“adjustResize”，

<activity android:name=".activity.ChatActivity"
            android:windowSoftInputMode="adjustResize"></activity>

//這裏控制只要點擊輸入框就滾動到最底部
       inputText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                 recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (manager.findLastCompletelyVisibleItemPosition() < adapter.getItemCount() - 1) {
                    manager.setStackFromEnd(true);
                    recyclerView.setLayoutManager(manager);
                    recyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    manager.setStackFromEnd(false);
                    recyclerView.setLayoutManager(manager);
                }
            }
        });
        if (chatMessageList.size() > 0) {
            recyclerView.smoothScrollToPosition(chatMessageList.size() - 1);
        }
            }
        });

再者，如何在剛進入ChatActivity的時候，定位到RecyclerView的最後一行

在設置適配器後，去判斷是否鋪滿屏幕，沒有鋪滿時把setStackFromEnd設爲false，鋪滿時setStackFromEnd設爲true：

chatMessageList = dbManager.queryHistoryChatMessageByName(sendName);
        adapter = new ChatAdapter(context,chatMessageList);
        recyclerView.setAdapter(adapter);
        //監聽消息item是否鋪滿屏幕
        recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (manager.findLastCompletelyVisibleItemPosition() < adapter.getItemCount() - 1) {
                    manager.setStackFromEnd(true);
                    recyclerView.setLayoutManager(manager);
                    recyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    manager.setStackFromEnd(false);
                    recyclerView.setLayoutManager(manager);
                }
            }
        });
        //定位到最底部
        if (chatMessageList.size() > 0) {
            recyclerView.smoothScrollToPosition(chatMessageList.size() - 1);
        }

又或，如何讓接收或發送信息後也定位到最後一行

發送消息後新增了item，重新去判斷是否鋪滿屏幕，沒有鋪滿時把setStackFromEnd設爲false，鋪滿時setStackFromEnd設爲true

recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (manager.findLastCompletelyVisibleItemPosition() < adapter.getItemCount() - 1) {
                    manager.setStackFromEnd(true);
                    recyclerView.setLayoutManager(manager);
                    recyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    manager.setStackFromEnd(false);
                    recyclerView.setLayoutManager(manager);
                }
            }
        });
        if (chatMessageList.size() > 0) {
            recyclerView.smoothScrollToPosition(chatMessageList.size() - 1);
            manager.setStackFromEnd(false);
            recyclerView.setLayoutManager(manager);
        }

並且，如何在瀏覽中間的信息時候點擊輸入框後自動滾動定位到最後

 //點擊輸入框時，滾動到最新消息
        inputText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //是否鋪滿屏幕監聽
                recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (manager.findLastCompletelyVisibleItemPosition() < adapter.getItemCount() - 1) {
                    manager.setStackFromEnd(true);
                    recyclerView.setLayoutManager(manager);
                    recyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    manager.setStackFromEnd(false);
                    recyclerView.setLayoutManager(manager);
                }
            }
        });
        if (chatMessageList.size() > 0) {
            recyclerView.smoothScrollToPosition(chatMessageList.size() - 1);
        }
            }
        });

在打開軟件盤是消息鋪滿了屏幕但在關閉軟件盤時又沒有鋪滿屏幕時

//自定義textView的軟件盤關閉監聽，當關閉軟件盤時需要重新去判斷是否鋪滿屏幕，沒有鋪滿時把setStackFromEnd設爲false，鋪滿時setStackFromEnd設爲true
 inputText.setOnKeyBoardHideListener(new MyEditTextView.OnKeyBoardHideListener() {
            @Override
            public void onKeyHide(int keyCode, KeyEvent event) {
                //是否鋪滿屏幕監聽
                 recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (manager.findLastCompletelyVisibleItemPosition() < adapter.getItemCount() - 1) {
                    manager.setStackFromEnd(true);
                    recyclerView.setLayoutManager(manager);
                    recyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    manager.setStackFromEnd(false);
                    recyclerView.setLayoutManager(manager);
                }
            }
        });
        if (chatMessageList.size() > 0) {
            recyclerView.smoothScrollToPosition(chatMessageList.size() - 1);
        }
            }
        });

最後給大家看看效果截圖

1.剛進入ChatActivity時，只有一條消息（未鋪滿屏幕），消息顯示到最上邊，此時效果圖：

2.此時點擊下面的輸入框，彈出軟件盤，消息還是顯示在最上面，此時效果圖（未鋪滿屏幕）：

3.此時關閉軟件盤，由於消息未鋪滿屏幕，此時效果圖：

4.多發一些消息，在測試在關閉軟件盤時未鋪滿屏幕，打開軟件盤時鋪滿屏幕的情況：

此時關閉軟件盤，由於重新計算發現消息item並沒有鋪滿屏幕，會把setStackFromEnd的值設爲false，讓其靠上顯示：

當不管打開軟件盤還是關閉軟件盤消息都鋪滿了屏幕時，在輸入框獲取到焦點時會顯示最新的item：

PS：由於聊天界面代碼實在太多，這裏附上整個ChatActivity的代碼，大家有疑問可以隨時留言。

package cn.xie.imchat.activity;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.TextView;

import org.jivesoftware.smack.SmackException;
import org.jivesoftware.smack.StanzaListener;
import org.jivesoftware.smack.chat2.Chat;
import org.jivesoftware.smack.filter.StanzaTypeFilter;
import org.jivesoftware.smack.packet.Stanza;

import java.util.ArrayList;
import java.util.List;

import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import cn.xie.imchat.R;
import cn.xie.imchat.adapter.ChatAdapter;
import cn.xie.imchat.config.XmppConnection;
import cn.xie.imchat.domain.ChatMessage;
import cn.xie.imchat.domain.ChatUser;
import cn.xie.imchat.utils.DBManager;
import cn.xie.imchat.utils.Util;
import cn.xie.imchat.view.MyEditTextView;

public class ChatActivity extends BaseActivity {
    private ImageView back, more;
    private Context context;
    private TextView chatName, send;
    private String sendName, type, userName;
    private DBManager dbManager;
    private ChatAdapter adapter;
    private RecyclerView recyclerView;
    private List<ChatMessage> chatMessageList;
    private MyEditTextView inputText;
    private StanzaListener packetListener;
    private Chat chat;
    private LinearLayoutManager manager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chat);
        context = this;
        dbManager = new DBManager(context);
        Intent intent = getIntent();
        sendName = intent.getStringExtra("sendName");
        type = intent.getStringExtra("type");
        //創建個人聊天窗口
        String sendJid = sendName + "@xie-pc";
        userName = Util.getLoginInfo(context).getUserName();
        chat = XmppConnection.getInstance().getFriendChat(sendJid);
        initView();
        initData();
    }

    /**
     * 加載聊天記錄
     */
    private void initData() {
        chatMessageList = dbManager.queryHistoryChatMessageByName(sendName);
        adapter = new ChatAdapter(context, chatMessageList);
        recyclerView.setAdapter(adapter);
        //是否鋪滿屏幕監聽
        addOnGlobalLayoutItem();

    }


    /**
     * 初始化佈局
     */
    private void initView() {
        recyclerView = findViewById(R.id.recycler_chat);
        manager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(manager);
        //禁止滑動，解決滑動衝突
        recyclerView.setNestedScrollingEnabled(false);

        back = findViewById(R.id.back);
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        chatName = findViewById(R.id.chat_name);
        ChatUser chatUser = dbManager.queryChatUserByName(sendName);
        if (chatUser != null) {
            Util.showName(context, chatName, chatUser.getUserName(), chatUser.getNickName());
        }
        send = findViewById(R.id.send);
        more = findViewById(R.id.more);
        inputText = findViewById(R.id.input_text);
        inputText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                //這裏控制輸入框裏面沒有值時顯示+按鈕，有值時顯示發送按鈕
                if (!TextUtils.isEmpty(s.toString())) {
                    more.setVisibility(View.GONE);
                    send.setVisibility(View.VISIBLE);
                } else {
                    more.setVisibility(View.VISIBLE);
                    send.setVisibility(View.GONE);
                }
            }
        });
 	//點擊輸入框時，滾動到最新消息
        inputText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //是否鋪滿屏幕監聽
                addOnGlobalLayoutItem();
            }
        });
        //輸入框獲取焦點時監聽（此時軟件盤打開）
        inputText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                //是否鋪滿屏幕監聽
                addOnGlobalLayoutItem();
            }
        });
        //軟件盤關閉監聽
        inputText.setOnKeyBoardHideListener(new MyEditTextView.OnKeyBoardHideListener() {
            @Override
            public void onKeyHide(int keyCode, KeyEvent event) {
                //是否鋪滿屏幕監聽
                addOnGlobalLayoutItem();
            }
        });

        //這裏控制輸入值的發送，當發送後清空輸入框
        send.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String inputMsg = inputText.getText().toString();
                sendChatMessageListener(inputMsg);
                inputText.setText("");
            }
        });
    }

    @SuppressLint("HandlerLeak")
    private Handler handlerInitData = new Handler() {
    };
    private Runnable task = new Runnable() {
        @Override
        public void run() {
            initData();
        }
    };

    @Override
    public void onResume() {
        super.onResume();
        Thread thread = new Thread(new Runnable() {
            @Override
            public void run() {
                handlerInit.sendEmptyMessage(1);
                initPacket();
            }
        });
        thread.start();

    }

    @SuppressLint("HandlerLeak")
    private Handler handlerInit = new Handler() {
        @Override
        public void handleMessage(android.os.Message msg) {
            handlerInitData.postDelayed(task, 1000);
        }
    };

    public void initPacket() {
        try {
            final Thread thread = new Thread(new Runnable() {
                @Override
                public void run() {
                    if (packetListener == null) {
                        packetListener = new StanzaListener() {
                            @Override
                            public void processStanza(Stanza packet) throws SmackException.NotConnectedException, InterruptedException, SmackException.NotLoggedInException {
                                setProcessPacket(packet);
                            }
                        };
                    }
                    XmppConnection.getInstance().addAsyncStanzaListener(packetListener, StanzaTypeFilter.MESSAGE);
                }
            });
            thread.start();
        } catch (Exception e) {
            Log.e("initPacket", e.toString());
        }
    }

    private void setProcessPacket(Stanza packet) {
        try {
            handlerInit.sendEmptyMessage(1);
        } catch (Exception e) {
            Log.e("setProcessPacket", e.toString());
        }
    }

    /**
     * 添加聊天消息的監聽
     */
    private void sendChatMessageListener(String inputMsg) {
        //發送消息
        XmppConnection.getInstance().sendMessage(chat, null, inputMsg);
        List<ChatMessage> chatMessages = new ArrayList<>();
        ChatMessage chatMessage = new ChatMessage(userName, sendName, inputMsg, "OUT", Util.getNewDate(), null, type);
        chatMessages.add(chatMessage);
        dbManager.addChatMessageData(chatMessages);
        chatMessageList.add(chatMessage);
        adapter.notifyDataSetChanged();
        //是否鋪滿屏幕監聽
        addOnGlobalLayoutItem();

    }

    /**
     * item是否鋪滿屏幕監聽
     */
    private void addOnGlobalLayoutItem() {
        recyclerView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                if (manager.findLastCompletelyVisibleItemPosition() < adapter.getItemCount() - 1) {
                    manager.setStackFromEnd(true);
                    recyclerView.setLayoutManager(manager);
                    recyclerView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                } else {
                    manager.setStackFromEnd(false);
                    recyclerView.setLayoutManager(manager);
                }
            }
        });
        if (chatMessageList.size() > 0) {
            recyclerView.smoothScrollToPosition(chatMessageList.size() - 1);
        }
    }

}