专栏首页Android 技术栈Android 关于WebView全方面的使用(项目应用篇)

Android 关于WebView全方面的使用(项目应用篇)

1、关于WebView的使用:

  • ****与JS交互****
  • 拨打电话、发送短信、发送邮件
  • 上传图片(版本兼容)
  • 进度条设置
  • 字体大小设置
  • 返回网页上一层、显示网页标题
  • 全屏播放网络视频

首页

2、文章说明

WebView的使用已经是老生常谈了,看到很多文章说了用法,但我很少看到全的或者是项目中可以直接使用的,都是看了很多后,自己把功能都集合在一起。这里是一份比较全面的WebView项目应用篇,其中已经解决了应用时出现的很多bug,希望能对大家有帮助。

3、项目地址

WebViewStudy

4、内容详细介绍

4.1 电话短信邮件

电话短信邮件&与JS交互测试.png

给WebView设置WebViewClient:

webView.setWebViewClient(new MyWebViewClient(this));

其中MyWebViewClient内容:

/** 
* 监听网页链接:
* - 优酷视频直接跳到自带浏览器 
* - 根据标识:打电话、发短信、发邮件 
* - 进度条的显示 
* - 加载完成后,添加javascript监听 
*/
public class MyWebViewClient extends WebViewClient {

    private IWebPageView iWebPageView;
    private WebViewActivity activity;

    public MyWebViewClient(IWebPageView iWebPageView) {
        this.iWebPageView = iWebPageView;
        activity = (WebViewActivity) iWebPageView;

    }

    @SuppressWarnings("deprecation")
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        // 优酷视频跳转浏览器播放
        if (url.startsWith("http://v.youku.com/")) {
            Intent intent = new Intent();
            intent.setAction("android.intent.action.VIEW");
            intent.addCategory("android.intent.category.DEFAULT");
            intent.addCategory("android.intent.category.BROWSABLE");
            Uri content_url = Uri.parse(url);
            intent.setData(content_url);
            activity.startActivity(intent);
            return true;

            // 电话、短信、邮箱
        } else if (url.startsWith(WebView.SCHEME_TEL) || url.startsWith("sms:") || url.startsWith(WebView.SCHEME_MAILTO)) {
            try {
                Intent intent = new Intent(Intent.ACTION_VIEW);
                intent.setData(Uri.parse(url));
                activity.startActivity(intent);
            } catch (ActivityNotFoundException ignored) {
            }
            return true;
        }
        iWebPageView.startProgress();
        view.loadUrl(url);
        return false;
    }


    @Override
    public void onPageFinished(WebView view, String url) {
        if (activity.progress90) {
            iWebPageView.hindProgressBar();
        } else {
            activity.pageFinish = true;
        }
        if (!CheckNetwork.isNetworkConnected(activity)) {
            iWebPageView.hindProgressBar();
        }
        // html加载完成之后,添加监听图片的点击js函数
        iWebPageView.addImageClickListener();
        super.onPageFinished(view, url);
    }

    // 视频全屏播放按返回页面被放大的问题
    @Override
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
        super.onScaleChanged(view, oldScale, newScale);
        if(newScale - oldScale > 7) {
            view.setInitialScale((int)(oldScale / newScale * 100)); //异常放大,缩回去。
        }
    }
}

因为有很多配置,这里把各个功能模块通过接口IWebPageView分离了出来,这样逻辑更清晰。

4.2 与JS交互

相信大家已经看到了上面"----点击了图片"的Toast,这里需要先给WebView设置JavascriptInterface: webView.addJavascriptInterface(new ImageClickInterface(this), "injectedObject");

其中ImageClickInterface相关代码:

public class ImageClickInterface {
    private Context context;

    public ImageClickInterface(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void imageClick(String imgUrl, String hasLink) {
        Toast.makeText(context, "----点击了图片", Toast.LENGTH_SHORT).show();
        // 查看大图
//        Intent intent = new Intent(context, ViewBigImageActivity.class);
//        intent.putStringArrayListExtra("imgUrl",imgUrl);
//        context.startActivity(intent);
//        Log.e("----点击了图片 url: ", "" + imgUrl);
    }
}

加入监听:

public void addImageClickListener() {
        // 这段js函数的功能就是,遍历所有的img节点,
       // 并添加onclick函数,函数的功能是在图片点击的时候调用本地java接口并传递对应src和has_link里的值过去
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\");" +
                "for(var i=0;i<objs.length;i++)" +
                "{" +
                "objs[i].onclick=function(){window.injectedObject.imageClick(this.getAttribute(\"src\"),this.getAttribute(\"has_link\"));}" +
                "}" +
                "})()");
    }

我们来看一下网页对应的源码:

<img src="[./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe](./callsms_files/753b877c-c098-43e9-85cc-6df5bbdaaafe)" style="width: 100%">

