最近在使用WebView做UI，UI交給做網頁的來寫，的卻省事，重要的是美化效果還不錯，這里就不多說了
今天要做一個日期選擇界面，剛剛開始我想：既然是用HTML寫的UI，寫上JS代碼，實現日歷選擇那就行了。但是做出來的效果並不理想
這里是一部分截圖，當輸入框控件在屏幕邊上的時候，這時候選擇器就不能完全顯示出來，用戶體驗不好，然后試着把選擇器始終放在一個位置，但是效果也不好。
想到Android本身就有DatePicker和TimePicker控件的，為何不直接使用呢。於是做了個效果還不
點擊輸入框彈出系統的日歷設置工具
設置好了返回在輸入框上
不用寫上復雜的JS代碼了。。。。。代碼如下
1 import java.util.Calendar; 2 import org.json.JSONException; 3 import org.json.JSONObject; 4 import android.app.Activity; 5 import android.app.DatePickerDialog; 6 import android.app.DatePickerDialog.OnDateSetListener; 7 import android.os.Bundle; 8 import android.os.Handler; 9 import android.webkit.WebView; 10 import android.widget.DatePicker; 11 12 public class MyWebViewTestActivity extends Activity { 13 public WebView webView; 14 15 // Handler handler; 16 17 @Override 18 public void onCreate(Bundle savedInstanceState) { 19 super.onCreate(savedInstanceState); 20 setContentView(R.layout.main); 21 22 webView = (WebView) findViewById(R.id.myWebView); 28 webView.getSettings().setJavaScriptEnabled(true); 29 webView.addJavascriptInterface(new ProxyBridge(), "ProxyBridge"); 30 webView.loadUrl("file:///android_asset/index.html"); 31 } 32 33 class ProxyBridge { 34 String date; 35 String json_date; 36 DatePickerDialog pickerDialog; 37 Handler handler = new Handler(); 38 public void getDateTime() { 39 handler.post(new Runnable() { 40 @Override 41 public void run() { 42 final Calendar cd = Calendar.getInstance(); 43 pickerDialog = new DatePickerDialog( 44 MyWebViewTestActivity.this, 45 new OnDateSetListener() { 46 47 @Override 48 public void onDateSet(DatePicker view, 49 int year, int monthOfYear, 50 int dayOfMonth) { 51 try { 52 date = String.valueOf(year) + "-" 53 + String.valueOf(monthOfYear) 54 + "-" 55 + String.valueOf(dayOfMonth); 56 JSONObject map = new JSONObject(); 57 map.put("date", date); 58 // json_date = "[{\"time\":\"2012-02-18\"}]"; 59 json_date = map.toString(); 60 } catch (JSONException e) { 61 e.printStackTrace(); 62 } 63 webView.loadUrl("javascript:setDateTime(" 64 + json_date + ")"); 65 } 66 }, cd.get(Calendar.YEAR), cd.get(Calendar.MONTH), 67 cd.get(Calendar.DAY_OF_MONTH)); 68 pickerDialog.show(); 69 } 70 }); 71 }; 73 } 74 }
以下是HTML的測試代碼
<html>
<head>
<title>日期選擇測試</title>
<script language="javascript">
function setDateTime(JSONdate){
var jsonobjs = eval(JSONdate);
var date=jsonobjs.date;
document.getElementById("datetext").value=date;
}
</script>
</head>
<body>
<form>
<input type="text" id="datetext"
onclick="window.ProxyBridge.getDateTime();" value="" />
</form>
</body>
</html>
簡單而又方便