安卓开发——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 ...
随机推荐
- Java 登录模块设计
登录流程 前端登录传输用户名和md5加密后的密码 后端对密码在进行md5加密,或者使用md5加密的密码 + id 进行盐加密,增加密码被破解的难度. 登录成功后,这里分成单体,或者分布式的情况 单体 ...
- scikit-learn 1.0 版本新特性及变动前瞻性预览
1 简介 就在几天前,著名的机器学习框架scikit-learn在pypi上释放了其1.0rc1版本,这里给大家科普一下,版本号中的rc是Release Candidate的简称,代表当前的版本是一个 ...
- docker-compose up -d nginx 报错
在阿里云ECS上创建nginx容器时,报错如上图. The solution: In your Dockerfile, before running any apt commands, add the ...
- 【LeetCode】862. 和至少为 K 的最短子数组
862. 和至少为 K 的最短子数组 知识点:单调:队列:前缀和 题目描述 返回 A 的最短的非空连续子数组的长度,该子数组的和至少为 K . 如果没有和至少为 K 的非空子数组,返回 -1 . 示例 ...
- 【转】Gitlab CI & Docker & Dockerfile & Docker-compose的博客文章
gitlab权限设置 GitLab功能系列报道-标签(Labels) Gitlab CI 使用高级技巧 docker-compose是个好东西,越用越香 基于docker-compose的Gitlab ...
- docker学习笔记(一)--ubunru18.04下面安装docker18.03
我是在本地安装的虚拟机,再搭建的环境,虚拟机的安装可以参考下面的博客: https://blog.csdn.net/u013142781/article/details/50529030 安装好了之后 ...
- Android学习记录(二)——第一次hello world及遇到的gradle安装问题
开始一个简单的hello world项目,简单了解Android studio的使用方法 第一步,打开Android studio,点击Create New Project 第二步,选择需要的模板 T ...
- php发送邮件方法-亲测可用,email.class.php过期解决办法
php虽然提供了mail()函数,但并不好用,而PHPMailer是一个不错的邮件发送工具,使用起来也是非常简单!使用PHPMailer发送邮件: <?php header("cont ...
- Java面向对象系列(7)- 什么是继承
继承 继承的本质是对某一批类的抽象,从而实现对现实世界更好的建模 extands的意思是"扩展".子类是父类的扩展 JAVA中类只有单继承,没有多继承 继承是类和类之间的一种关系. ...
- Java面向对象系列(1)- 什么是面向对象
面向过程 & 面向对象 面向过程思想 步骤清晰清楚,第一步做什么,第二步做什么-- 面对过程适合处理一些较为简单的问题 面向对象思想 物以类聚,分类的思维模式,思考问题首先会解决问题需要哪些分 ...