酷炫实现WebView与Native完美融合
来源:互联网 发布:淘宝助理怎么选类目 编辑:程序博客网 时间:2024/06/03 14:44
前言
首先看个效果图:
这里背景是native的,左侧边栏也是native的,右侧内容是透明web页面,是不是很酷炫的样子,而且我们还可以自己加蒙版背景,是不是很酷。
这个场景非常适合左侧目录是本地的,然后内容是加载web页面,这样可以实时跟新内容,而且不会像纯h5那样尴尬。
跟多场景小伙伴可以自己挖掘,只是提供一个思路。
实现步骤
1.web页面设置透明(opacity)
2.安卓webview控件设置透明
3.阻止跳转自带浏览器
4.优化:web页面缓存以及定时缓存清理
1.web页面设置透明(opacity)
首先我们想要实现透明效果,就需要让我们的web页面先实现透明效果,不过本人对web不是很精通,只是知道使用opacity属性就可以实现页面的透明。让我们看一下代码:
<html> <body opacity: 0.5> <p style="font-size:20px;text-align:center;"> <h1>透明WebView与Native完美结合</h1> </p> <p style="font-size:20px;text-align:center;" > <a href="http://blog.csdn.net/github_33304260/article/details/73194544">酷炫的外部开启Activity新姿势</a> </p> <p style="font-size:20px;text-align:center;"> <a href="http://blog.csdn.net/github_33304260/article/details/72526237">Glide 4.0.0 RC0 使用详解</a> </p> <p style="font-size:20px;text-align:center;"> <a href="http://blog.csdn.net/github_33304260/article/details/71779983">Android自定义View【实战教程】5⃣️---Canvas详解及代码绘制安卓机器人</a> </p> <p style="font-size:20px;text-align:center;"> <a href="http://blog.csdn.net/github_33304260/article/details/71077965">Glide二次封装库的使用</a> </p> <p style="font-size:20px;text-align:center;"> <a href="http://blog.csdn.net/github_33304260/article/details/70213300">Picasso,Glide,Fresco对比分析</a> </p> <p style="font-size:20px;text-align:center;"> <a href="http://blog.csdn.net/github_33304260/article/details/70142115"> Android自定义View【实战教程】4⃣️----BitmapShader详解及圆形、圆角、多边形实现</a> </p> </body></html>
你只要知道web页面需要透明就好了,有前端的兄弟会为你写好的,这里就不多介绍啦!
2.安卓webview控件设置透明
非常简单,两行代码:
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);webView.setBackgroundColor(0);
setBackgroundColor(0)这句代码只要有就行,至于里面设置的数值是多少貌似没有关系,但是不能去掉,不然就会如下图一样,原形毕露。
3.阻止跳转自带浏览器
通过上面两个步骤我们已经可以实现我们开始看到的那个效果啦,不过这时候还是会出现问题,那就加载某些页面的时候会跳转到系统自带的浏览器,那么我们接下来解决这个问题。
这个实现起来也是非常简单的:
我们只需重新setWebViewClient,然后重写shouldOverrideUrlLoading方法。
代码如下:
webView.setWebViewClient(new WebViewClient(){ // 重写此方法保证在当前webview里跳转,不跳到浏览器那边 @Override public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { view.loadUrl(String.valueOf(request.getUrl())); return true; } });
现在已经可以非常完美的实现上述功能了,不过为了更加完美我们还需要加入缓存。
4.web页面缓存及定时缓存清理
WebView的缓存可以分为页面缓存和数据缓存:
1,页面缓存: >指加载一个网页时的html、JS、CSS等页面或者资源数据。 >这些缓存资源是由于浏览器的行为而产生,开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地影响到这些缓存数据。
2.数据缓存 : >数据缓存分为AppCache和DOM Storage两种。 >这些缓存资源是由开发者的直接行为而产生,所有的缓存数据都由开发者直接完全地掌控。
缓存模式(5种)
1.LOAD_CACHE_ONLY: 不使用网络,只读取本地缓存数据
2.LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
3.LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
4.LOAD_NO_CACHE: 不使用缓存,只从网络获取数据.
5.LOAD_CACHE_ELSE_NETWORK,只要本地有,无论是否过期,或者no-cache,都使用缓存中的数据。
本人建议:判断是否有网络,有的话,使用LOAD_DEFAULT,无网络时,使用LOAD_CACHE_ELSE_NETWORK
webView.getSettings().setJavaScriptEnabled(true); // 设置 缓存模式 if (NetUtils.isNetworkAvailable(MainActivity.this)) { webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT); } else { webView.getSettings().setCacheMode( WebSettings.LOAD_CACHE_ELSE_NETWORK); } // webView.getSettings().setBlockNetworkImage(true);// 把图片加载放在最后来加载渲染 webView.getSettings().setRenderPriority(RenderPriority.HIGH); // 支持多窗口 webView.getSettings().setSupportMultipleWindows(true); // 开启 DOM storage API 功能 webView.getSettings().setDomStorageEnabled(true); // 开启 Application Caches 功能 webView.getSettings().setAppCacheEnabled(true);
我们设置缓存在必要的时候我们还需要清理缓存:
webview.clearFormData(); webview.clearHistory(); webview.clearCache(true);
关于清除缓存的文章一大堆,这里只给大家提供一个思路,具体可以百度,有问题可以扫码左边栏二维码,进群与小伙伴交流。
同时为了防止内存泄漏我们还需要在onDestory的时候移除webview:
/*** * 防止WebView加载内存泄漏 */ @Override protected void onDestroy() { super.onDestroy(); webView.removeAllViews(); webView.destroy(); }
让我们来看一下效果: 其中有透明页面,有的不是透明页面,为了给大家对比呈现一下。
下面是源码地址: http://download.csdn.net/detail/github_33304260/9902990
本人github:https://github.com/libin7278/ImageLoader 欢迎点赞
- 酷炫实现WebView与Native完美融合
- springboot与mybatis的完美融合
- WebView与iOS Native交互
- iOS WebView与Native交互
- SpringBoot专题1----springboot与mybatis的完美融合
- springboot与mybatis整合实例详解(完美融合)
- springboot与mybatis整合 实例详解(完美融合)
- SpringBoot专题1----springboot与mybatis的完美融合
- WebView视屏全屏切换,完美实现
- React Native探索(三):与 react-web 的融合
- React Native探索(三):与 react-web 的融合
- webView中JS与Java完美交互
- 完美解决SwipeRefreshLayout与WebView冲突
- webView 实现 与 javascript调用java方法(也称js调用native 方法) helloworld
- webView 实现 与 javascript调用java方法(也称js调用native 方法) helloworld
- WebView Native与H5交互—jsbridge
- 关于 React Native 与 WebView 的通信
- React Native与WebView的交互
- Filter过滤器:在进入主页时,先通过过滤器从而为index提供数据
- poj 3258 River Hopscotch (二分与贪心)
- JVM概述
- 漫步最优化十五——凸函数优化
- POJ 3069 Saruman's Army 笔记
- 酷炫实现WebView与Native完美融合
- tensorflow学习系列(二):猫狗大战进阶
- null 与 unknown
- java中的HashTable,HashMap和HashSet
- SpringBoot框架集成开发
- 电子邮件加密技术初探(2017/07/18-2017/07/20探索日志)
- 数据结构与算法1-大话数据结构
- JavaScript实现几种常见的图形
- c语言字符串的详解