安卓開發——WebView+Recyclerview文章詳情頁，解決高度問題

code發表於2021-10-23

安卓WebView

安卓開發——WebView+Recyclerview文章詳情頁，解決高度問題

最近在寫一個APP時，需要顯示文章詳情頁，準備使用WebView和RecyclerView實現上面文章，下面評論。出現了WebView高度問題，WebView載入HTML格式資料，而非URL。

這裡的WebView為自定義元件NestedScrollingWebView，已解決巢狀滑動問題。
如果WebView設定為wrap_content，會出現下面的評論會在WebView渲染資料時提前顯示在上面的情況，很不美觀
如果WebView設定為match_parent，當文章高度不足一屏時，下面空白太大，不美觀。

案例

設定為wrap_content

設定為match_parent

設定為match_parent，不另設定高度

通過JS設定高度

解決方案

利用JS獲取高度，然後通知（loadUrl(js)）WebView改變高度。關於JS獲取高度，這裡採用了一種我覺得很準確的方法

private fun getHtmlData(title:String, bodyHTML: String): String {
    val head = ("<head>" +
                "<meta name=\"viewport\" " +
                "content=\"width=device-width, " +
                "initial-scale=1.0, user-scalable=no\"> " +
                "<style></style></head>")
    return "<html>$head<body>" +
    "<h2 class='title'>$title</h2>$bodyHTML<div class='bottom'></div>" +
    "</body></html>"
}

在文章內容的最下面加一個div，通過document.querySelector('.bottom').offsetTop來用於確定高度

具體方法

1、先建立一個Mobile類

private inner class Mobile {
    @JavascriptInterface
    fun onGetWebContentHeight(height: Int) {
        contentWV.post {
            val layoutParams = contentWV.layoutParams
            layoutParams.height = Utils.getPixelByDp(this@JsSetHeightActivity, height)
            contentWV.layoutParams = layoutParams
            Log.i(TAG, "onGetWebContentHeight: height=$height")
        }
    }
}

2、在初始化WebView時，設定必要引數

private fun initView() {
    contentWV = findViewById<NestedScrollingWebView>(R.id.content_wv)

    // 開啟js
    val setting = contentWV.settings
    setting.javaScriptEnabled = true

    // 新增JS介面
    val mobile = Mobile()
    contentWV.addJavascriptInterface(mobile, "mobile")

    // 在 onPageFinished時重新設定高度
    val webClient = object : WebViewClient() {
        override fun onPageFinished(view: WebView?, url: String?) {
            val js = "javascript:mobile.onGetWebContentHeight(document.querySelector('.bottom').offsetTop)"
            view?.loadUrl(js)
        }
    }
    contentWV.webViewClient = webClient
}

在頁面載入完成之後，會重新設定高度