江湖救急滤愕,Webview 輸入框被鍵盤遮擋!

輸入框被遮擋

A: 開發(fā)童鞋胁澳,webview 評論框被輸入法遮擋看不見了,這個是不是该互?
B: 這個需要看一看C渍摺(內(nèi)心抓狂韭畸,啊啊啊)

android 開發(fā)過程中蔓搞,避免不了與webview 打交道胰丁,相信不少小伙伴,也遇到過喂分,webview 輸入框被輸入法遮擋問題锦庸。今天我們就來聊一聊這個老生常談的問題,輸入框被遮擋蒲祈,我們該如何解決甘萧。首先看看現(xiàn)狀圖:


遇到問題,話不多說梆掸,開始排查問題扬卷。 android Webview 輸入法被遮擋。處理方案存在如下兩種情況酸钦。一是activity 未設置SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN怪得,二是activity設置SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN。

  • activity未設置SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN卑硫,此種情況下可以通過在清單文件設置窗口軟鍵盤交互模式為android:windowSoftInputMode="adjustResize"即可解決徒恋。如下所示:
 <activity
            android:name=".web.WebActivity"
            android:excludeFromRecents="false"
            android:windowSoftInputMode="adjustResize" />
  • activity 設置SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN時。解決方案為通過監(jiān)聽軟鍵盤的彈出欢伏,計算軟鍵盤的高度入挣,動態(tài)調(diào)整webView 的margin 來達到目的。

軟鍵盤高度計算

????在進行計算軟鍵盤高度之前硝拧,我們首先了解一下幾個基本概念财岔。如圖,由外向內(nèi)依次來看黑色方框河爹。最外層黑色框框框起來的范圍為decorView的視圖范圍匠璧,decorView是android 頂層的view,一般Activity 中setContentView設置的即是設置添加到decorView咸这。緊接著夷恍,第二個黑框為當前activity 的可見區(qū)域(不包含statusBar 以及navigationBar)。最后,一個黑框為decorView 的可見區(qū)域(不包含statusBar 以及navigationBar)酿雪。
????了解基本概念之后遏暴,我們可以簡單推導出鍵盤高度的計算公式。如下所示:

  • 存在導航鍵情況

鍵盤高度 = 當前activity 高度 - decorView 可見區(qū)域的高度

  • 不存在導航鍵情況指黎,即頁面全面屏的情況

鍵盤高度 = decorView 高度 - decorView 可見區(qū)域的底部

接下來我們看看界面布局朋凉,以及邏輯代碼的具體實現(xiàn)。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <RelativeLayout
        android:id="@+id/rl_tool_bar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:layout_marginStart="20dp"
            android:src="@mipmap/ic_back" />

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:textColor="@color/black"
            android:textSize="20dp"
            tools:text="網(wǎng)頁" />

    </RelativeLayout>

    <WebView
        android:id="@+id/web"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/rl_tool_bar"
        app:layout_constraintVertical_weight="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
   private lateinit var binding: ActivityWebBinding
    private lateinit var layoutParams: ConstraintLayout.LayoutParams
    private var currentHeight = 0
     // 處理webView 軟鍵盤顯示
    private fun handleSoftInput() {
        layoutParams = binding.web.layoutParams as ConstraintLayout.LayoutParams
        val decorView = window.decorView
        decorView.viewTreeObserver.addOnGlobalLayoutListener {
            val rect = Rect()
            decorView.getWindowVisibleDisplayFrame(rect)
            val keyboardMinHeight = dpToPx(100f)
            val screenHeight =
                if (hasNavigationBar(decorView)) resources.displayMetrics.heightPixels else decorView.height
            val rectHeight = if(hasNavigationBar(decorView)) rect.height() else rect.bottom
            val heightDiff = screenHeight - rectHeight
            // 視圖樹變化高度大于100dp,認為鍵盤彈出
            // currentHeight 防止界面頻繁刷新醋安,降低幀率杂彭,耗電
            if (currentHeight != heightDiff && heightDiff > keyboardMinHeight) {
                // 鍵盤彈出
                 currentHeight = heightDiff
                layoutParams.bottomMargin = currentHeight
                binding.web.requestLayout()
            } else if (currentHeight != heightDiff && heightDiff < keyboardMinHeight) {
                // 鍵盤收起
                currentHeight = 0
                layoutParams.bottomMargin = currentHeight
                binding.web.requestLayout()
            }

        }
    }

    private fun dpToPx(value: Float): Int {
        return (0.5f + value * resources.displayMetrics.density).toInt()
    }

    // 是否顯示導航欄
    private fun hasNavigationBar(view: View): Boolean {
        val compact = ViewCompat.getRootWindowInsets(view.findViewById(android.R.id.content))
        compact?.apply {
            return isVisible(WindowInsetsCompat.Type.navigationBars()) && getInsets(
                WindowInsetsCompat.Type.navigationBars()
            ).bottom > 0
        }
        return false
    }

???? 通過動態(tài)設置webView在視圖中的boottomMargin我們實現(xiàn)了webView輸入框不被鍵盤遮擋的目的。如下圖吓揪,看看此次最終效果亲怠。


????大功告成。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
禁止轉(zhuǎn)載柠辞,如需轉(zhuǎn)載請通過簡信或評論聯(lián)系作者团秽。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市叭首,隨后出現(xiàn)的幾起案子习勤,更是在濱河造成了極大的恐慌,老刑警劉巖焙格,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件图毕,死亡現(xiàn)場離奇詭異,居然都是意外死亡间螟,警方通過查閱死者的電腦和手機吴旋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來厢破,“玉大人荣瑟,你說我怎么就攤上這事∧幔” “怎么了笆焰?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長见坑。 經(jīng)常有香客問我嚷掠,道長,這世上最難降的妖魔是什么荞驴? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任不皆,我火速辦了婚禮,結果婚禮上熊楼,老公的妹妹穿的比我還像新娘霹娄。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布犬耻。 她就那樣靜靜地躺著踩晶,像睡著了一般。 火紅的嫁衣襯著肌膚如雪枕磁。 梳的紋絲不亂的頭發(fā)上渡蜻,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機與錄音计济,去河邊找鬼茸苇。 笑死,一個胖子當著我的面吹牛峭咒,可吹牛的內(nèi)容都是我干的税弃。 我是一名探鬼主播纪岁,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼凑队,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了幔翰?” 一聲冷哼從身側(cè)響起漩氨,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遗增,沒想到半個月后叫惊,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡做修,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年霍狰,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片饰及。...
    茶點故事閱讀 39,834評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡蔗坯,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出燎含,到底是詐尸還是另有隱情宾濒,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布屏箍,位于F島的核電站绘梦,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏赴魁。R本人自食惡果不足惜卸奉,卻給世界環(huán)境...
    茶點故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望颖御。 院中可真熱鬧榄棵,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至尚辑,卻和暖如春辑鲤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背杠茬。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工月褥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人瓢喉。 一個月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓宁赤,卻偏偏與公主長得像,于是被迫代替她去往敵國和親栓票。 傳聞我的和親對象是個殘疾皇子决左,可洞房花燭夜當晚...
    茶點故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容