안드로이드 웹뷰(WebView) 사용하기

최근 모바일 웹을 앱으로 씌워서 서비스하는 경우가 많아짐에 따라 웹뷰의 활용성도 올라가는 것 같다. 

안드로이드에서 웹뷰(WebView)를 사용하는 기본 방식을 정리해 보도록 한다. 

액티비티 생성

먼저 "File > New > Activity > Blank Activity"를 통해 MiniWebActivity라는 이름의 빈 액티비티를 하나 생성한다. 

생성후 살펴보면 Java에는 MiniWebActivity 파일이 Layout에는 activity_mini_web.xml 파일이 추가된다. 

Menu에도 menu_mini_web.xml이 생성되지만 여기에서는 사용하지 않는다. 

레이아웃 설정

activity_mini_web.xml의 레이아웃 설정은 다음과 같다. 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="kr.co.acronym.mini.MiniWebActivity"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/webView" /> </LinearLayout>

LinearLayout으로 설정했고 방향(orientation)은 수직(vertical)로 지정했다. 

내부 위젯이 웹뷰 하나이기 때문에 여기에서는 방향이 중요하지는 않다. 

다만, 웹뷰가 화면 전체를 채워야 하므로 너비와 높이(layout_width와 layout_height)는 모두 "match_parent"로 설정했다. 

참고로, tools:context는 해당 레이아웃이 어느 액티비티와 관련되어 있는지 나타낸다고 한다. 

보통 개발 툴의 레이아웃 에디터 디자인에서 사용한다고 한다. 

그리고 "@id+/webView"는 해당 웹뷰에 대한 고유 아이디로서, 

액티비티에서 "findViewById(R.id.webView)"로 검색할 때 사용하기 위한 값이다. 

액티비티 코딩

webActivity에서 웹뷰를 띄우는 코드는 다음과 같다. 

public class MiniWebActivity extends Activity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_mini_web); mWebView = (WebView)findViewById(R.id.webView); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.loadUrl("http://google.com"); mWebView.setWebViewClient(new WebViewClientClass()); } private class WebViewClientClass extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } } }

3번째 줄과 같이 mWebView라는 웹뷰 관련 변수를 설정하고, 10번째 줄에서 레이아웃에 설정한 웹뷰를 지정한다. 

11번째 줄은 웹뷰에서 자바스크립트를 허용하기 위해 설정한 부분이다. 

12번째 줄에서 loadUrl을 통해서 처음 이동할 URL을 지정한다. 

13번째 줄은 웹뷰 클라이언트를 지정하는 부분이다. 

만약 이 부분이 생략되면, 안드로이드 OS는 지정한 URL을 기본 브라우저로 실행하게 된다. 

참고로 세로 스크롤을 설정하는 코드를 추가하려면 다음과 같이 한다.  

mWebView.setVerticalScrollBarEnabled(true);

16~22번째 줄에서 웹뷰 클라이언트 클래스를 inner Class로 만들고 shouldOverrideUrlLoading 메소드를 오버라이드한다. 

여기에서는 단순히 지정된 URL을 로딩하는 역할만 처리했다. 

혹시 안드로이드의 뒤로가기 버튼을 클릭했을 때, 웹브라우저의 뒤로가기와 같은 기능을 구현하고 싶을 수도 있다. 

이 경우, MiniWebActivity에서 onKeyDown 메소드를 오버라이드 하면 된다. 

이 소스까지 포함한 전체 MiniWebActivity는 다음과 같다. 

public class MiniWebActivity extends Activity { private WebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_mini_web); mWebView = (WebView)findViewById(R.id.webView); mWebView.getSettings().setJavaScriptEnabled(true); mWebView.loadUrl("http://google.com"); mWebView.setWebViewClient(new WebViewClientClass()); } private class WebViewClientClass extends WebViewClient { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } } @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event); } }

24~30 라인을 보면, KEYCODE_BACK이 눌리고 웹뷰의 뒤로가기가 가능할 경우 웹페이지 뒤로가기를 실행하도록 처리되어 있다.