JavaScriptからネイティブのUIを変更する(Android) のバックアップの現在との差分(No.0)

追加された行はこの色です。
削除された行はこの色です。
[[Android関連]] > JavaScriptからネイティブのUIを変更する(Android)
* JavaScriptからネイティブのUIを変更する(Android) [#c82aa6e6]
#setlinebreak(on)

#contents

** 説明 [#s3921dca]
#html(<div style="padding-left:20px;">)
Androidではメインのスレッド以外はUIを変更する事はできない。（例外が発生する）
この為、メインスレッド以外からUIを変更する場合は、Handler を使用する。
※WebViewに表示したWebページはメインスレッドではない。
#html(</div>)

以下は、WebViewに表示したHTML上から、ネイティブ(Androidアプリ)側の UI を変更するサンプル。

** activity_main.xml [#n67d527c]
#myhtmlcode(){{
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp" >

        <EditText
            android:id="@+id/editText1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10"
            android:inputType="text|textUri" >
        </EditText>

	</LinearLayout>

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="0dp"
        android:focusable="true"
        android:focusableInTouchMode="true">
		<requestFocus />
   	</WebView>

</LinearLayout>
}}

** MainActivity.java [#q2e530d9]
#mycode(){{
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.webkit.WebView;
import android.widget.TextView;

public class MainActivity extends Activity {

	private static final String START_URL = "file:///android_asset/index.html";
	public Handler handler = null;

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		Log.d("DEBUG", "onCreate");

		// メインViewをセット
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// WebView で JavaScript を使用可能にしておく
		WebView webview = (WebView) findViewById(R.id.webView1);
		webview.getSettings().setJavaScriptEnabled(true);

		// JavaScriptインターフェースに 自身のインスタンスと handler を渡しておく
		handler = new Handler();
		MainJsInterface jsIf new MainJsInterface(this, handler);
		webview.addJavascriptInterface(jsIf, "Android");

		// ページ読み込み後のイベント設定
		webview.setWebViewClient(new WebViewClient() {
			public void onPageFinished(WebView view, String url) {
				TextView text = (TextView) findViewById(R.id.editText1);
				text.setText(url);
			}
		});

		// ページ読み込み
		webview.loadUrl(START_URL);

	} 
} 
}}

** MainJsInterface.java [#baf3f30b]
#mycode(){{
public class MainJsInterface {

	Activity activity;
	Handler handler;

	MainJsInterface(Activity a, Handler h){
		activity = a;
		handler = h;
	}

	@JavascriptInterface
	public void setText(final String text){
		handler.post(new Runnable(){
			@Override
			public void run() {
				TextView textView = (TextView) activity.findViewById(R.id.editText1);
				textView.setText(text);
			}
		});
	}
} 
}}

** index.html [#v2628ffa]
#myhtmlcode(){{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript">
var setAndroidViewText = function(){
    var text = document.getElementById('text1').value;
    Android.setText(text);
};
</script>
</head>
<body>

<input type="text" id="text1" value="TEST1" >
<input type="button" onclick="setAndroidViewText();">

</body>
</html>
}}
JavaScriptからネイティブのUIを変更する(Android) のバックアップの現在との差分(No.0) - 闘うITエンジニアの覚え書き
