android使用html+javascript来制作页面

一般的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="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文件。