android WebView中图片适配屏幕大小并添加添加事件

来源：互联网发布：财新数据可视化实验室编辑：程序博客网时间：2024/05/18 03:36

前言：当前Web内容在移动进行功能处理需求越来越多，尤其像新闻资讯类的APP，应用协议web,使用指南等。。。

文章解决简单文本显示与图文适配，图片点击问题

问题：简单文本内容显示

方法：android 提供Html.fromHtml()方法，进行转换一下即可。

问题：图文内容，需求图片只适应屏幕，可点击查看

1.解决适配屏幕问题。调用如下方法把需要显示html内容进行加工处理即可。

代码如下：

    private String getHtmlData(String bodyHTML) {        String head = "<head>" +                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +                "<style>img{max-width:100% !important; width:auto; height:auto;}</style>" +                "</head>";        return "<html>" + head + "<body style:'height:auto;max-width: 100%; width:auto;'>" + bodyHTML + "</body></html>";    }

2.解决图片点击大图查看，通过JS解决肯定需要添加JS 相关代码

第一步：WebView 控件支持JS,设置WebView.setSettings().setJavaScriptEnable(true);

第二步：在WebView页面加载结束之后，设置JS相关代码。如何判断页面加载完成？通过WebView.setWebViewClient(WebViewClient)方法;，需要自定义WebVIewClient类，重载onPageFinished(ViewView view,String url)方法。

代码如下：

    private class MyWebViewClient extends WebViewClient {        //在页面加载结束时调用。        @Override        public void onPageFinished(WebView view, String url) {            super.onPageFinished(view, url);            view.loadUrl(  getJavascript( "IMG","imagelistner","openImage"));        }    }    /***     * 设置JS     * @param key 图片标签     * @param callbackName 回调接口名     * @param fcName 回调方法名     * @return     */    private String getJavascript(String key,String callbackName,String fcName){     return  "javascript:(function(){" +                "var imgs=document.getElementsByTagName(\""+key+"\");" +                "for(var i=0;i<imgs.length;i++){" +                "imgs[i].onclick=function(){" +                "window."+callbackName+"."+fcName+"(this.src);" +                "}}})()";    }

第三步：设置图片点击响应方法，点击事件响应通过JS 代码，WebView监听JS事件进行响应。

我们需要调用WebView.addJavcScriptInterface(Object obj,String name)监听事件。此方法参数理解：
【Object参数1】事件接受实现对象，【String参数2】事件接受对象回调接口的名称。需要注意的是此参数,必须与步骤2中getJavascript(String key,StringcallbackName,String fcName)callbackName 一致，否则无法响应事件。
最后我们在事件接受实现对象中实现已fcName为方法名的方法即可。

代码如下：

 //java回调js代码，不要忘了@JavascriptInterface这个注解，不然点击事件不起作用    @JavascriptInterface    public void openImage(String img) {        AirlineLookImageActivity.startContentUI(context, img);    }

阅读全文

0 0