Android中webview加载HTML界面方法与使用和解析一些HTML字符样式富文本展示图片

Posted 2023-02-20 Android记事苟

android中webview加载html界面方法与使用和解析一些HTML富文本展示，图片溢出解决方法等

一、WebView

WebView加载html数据是Android前端比较常用的方法了，解析后端一些字符串等。

二、使用步骤

代码展示

添加网络权限。

<uses-permission android:name="android.permission.INTERNET" />

那个WebView 要加载HTML语句绑定使用。

     WebView webview = findViewById(R.id.webview);
     String richtext="这里你要解析的字符串，也可以后端传过来的数据";

        //WebSettings方法里面是否执行javascript脚本
        wvContent.getSettings().setJavaScriptEnabled(true);
        //loadDataWithBaseURL加载数据的方法  changeImageWidth是写的方法
        wvContent.loadDataWithBaseURL(null, changeImageWidth(richtext), "text/html", "utf-8", null);
        wvContent.setHorizontalScrollBarEnabled(false); //隐藏水平滚动条
        wvContent.setVerticalScrollBarEnabled(false); //隐藏竖直滚动条
         /*
          WebView默认用系统自带浏览器处理页面跳转。
          为了让页面跳转在当前WebView中进行，重写WebViewClient。
          但是按BACK键时，不会返回跳转前的页面，而是退出本Activity。重写onKeyDown()方法来解决此问题。
         */
        wvContent.setWebViewClient(new WebViewClient() 
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
                view.loadUrl(url);
                return true;
            
        );

changeImageWidth方法，因为加载HTML数据字符串的话里面有img标签图片大小有时会横向溢出的

         /**
     * 借用Jsoup来修改图片的宽度为100%自适应,防止图片过大造成WebView横向滚动的情况
     * @param htmlText
     * @return
     */
    private String changeImageWidth(String htmlText) 
        Document document = Jsoup.parse(htmlText);
        Elements elementImages = document.getElementsByTag("img");
        if(elementImages.size() > 0) 
            for(Element elementImage : elementImages) 
                elementImage.attr("style", "width: 100%");
            
        
        return document.toString();
    

看一下解析的数据效果，WebView 把数据全部展示了。

如果是需要对一些图片实行点击操作可以使用RichText富文本解析器
流式操作
低侵入性
支持Html和Markdown格式文本
支持图片点击和长按事件
链接点击事件和长按事件
支持设置加载中和加载错误时的图片
支持自定义超链接的点击回调
支持修正图片宽高
支持GIF图片
支持Base64编码
自持自定义图片加载器
支持内存和磁盘双缓存
如下
RichText富文本解析器