Android开发必知--WebView加载html5实现炫酷引导页面

  大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5做出手机引导页面,然后将其嵌入APP中。

  首先我们分析一下,都需要做哪些工作?

  1、制作html5引导页面。

  2、把做好的页面放入Android工程中assets文件夹下。

  3、利用WebView加载asset文件夹下的html文件。

  4、在引导页最后一页的按钮上捕捉点击事件,结束引导页,进入程序。

  简单的讲,整个工作就分以上四步,其中涉及到了Android中一个自带的浏览器控件--WebView,在介绍引导页之前,先来大体说一下WebView的基本用法。

一、使用WebView浏览网页

  用WebView浏览网页,这是最常用也是最简单的用法,与普通的ImageView组件的用法基本相似,它也提供了大量方法来执行浏览器操作,常用的几个如下:

  ·void goBack():后退。

  ·void goForward():前进。

  ·void loadUrl(String url):加载url网页。

  ·boolean zoomIn():放大网页。

  ·boolean zoomOut():缩小网页。

  ……

  下面看一个例子,通过WebView浏览百度首页,效果图如下。

  首先不要忘了在AndroidMainfest.xml加入访问网络的权限:

<uses-permission android:name="android.permission.INTERNET"/>

  布局文件如下:

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:id="@+id/container"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:orientation="vertical" >
 7     <WebView
 8         android:id="@+id/wv_webview"
 9         android:layout_width="fill_parent"
10         android:layout_height="fill_parent" />
11 </LinearLayout>

   java代码如下:

 1 public class WebViewLoadWeb extends Activity {
 2     WebView webView;
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.webview);
 7         webView = (WebView)findViewById(R.id.wv_webview);
 8         loadWeb();
 9     }
10     public void loadWeb(){
11         String url = "https://www.baidu.com/";
12         //此方法可以在webview中打开链接而不会跳转到外部浏览器
13         webView.setWebViewClient(new WebViewClient());
14         webView.loadUrl(url);
15     }
16     @Override
17     public boolean onKeyDown(int keyCode, KeyEvent event) {    
18         //重写onKeyDown,当浏览网页,WebView可以后退时执行后退操作。
19         if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
20             webView.goBack();
21             return true;
22         } 
23         return super.onKeyDown(keyCode, event);
24     }
25 }

  上面代码首先加载布局文件中WebView视图,然后通过setWebViewClient()方法设置了打开新连接不会跳转到外部浏览器。最后通过loadUrl()方法加载了网址。至于该WebView如何发送请求,如何解析服务器,这些细节对我们来说是完全透明的,我们不需要关心。

  另外需要一提的是,当使用WebView浏览网页时,不做处理的话,按下手机的返回键会直接结束WebView所在的Activity,通过重写onKeyDown()方法,当WebView可以返回时,让其执行返回操作。

二、使用WebView加载HTML代码。

  WebView提供了一个loadData(String data, String mimeType, String encoding)方法,该方法可用于加载并显示HTML代码,不过这个方法在加载html代码时很可能会出现乱码的现象。建议用WebView的另一个方法loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)。可以把这个方法认为是loadData()的增强版,它不会产生乱码。以下是他的几个参数说明:

  ·data:指定需要加载的html代码。

  ·mimeType:指定html代码的MIME类型,对于HTML代码可指定为text/html。

  ·encoding:指定html代码编码所用的字符集。

  下面看一个使用WebView加载html代码的简单实例,效果图如下:

  java代码如下:

 1 public void loadHtmlData(){
 2         String data = "<html>"
 3                 + "<head>"
 4                 + "<title>欢迎您</title>"
 5                 + "</head>"
 6                 + "<body>"
 7                 + "<p>我是一段html代码</p>"
 8                 + "</body>"
 9                 + "</html>";
10         webView.setWebViewClient(new WebViewClient());
11         //使用简单的loadData()方法总会导致乱码,有可能是Android API的Bug
12         //webView.loadData(data, "text/html", "GBK");
13         webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
14}

  上面代码很简单,就是用loadDataWithBaseURL()方法加载html代码,在这里就不过多介绍了。

  下面进入本篇介绍的重点,通过加载本地html文件实现炫酷引导页。

