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 */@Overridepublic 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下载链接

点击打开链接下载