關於Android彈出軟鍵盤“頂起”View的問題

關於Android彈出軟鍵盤“頂起”View的問題

問題簡單一帶而過，後面直接說解決思路，Android系統已經給我們提供了防止鍵盤遮擋輸入內容的解決方案，比如在清單文件對應的Activity添加：

android:windowSoftInputMode="adjustPan|stateHidden"

這種方式很簡單，在一些需要編輯的頁面，可以將EditText頂起，解決了鍵盤可能遮擋的問題。

但是它還存在一個問題，就是他只能“頂起”輸入部分，比如一個聊天頁面，輸入框在下方，我們希望的是，當鍵盤彈出的時候，將底部整個輸入部分的View全部頂起，而不單單是不遮擋輸入內容這麼簡單。

下面來簡單說一下解決方案，“頂起”之所以加引號，是因爲鍵盤並不是真正的將控件頂起來了，鍵盤是在視圖的最上層，我們可以自定義一個需要適配鍵盤彈出和隱藏的View，來改變View的高度，達到所謂的彈出軟鍵盤“頂起”View的效果。如圖：

以下示例爲Kotlin，只做了最簡單的適配示例，如果需要實現個性化需求，可自行修改。

自定義一個控件InputPanelView，監聽鍵盤彈出高度。

package ……

import android.content.Context
import android.graphics.Rect
import android.util.AttributeSet
import android.view.LayoutInflater
import android.view.View
import android.widget.RelativeLayout
import kotlinx.android.synthetic.main.view_input_panel.view.*

class InputPanelView(context: Context?, attrs: AttributeSet?) : RelativeLayout(context, attrs) {

    companion object {
        private const val TAG = "InputPanelView"
    }

    init {
        LayoutInflater.from(context).inflate(R.layout.view_input_panel, this, true)

        viewTreeObserver.addOnGlobalLayoutListener {

            val rect = Rect()
            getWindowVisibleDisplayFrame(rect)

            val screenHeight = rootView.height
            val keyboardHeight = screenHeight - rect.bottom

            Log.d(TAG, "鍵盤高度：$keyboardHeight  measuredHeight = $measuredHeight")
            resetHeight(keyboardHeight)
        }
    }

    private fun resetHeight(keyboardHeight: Int) {

        when {
            0 == keyboardHeight && rl_extra_view?.visibility == View.VISIBLE -> {
                rl_extra_view?.visibility = View.GONE
            }
            0 < keyboardHeight && rl_extra_view?.visibility == View.GONE -> {
                val layoutParams = rl_extra_view?.layoutParams
                layoutParams?.height = keyboardHeight
                rl_extra_view?.layoutParams = layoutParams
                rl_extra_view?.visibility = View.VISIBLE
            }
        }
    }
}

自定義View view_input_panel.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="@dimen/y114"
        android:background="@android:color/white"
        android:minHeight="@dimen/y114"
        android:orientation="horizontal">

        <EditText
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@android:color/transparent"
            android:hint="請輸入消息..."
            android:inputType="text"
            android:paddingStart="@dimen/x30"
            android:paddingEnd="@dimen/x30"
            android:textColor="#222222"
            android:textColorHint="#BDBDBD"
            android:textSize="@dimen/s30" />

        <ImageButton
            android:id="@+id/ib_red_packets"
            android:layout_width="@dimen/x114"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:contentDescription="@string/app_name"
            android:src="@mipmap/icon_chat_room_red_packets" />

        <ImageButton
            android:id="@+id/ib_send"
            android:layout_width="@dimen/x114"
            android:layout_height="match_parent"
            android:background="@android:color/transparent"
            android:contentDescription="@string/app_name"
            android:src="@mipmap/icon_chat_room_send" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/rl_extra_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ll"
        android:visibility="gone">


    </RelativeLayout>
</RelativeLayout>