安卓开发——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
}
在页面加载完成之后,会重新设置高度
具体代码可以
安卓开发——WebView+Recyclerview文章详情页,解决高度问题的更多相关文章
- HelloDjango 第 08 篇:开发博客文章详情页
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...
- python 全栈开发,Day81(博客系统个人主页,文章详情页)
一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...
- django博客项目8:文章详情页
首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...
- thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享
前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...
- dedecms5.7的文章详情页页面标题加载指定txt文本的随机关键字
dedecms5.7的文章详情页加载指定txt文本的随机关键字 1 实现代码如下 {dede:name runphp='yes'} $file_path = "../test.txt&quo ...
- BBS之文章详情页搭建
博客评论相关 博客文章详情页搭建 {% extends 'base.html' %} {% block css %} <style> #div_digg { float: right; m ...
- Django:文章详情页面评论功能需要登录后才能使用,登录后自动返回到文章详情页
背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...
- BBS项目分布搭建三(个人站点时间归档补充,实现侧边栏跳转、无线级分类、实现文章详情页展示功能)
BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...
- OneThink框架的文章详情页分页
Application/Home/Controller/ArticleController.class.php的detail函数修改结果如下: /* 文档模型详情页 */public function ...
随机推荐
- React Native startReactApplication 方法简析
在 React Native 启动流程简析 这篇文章里,我们梳理了 RN 的启动流程,最后的 startReactApplication 由于相对复杂且涉及到最终执行前端 js 的流程,我们单独将其提 ...
- Kubernetes-Pod介绍(-)
前言 本篇是Kubernetes第四篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战.从现在开始都是重要的核心概念,此篇偏一些Pod的概念介绍,后续每篇都会有实战. Kubernetes系列 ...
- JS_DOM操作之操作标签
<标签名 属性1="属性值1" 属性2="属性值2"-->文本</标签名> 1 - 文本操作 <div class="c ...
- Git 系列教程(10)- 仓库别名
Git 别名 前言 Git 并不会在你输入部分命令时自动推断出你想要的命令 如果不想每次都输入完整的 Git 命令,可以通过 git config 文件来轻松地为每一个命令设置一个别名 $ git c ...
- Identity角色管理三(编辑角色)
因只有角色名能修改故继续使用创建角色的视图模型 using System.ComponentModel; using System.ComponentModel.DataAnnotations; na ...
- Identity角色管理一(准备工作)
因角色管理需要有用户才能进行(需要将用户从角色中添加,删除)故角色管理代码依托用户管理 只需在Startup服务中添加角色管理即可完成 public void ConfigureServices(IS ...
- Android线程池使用介绍
本文主要使用kotlin,讨论Android开发中的线程池用法. 我们想使用线程的时候,可以直接创建子线程并启动 Thread { Log.d("rfDev", "rus ...
- aes加解密前后端-后台
一.web.xml: <filter> <filter-name>fastLoginFilter</filter-name> <filter-class> ...
- jdbc核心技术-宋红康
视频地址 JDBC核心技术 第1章:JDBC概述 1.1 数据的持久化 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用.大多数情况下,特别是企业级应用,数据持久化意味着将 ...
- 远程桌面连接(mstsc)全攻略
打算从今天开始,写一写我经常用的,有长时间使用经验的东西,与大家分享,就从mstsc开始吧! mstsc应该是在Windows中,除了calc.cmd.notepad.mspaint,我使用率最高的系 ...