[안드로이드] 웹뷰 자바스크립트와 안드로이드 자바 연동 방법

[안드로이드] 웹뷰 자바스크립트와 안드로이드 자바 연동 방법

안드로이드의 웹뷰를 사용해 개발을 하다 보면 웹뷰에서 띄운 자바스크립트와

안드로이드의 자바 소스간에 연동을 해야 하는 경우가 생긴다

즉 자바스크립트에서 안드로이드 메소드를 호출 하거나

안드로이드에서 자바스크립트 함수를 호출해야 하는 경우인데.

그 방법에 대해서 알아 보도록 하자.

1. mainActivity.java 

 
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final DBHelper dbHelper = new DBHelper(getApplicationContext(), "MoneyBook.db", null, 1);
        // 웹뷰 셋팅팅
        mWebView = (WebView) findViewById(webView);
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(myUrl + "/html/test.html");
        mWebView.setWebChromeClient(new WebChromeClient());
        mWebView.setWebViewClient(new WebViewClientClass());
    
 
        // Bridge 인스턴스 등록
        mWebView.addJavascriptInterface(new AndroidBridge(mWebView, dbHelper, newtwork), "HybridApp");
 
 
 
    }

메인 액티비티의 oncreate 메소드에 웹뷰 셋팅을 해놓고 그 아래에 안드로이드브릿지를 등록 한다.

2. AndroidBridge.java

1번의 15번 라인의 안드로이드 브릿지를 사용하기 위해 클래스를 추가 해 주도록 한다.

package com.xxx.xxxxx;
 
import android.os.Handler;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
 
import java.text.SimpleDateFormat;
import java.util.Date;
 
/**
 * Created by Administrator on 2017-08-03.
 */
 
public class AndroidBridge {
    private final Handler handler = new Handler();
    private WebView mWebView;
    private DBHelper dbHelper;
    private  boolean newtwork;
 
    // 생성자
    // 따로 사용할일 없으면 이거 안만들고 위의 변수도 안만들어도 됨.
    public AndroidBridge(WebView mWebView, DBHelper dbHelper, boolean newtwork) {
        this.mWebView = mWebView;
        this.dbHelper = dbHelper;
        this.newtwork = newtwork;
    }
 
    // DB데이터 가져오기
    @JavascriptInterface
    public void requestData() { // must be final
        handler.post(new Runnable() {
            public void run() {
                Log.d("HybridApp", "데이터 요청");
                String test  =  dbHelper.getResult();
                Log.d("HybridApp", test);
                mWebView.loadUrl("javascript:getAndroidData('"+test+"')");
            }
        });
    }
 
    // DB에 데이터 저장하기
    @JavascriptInterface
    public void saveData(final String item, final int num) { // must be final
        handler.post(new Runnable() {
            public void run() {
                Date d = new Date();
 
                String s = d.toString();
                SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
 
                dbHelper.insert(sdf.format(d), item, num);
                Log.d("HybridApp", "데이터 저장");
                String test  =  dbHelper.getResult();
                mWebView.loadUrl("javascript:getAndroidData('"+test+"')");
            }
        });
    }
 
 
 
}

DB데이터 가져온다는 내용은 신경쓰지 말자

일단 1번과 2번을 완료 했다면 안드로이드에서 할일은 끝났다.

여기서 봐야 할 것은

30번 43번 라인의 어노테이션이다. API17이상부터 저 어노테이션을 달아주지 않으면

정상 작동하지 않는다.

그리고 31 44번의 requestData, saveData 이 메소드명이 자바스크립트에서 호출하는 이름이 된다.

그리고 37 55번라인은 안드로이드에서 자바스크립트로 데이터를 날려주면서 

자바스크립트 function을 호출하는 부분이다.

3. javascript

 
$(function(){
    window.HybridApp.requestData();
});
 
function saveData(){
    var item = $("#item").val();
    var num = $("#num").val();
    window.HybridApp.saveData(item, num);
}
 
 
function getAndroidData(data){
    alert(data);
 
    var dataArr = data.split("*nn*");
    $("#testDiv").empty();
    for(var count=0; count < dataArr.length; count++){
        $("#testDiv").append("<p>"+dataArr[count]+" </p>");
    }
 
}

자바스크립트에서 안드로이드 메소드를 호출할땐

window.1의 15번라인에서 선언한 이름.2에서 선언한 메소드명();

이런식으로 호출을 해주면 된다.

만약 3번라인의 리퀘스트데이터를 호출하면

2의 31번 메소드가 응답하며 2의 37번 라인이 동작해 자바스크립트 3의 13번function이 동작한다.

물론 위에 보는 것 처럼 안드로이드와 자바스크립트간의 텍스트 데이터도 전송이 가능 하다.