安卓开发——WebView+Recyclerview文章详情页,解决高度问题

安卓开发——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
}

在页面加载完成之后,会重新设置高度

Demo下载#

文章详情 Demo下载

参考#

文中的WebView以及NestedScroll的用法参考:10分钟带你入门NestedScrolling机制 - SegmentFault 思否

其他实现方案:上面webview 下边评论 (applemei.com)

posted @   sw-code  阅读(1567)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示
主题色彩