酷炫实现WebView与Native完美融合

最新推荐文章于 2024-08-18 21:06:49 发布

置顶

先知丨先觉

最新推荐文章于 2024-08-18 21:06:49 发布

阅读量6.2k

点赞数 9

分类专栏：安卓菜鸟进阶安卓菜鸟进阶文章标签： webview native android

本文链接：https://blog.csdn.net/github_33304260/article/details/75330191

版权

本文介绍了如何实现WebView与Native应用的完美融合，包括使Web页面和WebView透明，阻止跳转到系统浏览器，以及WebView的缓存管理和定时清理策略。提供了详细步骤和代码示例，帮助开发者打造酷炫的混合应用体验。

摘要由CSDN通过智能技术生成

##前言
首先看个效果图：
这里背景是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_33