大多數人都知道，一個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。
歡迎轉載，轉載時請注明本文地址：http://www.cnblogs.com/codingblock/p/4742580.html。