安卓开发——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下载#
参考#
文中的WebView
以及NestedScroll
的用法参考:10分钟带你入门NestedScrolling机制 - SegmentFault 思否
作者:sw-code
出处:https://www.cnblogs.com/sw-code/p/15442787.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
未经作者同意,请勿转载;若经同意转载,请在文章明显位置注明作者和出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库