用一小块webview显示网页里的二维码信息

使用场景：当你要在Activity或者Fragment显示一块网页中的二维码。因为某种原因，你是获得了这个网页的URL，而不是二维码的图像
总的来说我们需要在这么一块webview上面显示网页里面的部分信息。

代码

设置webview不能滑动什么的，还有setJavaScriptEnabled(true)很关键

 webView = view.findViewById(R.id.webview);
        //设置滚动条不显示
        webView.setHorizontalScrollBarEnabled(false);//水平不显示
        webView.setVerticalScrollBarEnabled(false); //垂直不显示
        // 使WebView不可滚动
        webView.setOnTouchListener((v, event) -> (event.getAction() == MotionEvent.ACTION_MOVE));
        webView.getSettings().setJavaScriptEnabled(true);

关键代码,在shouldInterceptRequest加载css样式。

判断url是否以css结尾，如果是，就用我们构造的WebResourceResponse的来代替。

webView.setWebViewClient(new WebViewClient(){
  @Nullable
            @Override
            public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
                Log.i(TAG,"shouldInterceptRequest "+url);
                if(url.endsWith(".css")){
                    try {
                        return new WebResourceResponse("text/css","utf-8",getContext().getAssets().open("css/news.css"));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
                return super.shouldInterceptRequest(view, url);

            }
        });
}

我们构造的WebResourceResponse是加载了Assets下的css/news.css，实际上这个是我们自己创建的，简单而言就是让网页加载自己定义的css，从而达到自己想要的显示效果。

看看css文件

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body{width:135px;height:135px;
    padding: 0px!important;
 }
.impowerBox{
    margin: 0;
    padding: 0;
    line-height: 0;
    text-align: center;
    position: relative;
    width: 100%;
    z-index: 1;
}
.impowerBox .qrcode {width: 135px; height:135px; }
.impowerBox .title {display: none;}
.impowerBox .info {display: none;}
.status_icon {display: none}
.impowerBox .status {display: none;}

我把一些不显示的设置成display: none，然后固定了它的大小等，实现了自己想要的显示效果。至于具体的效果，自己可以慢慢调试。