一般的android介面使用的是XML。但是XML如果要製作很高階的UI，會很複雜。如果使用HTML老進行UI設計就會簡單很多。
android早就提供了這樣的藉口。
WebView.addJavascriptInterface(Object obj, String interfaceName)
其中obj是我們自己用來實現功能的一個類，interfaceName是一個物件的名稱，就是obj這個物件的名稱。
這樣說可能有點抽象，但是看一個例子就會明白。
既然是html,那肯定就要有一個HTML檔案，檔名為main.html，放置在android工程的assets資料夾下，如果沒有這個資料夾，可以在根目錄建立一個。
1 <html> 2 <script language="javascript"> 3 /* This function is invoked by the activity */ 4 /* 這個函式被Activity呼叫的活動 這裡的圖片我們可以在它的連線裡面下載 android_waving.png */ 5 function wave() { 6 /* 這裡是一個javascript 自定義函式，這是由我們在android的程式裡呼叫的，不在在HTML中呼叫*/ 7 document.getElementById("droid").src="ic_launcher.png"; 8 } 9 function hellow(){ 10 alert('hellow world'); 11 document.getElementById("droid").src="ic_launcher.png"; 12 } 13 </script> 14 <body> 15 <!-- Calls into the javascript interface for the activity --> 16 <!-- 從HTML檔案中呼叫activity中的函式 --> 17 <!-- 也就是從HTML到android程式 留意window.demo.clickOnAndroid()這句話 --> 18 <a onClick="window.asdasd.clickOnAndroid()"> 19 <div style="width:80px; 20 margin:0px auto; 21 padding:10px; 22 text-align:center; 23 border:2px solid #202020;"> 24 <!-- 圖片預設的為 android_normal.png --> 25 <img id="droid" src="android_normal.png"/><br> 26 Click me! 27 </div> 28 </a> 29 <br> 30 <button onclick="window.my.show()">click</button> 31 </body> 32 </html>
Activity檔案
1 package com.example.untitled; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.os.Handler; 6 import android.util.Log; 7 import android.webkit.JsResult; 8 import android.webkit.WebChromeClient; 9 import android.webkit.WebSettings; 10 import android.webkit.WebView; 11 import android.widget.Toast; 12 13 public class MyActivity extends Activity { 14 /** 15 * Called when the activity is first created. 16 */ 17 // @Override 18 // public void onCreate(Bundle savedInstanceState) { 19 // super.onCreate(savedInstanceState); 20 // setContentView(R.layout.main); 21 // } 22 private static final String LOG_TAG = "WebViewDemo"; 23 private WebView mWebView; 24 private Handler mHandler = new Handler(); 25 @Override 26 public void onCreate(Bundle icicle) { 27 super.onCreate(icicle); 28 setContentView(R.layout.main); 29 Toast.makeText(MyActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG); 30 31 mWebView = (WebView) findViewById(R.id.webView); 32 33 34 WebSettings webSettings = mWebView.getSettings(); 35 webSettings.setSavePassword(false); 36 webSettings.setSaveFormData(false); 37 // 下面的一句話是必須的，必須要開啟javaScript不然所做一切都是徒勞的 38 webSettings.setJavaScriptEnabled(true); 39 webSettings.setSupportZoom(false); 40 41 42 mWebView.setWebChromeClient(new MyWebChromeClient()); 43 44 // 看這裡用到了 addJavascriptInterface 這就是我們的重點中的重點 45 // 我們再看他的DemoJavaScriptInterface這個類。還要這個類一定要在主執行緒中 46 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "asdasd"); 47 mWebView.addJavascriptInterface(new myHellowWorld(),"my"); 48 49 mWebView.loadUrl("file:///android_asset/main.html"); 50 } 51 52 class myHellowWorld{ 53 myHellowWorld(){ 54 55 } 56 public void show(){ 57 mHandler.post(new Runnable(){ 58 59 @Override 60 public void run() { 61 Toast.makeText(MyActivity.this,"HELLOW WORLD", Toast.LENGTH_LONG).show(); 62 } 63 }); 64 } 65 } 66 // 這是他定義由 addJavascriptInterface 提供的一個Object 67 final class DemoJavaScriptInterface { 68 DemoJavaScriptInterface() { 69 } 70 71 /** 72 * This is not called on the UI thread. Post a runnable to invoke 73 * 這不是呼籲介面執行緒。發表一個執行呼叫 74 * loadUrl on the UI thread. 75 * loadUrl在UI執行緒。 76 */ 77 public void clickOnAndroid() { // 注意這裡的名稱。它為clickOnAndroid(),注意，注意，嚴重注意 78 mHandler.post(new Runnable() { 79 public void run() { 80 // 此處呼叫 HTML 中的javaScript 函式 81 mWebView.loadUrl("javascript:wave()"); 82 } 83 }); 84 } 85 } 86 // 線下的程式碼可以不看，除錯用的 87 /////////////////////////////////////////////////////////////////////////////////////////////////// 88 /** 89 * Provides a hook for calling "alert" from javascript. Useful for 90 * 從javascript中提供了一個叫“提示框” 。這是很有用的 91 * debugging your javascript. 92 * 除錯你的javascript。 93 */ 94 final class MyWebChromeClient extends WebChromeClient { 95 @Override 96 public boolean onJsAlert(WebView view, String url, String message, JsResult result) { 97 Log.d(LOG_TAG, message); 98 result.confirm(); 99 return true; 100 } 101 } 102 103 }
XML的配置很簡單，裡面就放一個webView就可以了
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" 4 android:layout_width="fill_parent" 5 android:layout_height="fill_parent" 6 > 7 <WebView 8 android:layout_width="fill_parent" 9 android:layout_height="match_parent" 10 android:id="@+id/webView"/> 11 </LinearLayout>
首先，我們看下程式碼，需要開啟瀏覽器對JS的支援
webSettings.setJavaScriptEnabled(true);
沒有這句，任何JS都執行不了，也就沒有意義了。
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "asdasd");
上面這句就是我們的重點了
這是說建立了一個DemoJavaScriptInterface的對像，名字是asdasd。主意html中的18行，<a onClick="window.asdasd.clickOnAndroid()">，就是說呼叫了一個asdasd的clickOnAndroid方法。
而這個裡面是不能進行UI操作的，所以需要用一個handle和一個執行緒來呼叫javascript:wave()，也就是JS中的WAVE函式
1 mHandler.post(new Runnable() { 2 public void run() { 3 // 此處呼叫 HTML 中的javaScript 函式 4 mWebView.loadUrl("javascript:wave()"); 5 } 6 });
當然也不可以不呼叫JS，呼叫java程式碼也是可以的比如說myHellowWorld中的show函式。
當然最後一句也不可少
mWebView.loadUrl("file:///android_asset/main.html");
這就是讓瀏覽器去呼叫我們的HTML檔案。