大家可能觉得有点怪异..因为这是保存的本地网页,如是线上的话,是这样:

<img src='[http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe](http://7xk154.com1.z0.glb.clouddn.com/article/753b877c-c098-43e9-85cc-6df5bbdaaafe)' style='width: 100%'>

这里传递过去的是一个图片url的值,没有的属性传过去的则是null。这样我们就可以对其进行具体的操作了。

4.3 字体大小设置

/** 设置字体默认缩放大小(改变网页字体大小,setTextSize  api14被弃用)*/
ws.setTextZoom(100);

其中100为默认缩放比,通过设置缩放比来控制字体大小。

4.4 上传图片(版本兼容) & 全屏播放网络视频 & 显示网页标题

这里因为篇幅原因,里面的代码很多,就不贴出来了,大家可以点击MyWebChromeClient.java,查看具体代码。

上传图片.png

4.5 返回网页上一层

返回网页上一层及退出全屏等操作:

@Overridepublic 
boolean onKeyDown(int keyCode, KeyEvent event) {    
  if (keyCode == KeyEvent.KEYCODE_BACK) {        
      //全屏播放退出全屏        
      if (webChromeClient.inCustomView()) {            
              hideCustomView();            
              return true;            
        //返回网页上一页        
        } else if (webView.canGoBack()) {            
              webView.goBack();            
              return true;            
         //退出网页        
         } else {            
              webView.loadUrl("about:blank");            
              finish();        
        }    
     }    
    return false;
}

4.6 进度条设置

这里用的是先加载到90%再加载到100%, 具体为什么相信大家都懂吧...

// 进度条 假装加载到90%
public void startProgress90() {
        for (int i = 0; i < 900; i++) {
            final int progress = i + 1;
            mProgressBar.postDelayed(new Runnable() {
                @Override
                public void run() {
                    mProgressBar.setProgress(progress);
                    if (progress == 900) {
                        progress90 = true;
                        if (pageFinish) {
                            startProgress90to100();
                        }
                    }
                }
            }, (i + 1) * 2);
        }
    }

再加载到100%:

// 加载到90%后再加载到100%
public void progressChanged(int newProgress) {
        if (progress90) {
            int progress = newProgress * 100;
            if (progress > 900) {
                mProgressBar.setProgress(progress);
                if (progress == 1000) {
                    mProgressBar.setVisibility(View.GONE);
                }
            }
        }
    }

5、推荐阅读

如很多细节不知缘由的查看这里

6、所遇问题

End

最后再附一遍项目地址?:WebViewStudy

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java 23种设计模式全归纳 | 完结版

    设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

    Jingbin
  • ByRecyclerView:真·万能分割线 (线性/宫格/瀑布流)

    我基本上找遍了网上所有通过ItemDecoration设置分隔线的文章,但都不尽如意,它们大多只适用于部分情况,比如只能给线性布局设置、只能设置color不能设...

    Jingbin
  • Android MVC、MVP、MVVM、MVP-databinding 架构单元示例

    基本Android项目都采用MVC、MVP、MVVM架构,个人认为软件架构没有绝对的优劣之分,大家都各有利弊。

    Jingbin
  • Data Structure_数组_栈_队列_链表_霍夫曼数组栈队列链表哈夫曼

    这就表示一个数组,这个数组有八个元素存放。对于元素的获取,主要就是通过下标获取,所以索引对于数组是很重要的,这个索引可以是有意义的,也可以是没有意义的。比如ar...

    西红柿炒鸡蛋
  • Data Structure_数组_栈_队列_链表_霍夫曼

    这就表示一个数组,这个数组有八个元素存放。对于元素的获取,主要就是通过下标获取,所以索引对于数组是很重要的,这个索引可以是有意义的,也可以是没有意义的。比如ar...

    西红柿炒鸡蛋
  • POJ 刷题系列:1094. Sorting It All Out

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    用户1147447
  • RecycleView终极封装(添加头、尾)

    头布局没什么可说的,在ListView当中可以直接通过addHeaderView()进行添加头布局,但是对于Recyclerview当中,并没有这种直接添加头布...

    Demo_Yang
  • WPF 拼音输入法

    实际上本文是在使用一个好用的软件 希沃白板 的时候发现在里面很难输入拼音来做课堂活动。

    林德熙
  • 【选择题】Java基础测试八(16道)

    【选择题】Java基础测试八(16道) 101.下面哪个流类属于面向字符的输入流( D ) A)BufferedWriter ...

    Java帮帮
  • kube-scheduler predicates 与 priorities 调度算法源码分析

    在上篇文章kube-scheduler 源码分析中已经介绍了 kube-scheduler 的设计以及从源码角度分析了其执行流程,这篇文章会专注介绍调度过程中 ...

    田飞雨

扫码关注云+社区

领取腾讯云代金券