安卓开发——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获取高度，这里采用了一种我觉得很准确的方法

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

在文章内容的最下面加一个div，通过document.querySelector('.bottom').offsetTop来用于确定高度

具体方法

1、先创建一个Mobile类

  1. private inner class Mobile {
  2.     @JavascriptInterface
  3.     fun onGetWebContentHeight(height: Int) {
  4.         contentWV.post {
  5.             val layoutParams = contentWV.layoutParams
  6.             layoutParams.height = Utils.getPixelByDp(this@JsSetHeightActivity, height)
  7.             contentWV.layoutParams = layoutParams
  8.             Log.i(TAG, "onGetWebContentHeight: height=$height")
  9.         }
  10.     }
  11. }

2、在初始化WebView时，设置必要参数

  1. private fun initView() {
  2.     contentWV = findViewById<NestedScrollingWebView>(R.id.content_wv)
  4.     // 开启js
  5.     val setting = contentWV.settings
  6.     setting.javaScriptEnabled = true
  8.     // 添加JS接口
  9.     val mobile = Mobile()
  10.     contentWV.addJavascriptInterface(mobile, "mobile")
  12.     // 在 onPageFinished时重新设置高度
  13.     val webClient = object : WebViewClient() {
  14.         override fun onPageFinished(view: WebView?, url: String?) {
  15.             val js = "javascript:mobile.onGetWebContentHeight(document.querySelector('.bottom').offsetTop)"
  16.             view?.loadUrl(js)
  17.         }
  18.     }
  19.     contentWV.webViewClient = webClient
  20. }

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

具体代码可以

安卓开发——WebView+Recyclerview文章详情页，解决高度问题的更多相关文章

  1. HelloDjango 第 08 篇：开发博客文章详情页

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...

  2. python 全栈开发，Day81(博客系统个人主页,文章详情页)

    一.个人主页 随笔分类 需求:查询当前站点每一个分类的名称以及对应的文章数 完成这个需求,就可以展示左侧的分类 它需要利用分组查询,那么必须要会基于双下划线的查询. 基于双下划线的查询,简单来讲,就是 ...

  3. django博客项目8：文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

  4. thinkPHP中的文章详情页实现“上一篇下一篇”功能经验分享

    前段时间在公司中接触到了用thinkPHP搭建的项目,其中涉及到了文章详情页上一篇下一篇翻页的功能实现效果. 因为刚接触这套框架和PHP,所以整理一下实现该功能的经验方法. 如果有不到位的地方,欢迎指 ...

  5. dedecms5.7的文章详情页页面标题加载指定txt文本的随机关键字

    dedecms5.7的文章详情页加载指定txt文本的随机关键字 1 实现代码如下 {dede:name runphp='yes'} $file_path = "../test.txt&quo ...

  6. BBS之文章详情页搭建

    博客评论相关 博客文章详情页搭建 {% extends 'base.html' %} {% block css %} <style> #div_digg { float: right; m ...

  7. Django:文章详情页面评论功能需要登录后才能使用，登录后自动返回到文章详情页

    背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...

  8. BBS项目分布搭建三(个人站点时间归档补充，实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

  9. OneThink框架的文章详情页分页

    Application/Home/Controller/ArticleController.class.php的detail函数修改结果如下: /* 文档模型详情页 */public function ...

随机推荐

  1. elsa-core：4.ASP.NET Core Server with Elsa Dashboard

    在本快速入门中,我们将了解一个最小的 ASP.NET Core 应用程序,该应用程序承载 Elsa Dashboard 组件并将其连接到 Elsa Server. ElsaDashboard + Do ...

  2. Structs2的作用是什么？？

    struts2是一种重量级的框架,位于MVC架构中的controller,可以分析出来,它是用于接受页面信息然后通过内部处理,将结果返回. 同时struts2也是一个web层的MVC框架,那么什么是s ...

  3. 【良心保姆级教程】java手把手教你用swing写一个学生的增删改查模块

    很多刚入门的同学,不清楚如何用java.swing去开发出一个系统? 不清楚如何使用java代码去操作数据库进行增删改查一些列操作,不清楚java代码和数据库(mysql.sqlserver)之间怎么 ...

  4. WEB漏洞——RCE

    RCE(remote command/code execute)远程命令/代码执行漏洞,可以让攻击者直接向后台服务器远程注入操作系统命令或者代码,从而控制后台系统. RCE漏洞 应用程序有时需要调用一 ...

  5. NOIP模拟16:「Star Way To Heaven·God Knows·Loost My Music」

    T1:Star Way To Heaven 基本思路:   最小生成树.   假如我们将上边界与下边界看作一个点,然后从上边界经过星星向下边界连边,会发现,他会形成一条线将整个矩形分为左右两个部分. ...

  6. 优化技术专题-线程间的高性能消息框架-深入浅出Disruptor的使用和原理

    前提概要 简单回顾 jdk 里的队列: 阻塞队列: ArrayBlockingQueue主要通过:数组(Object[])+ 计数器(count)+ ReetrantLock的Condition (n ...

  7. junit4 套件测试

    junit4 中的套件可以用来测试一个需要依赖的业务流程,如购买必须依赖与登录成功 代码实现: 测试数据存放 public class BaseTest { protected static Hash ...

  8. JDK7&JDK9处理异常新特性

    1.JDK7新特性是在 try (定义对象,作用域就是try方法体) 复制一个文件实例: 复制文件的原理: 先从硬盘写出到内存中,创建文件输入流对象 FileInputStream fis; 中间是在 ...

  9. python库--pandas--Series

    方法 返回数据类型 参数 说明 Series(一维)       .Series() Series 实例s 创建一维数据类型Series data=None 要转化为Series的数据(也可用dict ...

  10. ysoserial CommonsColletions7分析

    CC7也是一条比较通用的链了,不过对于其原理的话,其实还是挺复杂的.文章如有错误,敬请大佬们斧正 CC7利用的是hashtable#readObject作为反序列化入口.AbstractMap的equ ...