WebViewについて
現在のandroid市場のいくつかのアプリケーションが採用している開発方式は、Native App、Web App、Hybrid Appの3つに大きく分けられていることを知っています.本文は主にHybrid Appで実現される主な技術nativeコンポーネントとjsのデータインタラクションの理解と実現である.
 
Android APIでは、htmlのレンダリングを実現するためにWebViewコンポーネントが提供されています.HybridApp開発方式とは,HTML 5,CSS 3,jSに関する開発技術や,データ交換フォーマットjson/XMLを集約したものである.これは明らかにWeb開発エンジニアのスキルです.そのため、多くの中小企業がandroid開発エンジニアへの過度な依存を減らすためにこのような開発方式を選んだが、この3つの開発方式の比較と優劣は本稿では考慮しない.
 
WebViewというコンポーネントがあれば、Androidアプリケーション開発技術もhtmlとjavaデータのインタラクションに転嫁します.明らかにjsとWebViewのデータインタラクションであり,これが本稿で論じる.
WebViewとjsのデータインタラクション
1.WebViewに静的ページを読み込む
 
WebViewをアプリケーションに追加します.オリジナルコントロールと同様にlayoutにWebViewコントロールを導入します.コードクリップは次のとおりです.

ページの読み込み:
 

webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("file:///file:///android_asset/page.html");

page.htmlは、エンジニアリングファイルのassetsルートディレクトリに格納されます.
2.jquery mobileの導入
jsフレームワークを導入することで、作成したhtmlページをオリジナルコントロールの表示効果に近づけます.現在主流のモバイルアプリケーションjsフレームワークは、jquery mobileとsencha touch(jquery mobileとsencha touchの選択型は本明細書で議論する範囲外)である.この文書では、jquery mobileを使用することを選択します.
 
まず、webviewにjsのサポートを追加します.

WebSettings setting = webView.getSettings();
setting.setJavaScriptEnabled(true);//  js

中国語のサポートを追加:

WebSettings setting = webView.getSettings();
setting.setDefaultTextEncodingName("GBK");//      

ページスクロールバースタイルを設定するには、次の手順に従います.

webView.setScrollBarStyle(0);//     ， 0         ，        

jquery mobileが提供する標準ページテンプレートTemplate Template ForJQuery.html:

 
 
	 
	 
	
	 

	
	
	
 
 



	

		
Page Title
	


	
	
		
Page content goes here.
		
	


	

		
Page Footer
	

ページ jsライブラリ、cssなどはassetsディレクトリの に され、ディレクトリの は の りです.
のスクリーンショットを します.
はbuttonのスクリーンショットで、 コントロールとは らかな いはなく、 の じがします.
3. なユーザー
たちのアプリケーションを すると、jsが にあるページがロードされている 、ずっと っていたことがわかります.これは いユーザー です.プログレスバー に できます.Webviewが する2つの に してください.setWebViewClientとsetWebChromeClientです.ここでsetWebChromeClientメソッドはprogressのロードを できるほか、jsダイアログボックスを したり、webviewにiconアイコンなどを したりすることもできます.progressを するコードフラグメントは、 のとおりです.

webView.setWebChromeClient(new WebChromeClient() {
	public void onProgressChanged(WebView view, int progress) {//          
			if (progress == 100) {
					handler.sendEmptyMessage(1);//       ,       
			}
				super.onProgressChanged(view, progress);
		}
});

UIスレッドの はhandlerメッセージメカニズムによって されます.
 

		handler = new Handler() {
			public void handleMessage(Message msg) {//     Handler，         UI   
				if (!Thread.currentThread().isInterrupted()){
					switch (msg.what) {
					case 0:
						pd.show();//        
						break;
					case 1:
						pd.hide();//        ，    dismiss()、cancel(),      show() ，            。
						break;
					}
				}
				super.handleMessage(msg);
			}
		};

setWebViewClientメソッドでは、htmlのロード(onPageStarted(WebViewview,String url,Bitmap favicon)のリロード、クローズ(onPageFinished(WebViewview,String url)メソッドのリロードが )の に に されます.
 
setWebViewClientとsetWebChromeClientの : は にwebViewの 、 えばロード、クローズ、エラー などを するために される. は にjsダイアログ、アイコン、ページタイトルなどを する.
4.javaのデータを する
jsとjavaのデータの を する しとしてインタフェースを で し, でカプセル したコードAndroidToastForJs.JAvaは の りです.

public class AndroidToastForJs {
	
	private Context mContext;

public AndroidToastForJs(Context context){
		this.mContext = context;
	}
	
//webview   toast    
public void showToast(String toast) {
		Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
	}
	
//webview   
public int sum(int a,int b){
		return a+b;
	}
	
 // json  webview js       
public String jsontohtml(){
		JSONObject map;
		JSONArray array = new JSONArray();
		try {
			map = new JSONObject();
			map.put("name","aaron");
			map.put("age", 25);
			map.put("address", "    ");
			array.put(map);
			
			map = new JSONObject();
			map.put("name","jacky");
			map.put("age", 22);
			map.put("address", "    ");
			array.put(map);
			
			map = new JSONObject();
			map.put("name","vans");
			map.put("age", 26);
			map.put("address", "    ");
			map.put("phone","13888888888");
			array.put(map);
		} catch (JSONException e) {
			e.printStackTrace();
		}
		return array.toString();
	}
}

 
Webviewが するjsへの :

webView.addJavascriptInterface(new AndroidToastForJs(mContext), "JavaScriptInterface");

HtmlページjsonData.html の のコードは の りです.

	
	var result = JavaScriptInterface.jsontohtml();
	var obj = eval("("+result+")");//  json   
	function showAndroidToast(toast) 
	{        
		JavaScriptInterface.showToast(toast); 
    }
	function getjsonData(){
		var result = JavaScriptInterface.jsontohtml();
		var obj = eval("("+result+")");//  json   
		for(i=0;i<obj.length;i++){
			var user=obj[i];
			document.write("<p>  :"+user.name+"</p>");
			document.write("<p>  :"+user.age+"</p>");
			document.write("<p>  :"+user.address+"</p>");
			if(user.phone!=null){
				document.write("<p>    :"+user.address+"</p>");
			}
		}
	}	
	function list(){
		document.write("<div data-role='header'><p>another</p></div>");
	}
	
 
 

	

		
Android via Interface
	

	
	
		
			
	


   
I'm document.write(obj[0].name);,click to see my info
   
document.write("<p>  ："+obj[0].name+"</p>");
   
document.write("<p>  ："+obj[0].age+"</p>");
   
document.write("<p>  ："+obj[0].address+"</p>");

	

		
Page Footer
	

say helloボタンをクリックして実行するスクリーンショットは以下の通りです.