Android UI 使用HTML布局（直接打开服务器网页）

很多时候我们用HTML布局会更方便直接，记录一下。

我现在主要是直接调用服务器的网页（实际上是jsp的，只是返回的是html），所以需要联网，第一步添加权限。

[html]  view plain copy

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

布局文件直接用一个WebView，如下：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <WebView  
8.         android:id="@+id/webView1"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent" />  
11.   
12. </LinearLayout>  

下面就可以直接写代码了：

[java]  view plain copy

1. package com.yangshidesign.testgryoscope;  
2.   
3. import android.app.Activity;  
4. import android.os.Bundle;  
5. import android.util.Log;  
6. import android.webkit.JavascriptInterface;  
7. import android.webkit.WebView;  
8. import android.widget.Toast;  
9.   
10. public class AddEmojiActivity extends Activity {  
11.     private WebView webView;  
12.       
13.     @Override  
14.     protected void onCreate(Bundle savedInstanceState) {  
15.         super.onCreate(savedInstanceState);  
16.         this.setContentView(R.layout.activity_addemoji);  
17.           
18.         webView = (WebView) this.findViewById(R.id.webView1);  
19.           
20.         webView.getSettings().setJavaScriptEnabled(true);  
21.         webView.addJavascriptInterface(new WebPlugin(), "WebPlugin");  
22.           
23.         webView.loadUrl(this.getString(R.string.server_url));  
24.     }  
25.       
26.     /** 
27.      * 插件类，在html的js里面直接调用 
28.      */  
29.     private class WebPlugin {  
30.           
31.         @JavascriptInterface  
32.         public void test() {  
33.             Log.e("miquan", "kkkkkk");  
34.             Toast.makeText(AddEmojiActivity.this, "test toast ", Toast.LENGTH_SHORT).show();  
35.         }  
36.           
37.         @JavascriptInterface  
38.         public String test2() {  
39.             return "something";  
40.         }  
41.     }  
42. }  

其中@JavascriptInterface注解是添加在每一个需要用到的方法上面的。

最后就可以直接在HTML网页上调用了。

[html]  view plain copy

1. <script type="text/javascript">  
2.     function test() {  
3.         WebPlugin.test();  
4.         var something = WebPlugin.test2();  
5.     }  
6. </script>