Android(안드로이드)의 WebView 구현시 화면에 ProgressDialog로 로딩화면 구현하기

Android의 WebView 구현시 화면에 ProgressDialog로 로딩화면 구현하기

 

개발환경 : JDK 1.6, Android API 2.1, window XP

WebView 는 안드로이드에서 브라우저의 역할을 하게 된다. 보여주고자 하는

웹페이지를 넣어서 실행만 하면 된다. 그런데 데스크탑 PC 가 아닌 관계로

네트웍 상황이 여의치 않아 끊겨 있을수도 있고 속도가 안나와서 로딩시간이

오래 걸릴수도 있다. 이럴때 웹페이지에 현재 로딩중이니 조금 기달려 달라는

메시지를 띄워주면 한결 완성도 높은 어플이 될 것이다.

 

이것을 구현하기 위해서는 상단 상태바에 값을 주고 진행하는 방법이 있고

Activity 에서 쓰는 ProgressDialog 를 화면시작과 함께 띄워주고 로딩이

끝났다면 종료하는 방법 두가지가 있다.

 

이번 아티클에서는 두번째 방법인 화면상에 로딩화면을 띄워주는 걸로 한다.

로딩화면을 제대로 표현하기 위해서는 WebView 의 이벤트 함수들을 알아야 한다.

이벤트 함수라 함은 WebView 에서 웹페이지를 로딩할 때 로딩시작, 로딩끝, 로딩중

에러 등등의 상태를 알수 있는 함수 들이다. 이 부분에 진행중 다이얼로그를

표현 하면된다.

그럼 이것을 처리하는 클래스는 무엇일까? 바로 WebViewClient 이다. 이 함수내부를

보게 되면 페이지 로딩 과정에서 처리되는 다양한 함수들이 있는 것을 알수 있다.

WebView webView = (WebView)findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient() {
	public void onProgressChanged(WebView view, int progress) {
		ctx.setProgress(progress * 1000);
	}
});
webView.setWebViewClient(new WebViewExtendSample);
webView.loadUrl("http://www.google.com");

private class WebViewExtendSample extends WebViewClient{
	@Override
	public boolean shouldOverrideUrlLoading(WebView view, String url) {
		// url 주소에 해당하는 웹페이지를 로딩
		view.loadUrl(url);
        return true;
	}
	
	@Override
	public void onLoadResource(WebView view, String url) {
		// 웹 페이지 리소스들을 로딩하면서 계속해서 호출된다.
		super.onLoadResource(view, url);
	}
	
	@Override
	public void onPageFinished(WebView view, String url) {
		// 페이지 로딩시 호출된다.
		super.onPageFinished(view, url);
	}
	
	@Override
	public void onPageStarted(WebView view, String url, Bitmap favicon) {
		// 페이지 요청이 시작될 경우 호출된다.
		super.onPageStarted(view, url, favicon);
	}
	
	@Override
	public void doUpdateVisitedHistory(WebView view, String url, boolean isReload) {
		// TODO Auto-generated method stub
		super.doUpdateVisitedHistory(view, url, isReload);
	}

	@Override
	public void onFormResubmission(WebView view, Message dontResend, Message resend) {
		// TODO Auto-generated method stub
		super.onFormResubmission(view, dontResend, resend);
	}


	@Override
	public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
		// TODO Auto-generated method stub
		super.onReceivedHttpAuthRequest(view, handler, host, realm);
	}

	@Override
	public void onScaleChanged(WebView view, float oldScale, float newScale) {
		// TODO Auto-generated method stub
		super.onScaleChanged(view, oldScale, newScale);
	}

	@Override
	public void onTooManyRedirects(WebView view, Message cancelMsg, Message continueMsg) {
		// TODO Auto-generated method stub
		super.onTooManyRedirects(view, cancelMsg, continueMsg);
	}

	@Override
	public void onUnhandledKeyEvent(WebView view, KeyEvent event) {
		// TODO Auto-generated method stub
		super.onUnhandledKeyEvent(view, event);
	}

	@Override
	public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
		// 키를 오버로딩한것인데 주로 웹페이지를 뒤,앞 등으로 이동하게 한다.
		// 왼쪽키를 누르게 되면 뒤로, 오른쪽 키는 앞으로 가게 한다.
		/*int keyCode = event.getKeyCode();
		if ((keyCode == KeyEvent.KEYCODE_DPAD_LEFT) && webview.canGoBack()) {
			webview.goBack();
		return true;
		}else if ((keyCode == KeyEvent.KEYCODE_DPAD_RIGHT) && webview.canGoForward()) {
			webview.goForward();
		    return true;
		}
		return false;*/
		return super.shouldOverrideKeyEvent(view, event);
	}

	public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
		// 웹페이지 로딩중 에러가 발생했을때 처리 
	}
}

여기서 이용할 함수는 이름으로 쉽게 파악할수 있다. 페이지 시작시 onPageStarted,

페이지 로딩이 종료 되었을 때 onPageFinished, 로딩중 에러 났을 때 onReceivedError 이다.

이곳에 진행중 다이얼로그를 구현한다.

// 페이지 시작
public void onPageStarted(WebView view, String url, Bitmap favicon) {
	dialog = new ProgressDialog(activity);
	dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
	dialog.setTitle("Updating");
	dialog.setMessage(activity.getText(R.string.web_conn));
	dialog.setProgress(0);
	dialog.setMax(100);
	dialog.setButton("취소", new DialogInterface.OnClickListener() {
		public void onClick(DialogInterface dialog, int which) {
			dialog.cancel();
		}
	});
	dialog.show();
	super.onPageStarted(view, url, favicon);
}
// 페이지 로딩시 
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
	Toast.makeText(activity, activity.getText(R.string.web_error) + description, Toast.LENGTH_SHORT).show();
	if (dialog.isShowing()) {
		dialog.cancel();
	}
}
// 페이지 종료 
public void onPageFinished(WebView view, String url) {
	if (dialog.isShowing()) {
		dialog.cancel();
	}
}

이상으로 웹페이지 로딩시 진행중 다이얼로그를 표현하는 방법에 대해 알아보았다.

내가 정말 원하는 기능은 구글앱 첫화면 로딩 화면처럼 Activity 에 표현하는 것이

아니라 WebView 화면 내에 로딩을 구현하는 것이다.

예상 되는 바로는 로딩하는 웹페이지 내에 자바스크립을 이용해 로딩 이미지를

제어하는 것 같은데 아직 구체적인 소스나 자료는 없다. 다음엔 이 기능에 대해

다뤄 볼까 한다