android javascript 과 android 연동

webview로 띄워서 서로 간의 커뮤니케이션을 해야할 경우가 반드시 생기기 마련이다.

예를 들면 google map v3를 써서 길찾기를 한다던지?

 

연동하는 방법을 배워보고자 한다.

 

우선 android studio에 프로젝트 하나 생성 후,

 

1. 추가

AndroidManifest.xml

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

 

2. 액티비티, 웹

 

GoogleMapBridge googleMapBridge;

WebView webView;

 

onCreate

 

// 웹 뷰 로드

 webView.loadUrl("file:///android_asset/google_map.html");

// 자바스크립트 허용
 webView.getSettings().setJavaScriptEnabled(true);

 

// 해당 객체와 웹뷰 간의 연결
 webView.addJavascriptInterface(googleMapBridge, "GoogleApp");

 

 webView.setWebViewClient(new WebViewClient() {

// 페이지 로딩을 마쳤을 경우 작업
 public void onPageFinished(WebView view, String url) {

// 자바스크립트 메소드를 호출할 때, 페이지 로딩이 끝난 후 호출을 해야지 정상적으로 호출이 된다.
         googleMapBridge.sendMenu(1);
 }
 });

 

private class GoogleMapBridge {
        WebView webView;

        public GoogleMapBridge(WebView webView) {
            this.webView = webView;
        }

// 웹뷰에서 안드로이드의 메소드를 부름

        public void setMessage(final String mapX, final String mapY) {
            Message msg = new Message();
            Bundle bundle = new Bundle();

            bundle.putString("mapX", mapX);
            bundle.putString("mapY", mapY);
            msg.setData(bundle);

            targetHandler.sendMessage(msg);
        }

// 안드로이드에서 웹뷰로 자바스크립트 호출

        public void sendMenu(int num){
            webView.loadUrl("javascript:markMap(" + num + ")");
        }
    }

 

google_map.html

function init(){

// 자바스크립트에서 안드로이드로 호출

 window.GoogleApp.setMessage(1, 2);

}

 

// 안드로이드에서 이 메소드를 호출
 function markMap(num){
     // ....
 }

 

중요한 부분은 페이지 로딩이 다 끝난 후, 자바스크립트 호출을 할 수 있다는 거 주의 !