Android開發必知--WebView加載html5實現炫酷引導頁面

時間 2019-11-20

標籤 android 開發 webview 加載 html5 html 實現引導頁面欄目 Android 简体版

原文原文鏈接

　　大多數人都知道，一個APP的引導頁面仍是挺重要的，不過要想經過原生的Android代碼作出一個很是炫酷的引導頁相對仍是比較複雜的，正巧html5在製做炫酷動畫網頁方面比較給力，咱們不妨先利用html5作出手機引導頁面，而後將其嵌入APP中。javascript

　　首先咱們分析一下，都須要作哪些工做？html

　　一、製做html5引導頁面。html5

　　二、把作好的頁面放入Android工程中assets文件夾下。java

　　三、利用WebView加載asset文件夾下的html文件。
android

　　四、在引導頁最後一頁的按鈕上捕捉點擊事件，結束引導頁，進入程序。web

　　簡單的講，整個工做就分以上四步，其中涉及到了Android中一個自帶的瀏覽器控件--WebView，在介紹引導頁以前，先來大致說一下WebView的基本用法。瀏覽器

1、使用WebView瀏覽網頁服務器

　　用WebView瀏覽網頁，這是最經常使用也是最簡單的用法，與普通的ImageView組件的用法基本類似，它也提供了大量方法來執行瀏覽器操做，經常使用的幾個以下：網絡

　　·void goBack()：後退。ide

　　·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能夠返回時，讓其執行返回操做。

2、使用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文件實現炫酷引導頁。

3、加載本地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>