WebView 显示HTML富文本

您所在的位置：网站首页 › webview加载流程 › WebView 显示HTML富文本

WebView 显示HTML富文本

2023-08-10 01:04| 来源: 网络整理| 查看: 265

简单的使用

WebView webView = findViewById(R.id.web_view); //设置 webView webView.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);//取消滚动条 webView.getSettings().setSupportZoom(false);//不支持缩放功能 //加载 html 文本 webView.loadDataWithBaseURL(null, htmlStr, "text/html", "UTF-8", null); 复制代码

图片的处理

当然这简单的使用并不能满足我们的需求，当图片尺寸太大的时候还能横滑，这怎么行，

//依赖的库 compile 'org.jsoup:jsoup:1.11.2' 复制代码//这里我们使用 jsoup 修改 img 的属性: final Document doc = Jsoup.parse(htmltext); final Elements imgs = doc.getElementsByTag("img"); for (int i = 0; i < imgs.size(); i++) { //宽度填充手机，高度自适应 imgs.get(finalI).attr("style", "width: 100%; height: auto;"); } 复制代码//这里我们使用 jsoup 修改 embed 的属性: Elements embeds = doc.getElementsByTag("embed"); for (Element element : embeds) { //宽度填充手机，高度自适应 element.attr("width", "100%").attr("height", "auto"); } //webview 无法正确识别 embed 为视频，所以这里把这个标签改成 video 手机就可以识别了 doc.select("embed").tagName("video"); 复制代码

现在所有的图片都是宽度跟手机一样宽，高度自适应，像一些比较小的图如果还跟屏幕一样宽，这画质不能忍啊，如果不满意我们则需要再次处理。

分两种情况：

标签中带有图片的宽高属性跟我一样只有一个 src

两个的处理是一样的，都需要知道图片的宽高，通过对比图片的宽度和手机的宽度

if(图片的宽度>手机的宽度){ //宽度填充手机，高度自适应 imgs.get(finalI).attr("style", "width: 100%; height: auto;"); }else { //不需要任何改动 } 复制代码

第一种情况下我们可以通过 jsoup 来获取定义的 width height

第二种情况下由于只有 src ，我们需要获取网络图片的宽高，我这里是直接通过 Glide 来获取它的宽高，这里的宽高是需要请求网络获取的，所以我们可以在处理到最后一张图片的时候通知，webview 去加载 Html 文本，而不是直接就加载。

//依赖的库 compile 'com.github.bumptech.glide:glide:3.8.0' 复制代码Glide.with(this) .load(src) .asBitmap() .skipMemoryCache(true) .diskCacheStrategy(DiskCacheStrategy.NONE) .into(new SimpleTarget() { @Override public void onResourceReady( Bitmap bitmap, GlideAnimation

【本文地址】

WebView 显示HTML富文本

WebView 显示HTML富文本

今日新闻

推荐新闻