Android加载html5优化,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加入访问网络的权限：

布局文件如下：

1

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

9 android:layout_width="fill_parent"

10 android:layout_height="fill_parent" />

11

java代码如下：

1 public class WebViewLoadWeb extendsActivity {2 WebView webView;3 @Override4 protected voidonCreate(Bundle savedInstanceState) {5 super.onCreate(savedInstanceState);6 setContentView(R.layout.webview);7 webView =(WebView)findViewById(R.id.wv_webview);8 loadWeb();9 }10 public voidloadWeb(){11 String url = "https://www.baidu.com/";12 //此方法可以在webview中打开链接而不会跳转到外部浏览器

13 webView.setWebViewClient(newWebViewClient());14 webView.loadUrl(url);15 }16 @Override17 public boolean onKeyDown(intkeyCode, 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 voidloadHtmlData(){2 String data = ""

3 + "

"

4 + "

欢迎您"

5 + ""

6 + "

"

7 + "

我是一段html代码

"

8 + ""

9 + "";10 webView.setWebViewClient(newWebViewClient());11 //使用简单的loadData()方法总会导致乱码，有可能是Android API的Bug12 //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 extendsActivity {2 privateString url;3 WebView webView;4 @Override5 protected voidonCreate(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 voidloadLocalHtml(String url){19 WebSettings ws =webView.getSettings();20 ws.setJavaScriptEnabled(true);//开启JavaScript支持

21 webView.setWebViewClient(newWebViewClient(){22 @Override23 public booleanshouldOverrideUrlLoading(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

2 第三页

3 这是第三页

4 开启APP之旅

5