三、加载本地HTML文件实现炫酷引导页。

  接下来为本篇重点,通过加载H5的方式可以很轻松做出炫酷的引导页,当然前提时你得先做出或者找到一个很好H5引导页文件。需要说明的都已经在文章开头说过了,就不废话了,先上效果图:

  相信不用我解释大家就能看懂,最左边的是第一张页面,中间的是过度动画效果,最右边的是最后一张,其中在最后一张上面有个按钮,捕捉到这个按钮的跳转链接是关键。下面先来看代码(html文件在assets文件夹下):

 1 public class WebViewLoadHtml extends Activity {
 2     private String url;
 3     WebView webView;
 4     @Override
 5     protected void onCreate(Bundle savedInstanceState) {
 6         super.onCreate(savedInstanceState);
 7         //将屏幕设置为全屏
 8         getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
 9         //去掉标题栏
10         requestWindowFeature(Window.FEATURE_NO_TITLE);
11         setContentView(R.layout.webview);
12         webView = (WebView)findViewById(R.id.wv_webview);
13         url = "file:///android_asset/guide/index.html";
14         loadLocalHtml(url);
15     }
16     
17     @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
18     public void loadLocalHtml(String url){
19         WebSettings ws = webView.getSettings();
20         ws.setJavaScriptEnabled(true);//开启JavaScript支持
21         webView.setWebViewClient(new WebViewClient(){
22             @Override
23             public boolean shouldOverrideUrlLoading(WebView view, String url) {
24                 //重写此方法,用于捕捉页面上的跳转链接
25                 if ("http://start/".equals(url)){
26                     //在html代码中的按钮跳转地址需要同此地址一致
27                     Toast.makeText(getApplicationContext(), "开始体验", Toast.LENGTH_SHORT).show();
28                     finish();
29                 } 
30                 return true;
31             }
32         });
33         webView.loadUrl(url);
34     }
35 }

  上面代码首先将程序设为全屏无标题栏,这样才更像引导页(注:截图中没有全屏是应为使用截图工具时唤出了状态栏)。需要注意的是当加载具有js的文件时需通过WebSettings的setJavaScriptEnabed()方法开启对js的支持。然后通过setWebViewClient()重写shouldOverrideUrlLoading()方法,具体用法源码注释中已给出。

  其中用到html文件的按钮跳转链接的源码如下:

1 <div class="swiper-slide">
2        <span>第三页</span>
3        <span class="subtitle">这是第三页</span>
4        <a href="javascript:" onClick="window.open('http:start')" class="swiper_read_more">开启APP之旅</a>
5 </div>

  本篇博文中涉及到的全部Android代码和html文件已分享到百度云盘,下载链接:http://pan.baidu.com/s/1hrm9bXa

 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏phodal

我们是如何将 Cordova 应用嵌入到 React Native 中

重写一个应用是一件简单的事,可是演进一个应用则是一件复杂的工作。 过去的一年多里,我在工作上的主要职责是:手机 APP 开发。日常主要是编写基于 Ionic 和...

2306
来自专栏非著名程序员

在开发中实现点击 WebView 中的图片,调用原生控件放大展示

现在有很多时候,我们的 App 都进行了混合开发,而最简单,最常用的就是有些网页采用了 WebView 进行展示,这就需要我们了解和懂得如何实现 WebView...

1745
来自专栏Android干货园

【PageLayout】非常简单的一键切换加载-空数据-错误页,支持自定义

Android中经常使用一个空白页和网络错误页用来提高用户体验,给用户一个较好的感官,如果获取到的数据为空,那么会显示一个空白数据页,如果在获取数据的过程中网络...

713
来自专栏james大数据架构

android 中resources管理

主要存在于res/value文件夹中 定义: dimen.xml:主要用于设置像素默认值 <resources> res/values/dimens.xml...

1858
来自专栏郭霖

Android ListView功能扩展,实现高性能的瀑布流布局

经过前面两篇文章的学习,我们已经对ListView进行了非常深层次的剖析,不仅了解了ListView的源码和它的工作原理,同时也将ListView中常见的一些问...

2996
来自专栏林冠宏的技术文章

解决 android 高低版本 webView 里内容 自适应屏幕的终极方法

转载请声明出处(https://cloud.tencent.com/developer/user/1148436/activities) 一,先说下我的情况,...

2035
来自专栏分享达人秀

过时但仍值得学习的选项卡TabHost

今天来了解一个过时的组件,了解的目的不是学会用起来开发,而是了解这种界面的设计和其特点,后期可以用其他方式来替代。 一、TabHost概述 T...

2109
来自专栏菩提树下的杨过

silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时,不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好),很多时候我们希望在运行时能动态控...

17910
来自专栏非典型技术宅

断言和分段控制器1. 断言(Assertions)2. 分段控制器(UISegmentedControl)

813
来自专栏学海无涯

Android开发之高德地图实现定位

在应用开发中,地图开发是经常需要使用的“组件”,Google Map虽然有官方教程,无奈用不起来,原因你懂的~~那么国内比较出名的是就是百度地图和高德地图,由于...

3404

扫码关注云+社区