首先必要的啰嗦幾句，這幾天寫vc寫的累的要死，突然間不想再寫想vc了，手裡面有一個andriod的手機天天玩到半夜，卻從來沒有寫過這方面的程式，真的是悲哀啊。是以我就想寫這方面的程式，用管了vc的習程式的習慣，第一個程式當然是hello world。剛開始還沒有什麼大的問題，當到後面想寫一刷q*會員的程式的時候卻發現，android的界面布局是真的難啊，怎麼擺都不好看。弄得和....什麼似的。氣得頭都大了，想想自己寫了這麼長時間的vc還真的沒有碰到這樣的界面問題，真可謂..
在verycd上看人家大牛的視訊的時候聽到人家說可以用html來做android的ui界面，這不僅讓我眼前一亮。
因為我學過html開發，雖然學的不咋的，但卻要比這xml好的太多了，真的是對xml頭大...于是乎就入手andriod的html界面可是後來發現在這方面的文章那叫一個少的可惜啊，老外那邊要不就是看不懂，要不就基本和我看的内容無關。因為自己是菜鳥是以就想到找個群，蹭進去找個大牛問問，誰知道進去之後，我xxx他的，居然收費,我xx它的oo，人家android都開源了問你個破問題還收費，什麼道德啊。當時個氣氛,,,發誓要學會，在網上寫文章，讓你收費,xx你個oo的。
發洩了一通舒服多了，
ok，啰嗦的話我就不多說了。下面就開始我們的android的webview 的html界面教程吧。這裡我給大家一個國内大牛的html做界面的視訊教程，不過他老人家講的我沒有聽懂。
21.android的ui設計技巧.rar
ed2k://|file|21.android%e7%9a%84ui%e8%ae%be%e8%ae%a1%e6%8a%80%e5%b7%a7.rar|31469120|eb9c2aa5c6b9148f83f400e3af97829b|h=dxrchv3adrzynucrnnf4desotxnbzeal|/
3g手機android應用開發第八天課程1.采用html設計軟體界面.avi
ed2k://|file|3g%e6%89%8b%e6%9c%baandroid%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e7%ac%ac%e5%85%ab%e5%a4%a9%e8%af%be%e7%a8%8b1.%e9%87%87%e7%94%a8html%e8%ae%be%e8%ae%a1%e8%bd%af%e4%bb%b6%e7%95%8c%e9%9d%a2.avi|45930496|fff4499772c89db13d1ea8492ba52086|/
android開發視訊教程]02_12_json資料解
ed2k://|file|%5bandroid%e5%bc%80%e5%8f%91%e8%a7%86%e9%a2%91%e6%95%99%e7%a8%8b%5d02_12_json%e6%95%b0%e6%8d%ae%e8%a7%a3%e6%9e%90.mp4|61184962|e183bbb0e241dd21ed534afdab84b5e4|h=c7n7qzrmvutyt34z2xlt73irudlkqrhg|/
由于這裡是第一階段的webview所我就寫個最簡單的文章，這樣大家可以循環漸進的來了解addjavascriptinterface這句話是怎麼用的。
他的代碼為：
<html>
<script language="javascript">
/* this function is invoked by the activity */
/* 這個函數被activity調用的活動 這裡的圖檔我們可以在它的連接配接裡面下載下傳 android_waving.png */
function wave() {
/* 這裡是一個javascript 自定義函數，這是由我們在android的程式裡調用的，不在在html中調用*/
document.getelementbyid("droid").src="android_waving.png";
}
</script>
<body>
<!-- calls into the javascript interface for the activity -->
<!-- 從html檔案中調用activity中的函數 -->
<!-- 也就是從html到android程式 留意window.demo.clickonandroid()這句話 -->
<a onclick="window.demo.clickonandroid()"><div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<!-- 圖檔預設的為 android_normal.png -->
<img id="droid" src="android_normal.png"/><br>
click me!
</div></a>
</body>
</html>
由于他的源碼比較長，我就不多全部都貼進來了，我隻貼一下重要的部分就好了.......貌似都重要，還是全貼吧
package com.google.android.webviewdemo;
import android.app.activity;
import android.os.bundle;
import android.os.handler;
import android.util.log;
import android.webkit.jsresult;
import android.webkit.webchromeclient;
import android.webkit.websettings;
import android.webkit.webview
public class webviewdemo extends activity {
private static final string log_tag = "webviewdemo";
private webview mwebview;
private handler mhandler = new handler();
@override
public void oncreate(bundle icicle) {
super.oncreate(icicle);
setcontentview(r.layout.main);
mwebview = (webview) findviewbyid(r.id.webview);
websettings websettings = mwebview.getsettings();
websettings.setsavepassword(false);
websettings.setsaveformdata(false);
// 下面的一句話是必須的，必須要打開javascript不然所做一切都是徒勞的
websettings.setjavascriptenabled(true);
websettings.setsupportzoom(false);
mwebview.setwebchromeclient(new mywebchromeclient());
// 看這裡用到了 addjavascriptinterface 這就是我們的重點中的重點
// 我們再看他的demojavascriptinterface這個類。還要這個類一定要在主線程中
mwebview.addjavascriptinterface(new demojavascriptinterface(), "demo");
mwebview.loadurl("file:///android_asset/demo.html");
}
// 這是他定義由 addjavascriptinterface 提供的一個object
final class demojavascriptinterface {
demojavascriptinterface() {
}
/**
* this is not called on the ui thread. post a runnable to invoke
* 這不是呼籲界面線程。發表一個運作調用
* loadurl on the ui thread.
* loadurl在ui線程。
*/
public void clickonandroid() { // 注意這裡的名稱。它為clickonandroid(),注意，注意，嚴重注意
mhandler.post(new runnable() {
public void run() {
// 此處調用 html 中的javascript 函數
mwebview.loadurl("javascript:wave()");
});
// 線下的代碼可以不看，調試用的
///////////////////////////////////////////////////////////////////////////////////////////////////
/**
* provides a hook for calling "alert" from javascript. useful for
* 從javascript中提供了一個叫“提示框” 。這是很有用的
* debugging your javascript.
* 調試你的javascript。
*/
final class mywebchromeclient extends webchromeclient {
@override
public boolean onjsalert(webview view, string url, string message, jsresult result) {
log.d(log_tag, message);
result.confirm();
return true;
}
這裡我也做了注釋，在這裡他在他的類中定義了一個 clickonandroid() 的函數，我記不記得我們在html中看到的 window.demo.clickonandroid() 這句話。如果忘記了就翻上去再看一下，特别是我說注意的地方。是的，這裡的 clickonandroid() 是我們android程式中的一個函數。可能你會問那.為什麼是windows.demo.這裡demo我們可以看到在
mwebview.addjavascriptinterface(new demojavascriptinterface(), "demo");
這句話 中後面它加了一個demo這個字元.我可以了解成 addjavascriptinterface 的前一個參數為html中的一個方法，當然我更喜歡說他為函數。demo就是個對象...呵呵，我對這也不是怎麼的熟悉。至于這個window我也不知道是為什麼我隻知道這樣寫程式就可以正确的運作，如果你知道這是什麼那麼請你在下面的留言版裡告訴我一下好嗎？
現在知道怎麼在html中怎麼調用android程式的一個方法了吧。其實就是這這麼的簡單，不過demo這個字元我沒有試他是不是區分大小寫。如果你有興趣那麼你可以去試一下它有沒有區分大小寫。知道了怎麼樣從html中怎麼樣調用android中的方法，下面我就再研究一下，它是怎麼樣從android到html的吧。其實這個很簡單，隻要使用
mwebview.loadurl("javascript:wave()");
這句話就可以了。
這樣我主解讀完google給我提供的一個demo了。下面就是讓我來試一下吧，試試他的這個demo吧，因為人家給提供了源碼，是以我就不貼的啦，大家把他的源碼貼上去就可以實作這個啦
在下一集裡我将會帶領大家來怎麼使用 addjavascriptinterface 怎麼樣從一個javascript 的函數中獲得一個傳回值。文章内容不多，還請見諒
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)