android webView使用js/css实现夜间模式 长按识别图片以及二维码,网页可以上传图片

此DEMO中 实现了夜间模式的切换，网页端要调取手机上传图片功能，自定义switchbutton ，长按图片识别是否是二维码 分别可以保存，以及使用系统自带的分享功能

由于app嵌套了网页 并且要实现夜间模式 ，当然如果是网页是由公司自己开发的网页的话 大可不必使用这种方法，完全可以在网页里写两套css样式 ，

app端利用js交互来切换所需要的主题模式，但是网页不是自己开发的话，可以自己写一套CSS样式 利用js来调用从而实现主题切换，不过这种方法可能有的网页显示的效果不是很好！

下面来看看js调用自己写的CSS

css="javascript: (function() {\n" +
				"  \n" +
				"    css = document.createElement('link');\n" +
				"    css.id = 'xxx_browser_2014';\n" +
				"    css.rel = 'stylesheet';\n" +
				"    css.href = 'data:text/css,html,body,applet,object,h1,h2,h3,h4,h5,h6,blockquote,pre,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,p,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,th,td{background:rgba(0,0,0,0) !important;color:#fff !important;border-color:#A0A0A0 !important;}div,input,button,textarea,select,option,optgroup{background-color:#000 !important;color:#fff !important;border-color:#A0A0A0 !important;}a,a *{color:#ffffff !important; text-decoration:none !important;font-weight:bold !important;background-color:rgba(0,0,0,0) !important;}a:active,a:hover,a:active *,a:hover *{color:#1F72D0 !important;background-color:rgba(0,0,0,0) !important;}p,span{font color:#FF0000 !important;color:#ffffff !important;background-color:rgba(0,0,0,0) !important;}html{-webkit-filter: contrast(50%);}';\n" +
				"    document.getElementsByTagName('head')[0].appendChild(css);\n" +
				"  \n" +
				"})();";

然后在onPageFinish()方法中用js注入：

/**
		 * 页面加载完成回调的方法
		 * @param view
		 * @param url
		 */
		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);
			// 关闭图片加载阻塞
			view.getSettings().setBlockNetworkImage(false);
			if (isDayOrNingth) {
				view.loadUrl(css);
				view.loadUrl("javascript:function()");
			}
		}

到此就已经实现了夜间模式了  只不过这样会有一点不好  就是要在加载完成后才实现夜间模式 如果网速快的话还好，网速慢会先显示原来的网页在转成夜间模式 这就是弊端！建议先把webview先隐藏 ，等加载完成后在显示

 当网页需要调取手机相册上传图片的话 那需要在WebChromClient 添加一下代码：

 // For 3.0+ Devices (Start)
        // onActivityResult attached before constructor
        protected void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
        }


        // For Lollipop 5.0+ Devices
        public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            if (uploadMessage != null) {
                uploadMessage.onReceiveValue(null);
                uploadMessage = null;
            }

            uploadMessage = filePathCallback;

            Intent intent = null;
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                intent = fileChooserParams.createIntent();
            }
            try {
                startActivityForResult(intent, REQUEST_SELECT_FILE);
            } catch (ActivityNotFoundException e) {
                uploadMessage = null;
                Toast.makeText(getApplicationContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show();
                return false;
            }
            return true;
        }

        //For Android 4.1 only
        protected void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            mUploadMessage = uploadMsg;
            Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
            intent.addCategory(Intent.CATEGORY_OPENABLE);
            intent.setType("image/*");
            startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
        }

        protected void openFileChooser(ValueCallback<Uri> uploadMsg) {
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("image/*");
            startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
        }

然后重写  onActivityResult

  @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            if (requestCode == REQUEST_SELECT_FILE) {
                if (uploadMessage == null)
                    return;
                uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, data));
                uploadMessage = null;
            }
        }
        if (requestCode == FILECHOOSER_RESULTCODE) {
            if (null == mUploadMessage)
                return;
            Uri result = data == null || resultCode != MainActivity.RESULT_OK ? null : data.getData();
            mUploadMessage.onReceiveValue(result);
            mUploadMessage = null;
        }
    }

到此就可以上传图片了

  关于长按识别图片以及识别二维码 可以去看我的另外的一篇文章

  自定义Switch控件 可以下载demo

完整的DEMO下载链接

点击打开链接下载