안드로이드 웹뷰에서 안드로이드 네이티브 코드 액세스



안드로이드 앱에서 웹뷰를 사용할 경우 네이티브 코드를 호출 해야 하는 경우들이 있다. 예를 들어 웹뷰에서 어떤 값을 입력받아 서버에서 시간이 오래걸리는 연산이 필요한경우 웹뷰 화면을 멍하게 내버려 두면 사용자입장으로선 상태가 진행되고 있는지 알 수가 없다. 그럴 경우 네이티브의 ProgressDialog 띄우면 좋을 것이다. 이를 위해 웹뷰에서 네이티브코드를 실행 하는 방법을 알아보자. 

이렇게 네이티브 메소드를 콜하기 위해서는 WebView의 JavascriptInterface Class를 구현하면 된다. 구현한 name과 method이름을 html에서 Javascript를 통해 호출 가능하다.   

JavaScriptInterface Class구현

public class JavaScriptInterface {
    private Context mContext;

    JavaScriptInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();

    }

    @JavascriptInterface
    public void showAlertDialog(String title, String message) {
        Builder alert = new AlertDialog.Builder(mContext);

        alert.setTitle(title);
        alert.setMessage(message);

        alert.setPositiveButton("확인", new DialogInterface.OnClickListener() {

            @Override
            public void onClick(DialogInterface dialog, int which) {
                
            }
        });

        alert.show();
    }

    @JavascriptInterface
    public void showProgressDialog() {
        final ProgressDialog progress = new ProgressDialog(mContext);

        progress.setMessage("로딩중입니다. (3초)");
        progress.setTitle("로딩중..");
        progress.setCanceledOnTouchOutside(false);

        progress.show();

        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            public void run() {
                progress.dismiss();
            }
        }, 3 * 1000);

    }

}

각각 필요한 기능의 method를 만든다. 여기서는 메시지를 받아 토스트와 얼럿다이얼로그 띄우는 기능과 3초동안 로딩화면을 보여주는 기능을 만들었다. 

웹뷰에서 구현한 JavascriptInterface Class를 html의 javascript에서 call할 수 있도록 설정한다.

mWebView = (WebView) findViewById(R.id.webview);

mWebView.loadUrl("file:///android_asset/www/index.html");
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JavaScriptInterface(this), "App");

setJavaScriptEnable()으로 자바스크립드 기능을 활성화 한다. 그후 App이라는 이름을 통해  JavaScriptInterface Class의 method를 호출 할 수 있도록 addJavascriptInterface()를 통해 추가한다. 

HTML Code

<html>
<head>

<script type="text/javascript">
    function showToast(){
        var message = document.getElementById('toast_input').value;
        App.showToast(message);
    }
    
    function showAlertDialog(){
        var title = document.getElementById('alert_title').value;
        var message = document.getElementById('alert_message').value;
        App.showAlertDialog(title,message);
    }
    
    function showProgressDialog(){
        App.showProgressDialog();
    }
</script>

</head>

<body>
<br>
<div>
<b>Toast</b>
<br>
메시지: <input type="text" id="toast_input" value="message"/>
<br>
<Button onclick="showToast()">Show Toast</Button>
</div>


<br><br>
<div>
<b>Alert Dialog</b>
<br>
타이틀: <input type="text" id="alert_title" value="title"/>
<br>
메시지: <input type="text" id="alert_message" value="message"/>
<br>
<Button onclick="showAlertDialog()">Show Alert</Button>
</div>


<br><br>
<div>
<b>Progress Dialog</b>
<br>
<Button onclick="showProgressDialog()">Show ProgressDialog</Button>
</div>


</body>
</html>

Button을 누르면 Javascript에서 App이라는 이름을 통해 JavascriptInterface 클래스의 method를 호출하게 된다. 이런식으로 웹뷰와 안드로이드 네이티브 코드간 액세스 할 수 있기 때문에 다양한 기능개발이 가능하다.

<

p style=”text-align: center; clear: none; float: none;”>

코드:

cfile6.uf.24325F4452A6A701269FCE.zip