2013. 10. 25.

android phonegap(폰갭) 에서 뒤로가기 버튼 제어.

폰갭이 결국 웹뷰를 포장해 놓은거라 그런지, 모바일 기기의 백키를 누르면 뒤로가기가 되버린다.
기기의 back key를 눌렀을때 이벤트를 어떻게 처리 할 수 있을까?

어플 단에서 처리할 수도 있고, 웹 페이지에서 자바 스크립트로 처리할 수도 있다.
간단한 정도로 치면 아무래도 웹 페이지쪽에 한 표 준다.

웹 페이지쪽 부터 알아보자.

<head>
...
function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
    document.addEventListener("backbutton", onBackKey, false);
}
function onBackKey() {
    navigator.notification.confirm('msg', onBackKeyResult, 'title', 'N, Y');
    //무반응으로 만들려면 위를 주석처리.
}
function onBackKeyResult(index) {
    if(index == 2) {
      navigator.app.exitApp(); 
    }
}
</script>
</head>

<body onload="onLoad()">
...

헤더 header에 집어 넣어야지 모든 페이지에서 작동 하겠지.
onBackKey() 함수의 confirm에서 원하는 텍스트로 갈아준다.
이렇게 하면 기기에서 백키를 눌렀을때 종료 확인 창을 띄울 수 있다.

navigator.notification.confirm() 함수는 리턴 값이 없다. 콜백 함수로 처리 해야 한다.
위에서 콜백 함수는 onBackKeyResult().
콜백 함수는 버튼의 index값을 받는다. 위에서 보면 N이 1, Y가 2다.

이번엔 안드로이드 앱 단에서 처리하는 방법을 찾아보자.
이리저리 검색해봤는데 버전 차인지 뭔지 안되는 소스들도 있더라.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK) {
        confirmAppExit();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}


private void confirmAppExit() {
    ...
}

confirmAppExit() 함수 내용은 Dialog 만들어서 버튼 값에 따라 어플 종료 finish() 시키는 정도의 함수다.
다만, 위 소스는 원하는대로 움직여 주지 않는다.

백키를 한번 더 누르면 홈으로 빠져 나가는 상황, 어플이 종료 되는 상황, 에서만 작동한다. 어떤 놈인지는 모르겠는데 우선순위가 높은 놈이 있는게 분명하다.

이리저리 뒤져보다가 폰갭의 웹뷰 인스턴스 이벤트 리스너를 건드리는 것을 봤다.

appView.setOnKeyListener(new OnKeyListener() {
      @Override
      public boolean onKey(View v, int keyCode, KeyEvent event) {
            if (keyCode == KeyEvent.KEYCODE_BACK &&
                 event.getAction() ==  KeyEvent.ACTION_UP)
            {
                 //원한다면 여기에.
                 return true;
            }
            return onKeyDown(keyCode, event);
      }
});

이 코드는 onCreate() 함수 안에 들어간다. 지금 이대로라면 백키를 눌러도 아무 반응이 없다. 종료 확인을 위해 다이얼로그를 띄우려면 주석 자리에 코드를 추가하자.

아무리 봐도, 앱 단에서 처리해서 다시 폰에 집어 넣느니 웹페이지 수정하는 편이 훨씬 나은거 같다. 다만 웹페이지의 <body> 시작 태그가 독립된 헤더에 포함되어 있지 않다면, <body> 태그를 찾아 페이지 마다 추가해야 되는 그런 불상사가 생길 수도 있겠다. 그런 경우라면 어플 단에서 처리 하는게 담배를 한대 덜 필 수 있는 길이다.


스택오버플로우 출처
http://stackoverflow.com/questions/15834629/android-droidgap-disabling-back-button

댓글 1개 :