Android UI 使用HTML佈局（直接打開服務器網頁）

很多時候我們用HTML佈局會更方便直接，記錄一下。

我現在主要是直接調用服務器的網頁（實際上是jsp的，只是返回的是html），所以需要聯網，第一步添加權限。

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

佈局文件直接用一個WebView，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

下面就可以直接寫代碼了：

package com.yangshidesign.testgryoscope;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.Toast;

public class AddEmojiActivity extends Activity {
	private WebView webView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		this.setContentView(R.layout.activity_addemoji);
		
		webView = (WebView) this.findViewById(R.id.webView1);
		
		webView.getSettings().setJavaScriptEnabled(true);
		webView.addJavascriptInterface(new WebPlugin(), "WebPlugin");
		
		webView.loadUrl(this.getString(R.string.server_url));
	}
	
	/**
	 * 插件類，在html的js裏面直接調用
	 */
	private class WebPlugin {
		
		@JavascriptInterface
		public void test() {
			Log.e("miquan", "kkkkkk");
			Toast.makeText(AddEmojiActivity.this, "test toast ", Toast.LENGTH_SHORT).show();
		}
		
		@JavascriptInterface
		public String test2() {
			return "something";
		}
	}
}

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

最後就可以直接在HTML網頁上調用了。

<script type="text/javascript">
	function test() {
		WebPlugin.test();
		var something = WebPlugin.test2();
	}
</script>