2010. 1. 20. 12:45

Web View 샘플구현





시나리오

아래와 같은 뷰를 작성합니다.
초기 화면은 구글 페이지를 디스플레이합니다. 
앞으로, 뒤로 이동할 수 있어야 합니다.

 
 


1. 프로젝트 생성
프로젝트, 애플리케이션: WebViewingApp
패키지: android15.samples
액티비티: WebViewingStoryboard

완성된 프로젝트 파일은 아래에 첨부합니다.


2. 메인 폼 작성

2.1 전체에 대한 레이아웃 구상
웹뷰가 화면 전체 영역을 차지합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />
</LinearLayout>


웹뷰에 대한 상세사항은 다음 링크를 참조합니다.
http://android15.tistory.com/164


3. 애플리케이션 초기화면
3.1 웹뷰를 다루는 멤버를 선언합니다.

WebView _webview;

3.2 onCreate 재정의
웹뷰가 자바스크립트를 사용하도록 설정하고, 구글페이지를 로드합니다. 
onCreate에 다음을 추가합니다. 
_webview = (WebView) findViewById(R.id.webview);
_webview.getSettings().setJavaScriptEnabled(true);
_webview.loadUrl("http://www.google.com");

3.3 인터넷 접근허용
웹뷰는 인터넷을 사용해야 합니다. 인터넷은 접근허용을 받아야 하는 것입니다. 
매니페스트 파일(AndroidMenifest.xml)을 열고, <menifest> 요소에 다음을 포함합니다.
<uses-permission android:name="android.permission.INTERNET" />

3.3 애플리케이션을 수행합니다.
다 된 것처럼 보입니다.
그러나 웹페이지의 링크를 클릭해보세요.
우리의 웹뷰가 링크된 페이지를 보여주는 것이 아니라, 안드로이드에 기본으로 설정된 웹 브라우저가 해당 페이지를 보여줍니다.


4. 링크된 페이지가 우리의 웹뷰안에서 로드되게 하기
4.1 웹뷰클라이언트 재정의(WebViewClient)

웹뷰클라이언트 클래스를 확장하는 클래스를 작성하고, shouldOverrideUrlLoading 메소드를 재정의합니다.
true를 리턴함으로 우리의 웹뷰에서 URL을 처리했음을 알립니다.
private class HelloWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}

4.2 웹뷰에 웹뷰클라이언트 설정
Url을 로드하기 앞서, 웹뷰클라이언트를 설정합니다.
onCreate 부분을 아래와 같이 수정합니다. 
...
_webview.setWebViewClient(new HelloWebViewClient());
_webview.getSettings().setJavaScriptEnabled(true);
_webview.loadUrl("http://www.google.com");

4.3 애플리케이션을 수행해봅니다.
위와 같이 했을 경우, 원하는 웹페이지를 로드한 웹뷰가 나타나는 것이 아니라 바탕화면이 검정색으로 보입니다. 바탕화면이 검정색으로 보이는 것은 검정색으로 배경이 설정된 바탕 윈도우만 보이고, 그 위에 보여야할 뷰들이 보이지 않기 때문입니다.
웹뷰를 설정했는데, 보이지 않는다는 것은 어떤 이유인지는 모르지만 웹뷰의 크기가 0이 되었거나 웹뷰를 포함하는 부모의 크기가 0이 되었다는 것을 의미합니다.  
헬로뷰 예에서, 웹뷰의 부모인 레이아웃의 너비와 높이가 'wrap_content'로 설정되어 있으니, 만약 레이아웃이 웹뷰의 크기를 측정할 때 웹뷰의 크기가 0으로 계산된다면 부모 레이아웃의 크기도 0이 됩니다. 

4.3.1  이 부분이 의심스러우니 레이아웃의 너비와 높이를 'fill_parent'로 설정해 봅니다.
제대로 나옵니다.
정말 웹뷰클라이언트를 설정했을 때 웹뷰의 크기가 커짐에도 불구하고, 레이아웃의 크기가 0이 되는 것인지는 안드로이드 소스코드를 까봐야겠네요. 


5. 앞으로, 뒤로 이동에 대한 시나리오 구현
왼쪽 키를 누르면 뒤로, 오른쪽 키를 누르면 앞으로 가게 합니다.
다음과 같이 HelloWebViewClient의 shouldOverrideKeyEvent를 재정의합니다. 
@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;
}