安卓开发——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文章详情页，解决高度问题的更多相关文章

  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. Qt学习日记篇-Qt中使用Curl和jsonCpp

    1.Qt中安装并使用jsonCPP库 1.1  官网下载.https://sourceforge.net/projects/jsoncpp/    解压文件得到 jsoncpp-src-0.5.0 文 ...

  2. awk 命令-随笔

    awk语法: awk [option] 'pattern{action}' file ... awk [参数] '条件{动作}' 文件 ... 解析: 命令: awk 参数: -F "&qu ...

  3. Activiti 学习（二）—— Activiti 流程定义和部署

    概述 在这一节,我们将创建一个 Activit 工作流,并启动这个流程,主要包含以下几个步骤: 定义流程,按照 BPMN 的规范,使用流程定义工具,用流程符号把整个流程描述出来 部署流程,把画好的流程 ...

  4. 如何在win10中Java中JDK的安装和path，classpath的环境配置

    1,第一步,不用说肯定是去下一个java JDK了.目前最新版本的java JDK应该是JDK 7.0,这个就自己去百度一下了,好多网站都可以找到.2,第二步就是安装JDK虚拟机了,按照它里面的提示一 ...

  5. Excel删除重复数据及用公式筛选重复项并标记颜色突出显示

    当表格记录比较多时,常常会有重复数据,而重复记录往往只希望保存一条,因此需要把多余的删除:在 Excel 中,删除重复数据有两种方法,一种是用"删除重复数据"删除,另一种是用&qu ...

  6. composer 包 slim使用案例，一个简单的路由解决方案

    nginx配置文件修改 location / { try_files $uri /index.php$is_args$args; } 设置好nginx伪静态,把所有的请求方式都转向到index.php ...

  7. go语言游戏服务端开发（三）——服务机制

    五邑隐侠,本名关健昌,12年游戏生涯. 本教程以Go语言为例.   P2P网络为服务进程间.服务进程与客户端间通信提供了便利,在这个基础上可以搭建服务. 在服务层,通信包可以通过定义协议号来确定该包怎 ...

  8. 学习PHP中有趣的字符集国际化验证功能

    今天的内容非常简单,不过也很有趣.不知道大家有没有经历过这样的事情,就是在某些字体下,0 和 O 不好区分,1 和 l 也是很难看清楚.当然,现在大部分的编辑器和 IDE 的默认字体都是会选择那些比较 ...

  9. 后期静态绑定在PHP中的使用

    什么叫后期静态绑定呢?其实我们在之前的文章PHP中的static中已经说过这个东西了.今天我们还是再次深入的理解一下这个概念. 首先,我们通过一段代码来引入后期静态绑定这一概念: class A { ...

  10. C# 将PPT转为OFD/DPT/DPS/ODP/POTX/UOP

    本文分享在C#代码程序中,如何将PPT幻灯片文档转换为多种文件格式,如:OFD.DPT.DPS.ODP.POTX.UOP等.只需在加载PPT幻灯片源文档后,调用ppt.SaveToFile(strin ...