相关文章推荐
气宇轩昂的硬盘  ·  vector存入共享内存(了解) - ...·  4 月前    · 
虚心的薯片  ·  Eclipse安装中文语言包(官方汉化) - 知乎·  1 年前    · 
独立的草稿本  ·  javascript - js ...·  2 年前    · 
高大的豌豆  ·  带参数的Spring ...·  2 年前    · 
一身肌肉的松球  ·  学习使用 Sed 文本编辑器-linux ...·  2 年前    · 
Code  ›  酷炫实现WebView与Native完美融合开发者社区
浏览器缓存 webview 数据融合 font-size
https://cloud.tencent.com/developer/article/1385846
潇洒的企鹅
7 月前
先知先觉

酷炫实现WebView与Native完美融合

前往小程序,Get 更优 阅读体验!
立即前往
腾讯云
开发者社区
文档 建议反馈 控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
先知先觉
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
社区首页 > 专栏 > 酷炫实现WebView与Native完美融合

酷炫实现WebView与Native完美融合

作者头像
先知先觉
发布 于 2019-01-21 16:11:44
978 0
发布 于 2019-01-21 16:11:44
举报
文章被收录于专栏: 伟大程序猿的诞生

前言

首先看个效果图: 这里背景是native的,左侧边栏也是native的,右侧内容是透明web页面,是不是很酷炫的样子,而且我们还可以自己加蒙版背景,是不是很酷。 这个场景非常适合左侧目录是本地的,然后内容是加载web页面,这样可以实时跟新内容,而且不会像纯h5那样尴尬。 跟多场景小伙伴可以自己挖掘,只是提供一个思路。

实现步骤

1.web页面设置透明(opacity) 2.安卓webview控件设置透明 3.阻止跳转自带浏览器 4.优化:web页面缓存以及定时缓存清理

1.web页面设置透明(opacity)

首先我们想要实现透明效果,就需要让我们的web页面先实现透明效果,不过本人对web不是很精通,只是知道使用 opacity 属性就可以实现页面的透明。让我们看一下代码:

代码语言: javascript
复制
<html>
  <body opacity: 0.5>
      <p style="font-size:20px;text-align:center;">
        <h1>透明WebView与Native完美结合</h1>
      <p style="font-size:20px;text-align:center;" >
        <a href="http://blog.csdn.net/github_33304260/article/details/73194544">酷炫的外部开启Activity新姿势</a>
      <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 style="font-size:20px;text-align:center;">
        <a href="http://blog.csdn.net/github_33304260/article/details/71779983">Android自定义View【实战教程】5⃣️---Canvas详解及代码绘制安卓机器人</a>
      <p style="font-size:20px;text-align:center;">
        <a href="http://blog.csdn.net/github_33304260/article/details/71077965">Glide二次封装库的使用</a>
      <p style="font-size:20px;text-align:center;">
          <a href="http://blog.csdn.net/github_33304260/article/details/70213300">Picasso,Glide,Fresco对比分析</a>
      <p style="font-size:20px;text-align:center;">
          <a href="http://blog.csdn.net/github_33304260/article/details/70142115"> Android自定义View【实战教程】4⃣️----BitmapShader详解及圆形、圆角、多边形实现</a>
  </body>
</html>

你只要知道web页面需要透明就好了,有前端的兄弟会为你写好的,这里就不多介绍啦!

2.安卓webview控件设置透明

非常简单,两行代码:

代码语言: javascript
复制
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
webView.setBackgroundColor(0);

setBackgroundColor(0)这句代码只要有就行,至于里面设置的数值是多少貌似没有关系,但是不能去掉,不然就会如下图一样,原形毕露。

3.阻止跳转自带浏览器

通过上面两个步骤我们已经可以实现我们开始看到的那个效果啦,不过这时候还是会出现问题,那就加载某些页面的时候会跳转到系统自带的浏览器,那么我们接下来解决这个问题。

这个实现起来也是非常简单的: 我们只需重新setWebViewClient,然后重写shouldOverrideUrlLoading方法。 代码如下:

代码语言: javascript
复制
        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

代码语言: javascript
复制
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);

我们设置缓存在必要的时候我们还需要清理缓存:

代码语言: javascript
复制
        webview.clearFormData();
        webview.clearHistory();
        webview.clearCache(true);

关于清除缓存的文章一大堆,这里只给大家提供一个思路,具体可以百度,有问题可以扫码左边栏二维码,进群与小伙伴交流。

同时为了防止内存泄漏我们还需要在onDestory的时候移除webview:

代码语言: javascript
复制
    /***
     * 防止WebView加载内存泄漏
 
推荐文章
气宇轩昂的硬盘  ·  vector存入共享内存(了解) - zzyoucan - 博客园
4 月前
虚心的薯片  ·  Eclipse安装中文语言包(官方汉化) - 知乎
1 年前
独立的草稿本  ·  javascript - js json树形对象从子级找所有外层父级ID怎么找? - SegmentFault 思否
2 年前
高大的豌豆  ·  带参数的Spring RestTemplate GET - 问答 - 腾讯云开发者社区-腾讯云
2 年前
一身肌肉的松球  ·  学习使用 Sed 文本编辑器-linux 文本编辑器
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号