如何在WebView中建立Android Apps

1. Web Apps的兩種形式

在Android中，Web
Apps有兩種形式供使用者訪問。一種就是用手機上的瀏覽器直接存取的網路應用程式，這種情況使用者不需要額外安裝其他應用，只要有瀏覽器就行；而另一種，則
是在使用者的手機上安裝用戶端應用程式(.apk)，並在此用戶端程式中嵌入Web
View來顯示從伺服器端下載下來的網頁資料，比如新浪微博和人人網的用戶端。對於前者來說，主要的工作是根據手機用戶端的螢幕來調整網頁的顯示尺寸、比
例等；而後者需要單獨開發基於Web View的Web app. 本篇主要是學習後者的開發。

2. 怎樣在Android應用程式中加入Web View？

2.1 先在layout檔案中加入<WebView>元素

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/webview"   
android:layout_width="fill_parent"    android:layout_height="fill_parent"/>

2.2 由於應用程式需要訪問網路，所以需要在AndroidManifest.xml中請求網路許可權的：

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

2.3 使用Web View：
內陸運輸

WebView myWebView = (WebView) findViewById(R.id.webview);

2.4 載入一個頁面，可以用loadUrl()方法，例如：

myWebView.loadUrl("http://www.xxx.com");

3. 在Web View 中使用JavaScript

3.1 如果你載入到 Web View 中的網頁使用了JavaScript，那麼，需要在Websetting 中開啟對JavaScript的支援，因為Web View 中預設的是JavaScript未啟用。

1234 // 擷取 WebSetting 

WebSettings webSettings = myWebView.getSettings(); // 開啟Web View對JavaScript的支援 webSettings.setJavaScriptEnabled(true);

3.2 將JavaScript與Android用戶端代碼進行綁定。

為什麼要綁定呢？ 可以看這個例子：如果JavaScript
代碼想利用Android的代碼來顯示一個Dialog,而不用JavaScript的alert()方法，這時就需要在Android代碼和
JavaScript代碼間建立介面，這樣在Android代碼中實現顯示對話方塊的方法，然後JavaScript調用此方法。

1）建立 Android代碼和JavaScript代碼的介面，即建立一個類，類中所寫的方法將被JavaScript調用

public class JavaScriptInterface {女裝品牌熱門排行榜      
Context mContext;      
/** 初始化context，供makeText方法中的參數來使用 */   
JavaScriptInterface(Context c) {        
mContext = c;    
} 

/** 建立一個方法，實現顯示對話方塊的功能，供JavaScript中的代碼來調用 */   

public void showToast(String toast) {       
 Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();    
} 
 }

2）通過調用addJavascriptInterface方法，把我們上面建立的介面類綁定與運行在Web View上的JavaScript進行綁定。

12 // 第二個參數是為這個介面對象取的名字，以方便JavaScript調用

webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

3）現在，我們可以在html中的JavaScript部分調用showToast()方法了。

 <script type="text/javascript">    
function showAndroidToast(toast) {        
Android.showToast(toast);    
}
</script>  
<input type="button" value="Say hello"
onClick="showAndroidToast('Hello Android!')" />

4. 處理頁面導航

當使用者在Web View中點擊頁面上的超連結時，
Android的預設行為是啟動一個能處理URL的應用程式，通常情況下是啟動預設的瀏覽器。而如果我們想用當前的Web
View開啟頁面，則需要重載這個行為。這樣我們就可以通過操作Web View的記錄來向前和向後導航。

4.1 為Web View提供一個WebViewClient，從而在WebView中開啟使用者的連結。 如果我們想對載入頁面有跟多的控制，可以繼承並實現一個複雜的WebViewClient

myWebView.setWebViewClient(new WebViewClient());

private class MyWebViewClient extends WebViewClient {     @Override   
 public boolean shouldOverrideUrlLoading(WebView view, String url) {        
if (Uri.parse(url).getHost().equals("www.example.com")) {            
// This is my web site, so do not override; let my WebView load the page            
return false;        
}        
// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs        
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));        
startActivity(intent);        
return true;    
}
}

4.2 利用Web View的記錄來實現頁面navigate backword.

重載Activity中的onKeyDown方法，實現此功能：

@Override   
public boolean onKeyDown(int keyCode, KeyEvent event) {    
// Check if the key event was the BACK key and if there's history     if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {        
myWebView.goBack();        
return true;    
}    
// If it wasn't the BACK key or there's no web page history, bubble up to the default    
// system behavior (probably exit the activity)    
return super.onKeyDown(keyCode, event);
}

5. 現在應用以上知識，實現一個簡單的基於Web View的Android 應用程式

程式的功能主要是：當進入程式後，顯示一個網頁，此頁面上有一個新聞超連結，使用者點擊超連結，在Web View中載入新聞的內容頁面。

5.1 建立含有Web View的Activity：Home.java

package com.WebApp;
 import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;  
public class Home extends Activity {    
// declare a WebView    
private WebView myWebView;      
@Override    
public void onCreate(Bundle icicle) {        
super.onCreate(icicle);        
setContentView(R.layout.main);                  
// initialize the WebView        
myWebView = (WebView) findViewById(R.id.webview);                  
/* Enable the JavaScript in Web View */       
WebSettings webSettings = myWebView.getSettings();         webSettings.setJavaScriptEnabled(true);          
// bind the Android code to JavaScript code         myWebView.addJavascriptInterface(new myJavaScriptInterface(), "myJS");                 
 // load a web page         myWebView.loadUrl("file:///android_asset/first.html");    
}      
/**     
* This class is an interface between Android and JavaScript     
* whose methods can be accessed by JavaScript code     
*/   
final class myJavaScriptInterface {          
myJavaScriptInterface() {        
}          
/**         
* load the content page         
*/       
public void LoadContentPage() {            
myWebView.loadUrl("file:///android_asset/second.html");        
}    
}          
@Override    
public boolean onKeyDown(int keyCode, KeyEvent event) {       
 // Check if the key event was the BACK key and if there's history        
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()){            
myWebView.goBack();            
return true;        
}       
 // If it wasn't the BACK key or there's no web page history, bubble up to the default        
// system behavior (probably exit the activity)        
return super.onKeyDown(keyCode, event);    
}
}

5.2 在Android專案檔下的assets目錄下建立一個名為first.html的頁面作為首頁

 <html>        
<body>           
 <!-- 調用Android代碼中的方法 -->           
<a onClick="window.myJS.LoadContentPage()" style="text-decoration: underline">            
Google+ is now under testing!            
</a>        
</body> </html>

5.3 在Android專案檔下的assets目錄下建立一個名為second.html的頁面作為內容頁

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Google+ is under testing</title>

</head>

<body> Google+ is in limited Field Trial Right now, we're
testing with a small number of people,  but it won't be long before the
Google+ project is ready for everyone.  Leave us your email address and
we'll make sure you're the first to know when we're ready to invite more
people.

</body>  

</html>

5.4 運行程式，測試