[깡샘의 안드로이드 프로그래밍] 정리 13 - WebView

본 글은 [깡샘의 안드로이드 프로그래밍 - 루비페이퍼] 의 내용을 발췌한 것입니다.

좀더 자세한 내용은 책을 통해 확인해 주세요.

 

 

 

 

 

 

 

11장. 다양한 뷰 활용

 

11.2.1. WebView

 

WebView는 안드로이드 앱에서 웹 페이지를 보여주는 내장 브라우저 역할을 합니다. 브라우저 능력을 가지고 있지만, URL 입력 바(Navigation Bar), 뒤로가기 등의 각종 버튼은 제공하지 않으며 화면에 HTML이 뜨는 영역만 제공하는 뷰입니다.

 

WebView는 액티비티 화면을 구성할 때 화면 전체나 일부분을 HTML로 구성하기 위해 사용하는데요.

특히, 하이브리드 앱(Hybrid App)으로 개발할 때 핵심 기술입니다.

 

WebView를 화면에 띄우면 아무것도 나오지 않습니다. 코드에서 HTML 파일을 명시해 주면 HTML 파일을 파싱하여 화면에 출력해 줍니다. 혹은 URL을 지정해 주면 HTTP 통신으로 서버에서 넘어오는 HTML로 화면을 구성해 줍니다.

 

 

 

그림 11-10에서 왼쪽은 스마트폰의 브라우저로 Daum 사이트에 접속한 것이고, 오른쪽은 Daum 앱을 실행한 예입니다. 브라우저로 실행할 수 있는 HTML 파일을 앱 내에서 WebView로 화면에 출력하는 구조로 보면 되겠습니다.

 

WebView를 이용하려면 HTML 파일이 있어야 하는데요. 서버 파일을 이용할 수도 있고 앱에 내장한 파일을 이용할 수도 있습니다. 

서버 파일을 URL을 이용해 WebView로 간단하게 띄우는 코드를 보겠습니다. 

서버 URL로 HTML 파일을 가져와 WebView에 띄우면 앱 내부에서 네트워킹이 발생합니다. 

이를 위한 퍼미션이 AndroidManifest.xml 파일에 설정되어 있어야 합니다.

 

<uses-permission android:name="android.permission.INTERNET"/>

 

그리고 화면에 출력하기 위해 레이아웃 XML 파일에 WebView를 준비합니다.

 

<WebView

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

 

이렇게 하면 화면에 WebView가 출력되는데요. 위의 정보만으로는 화면에 아무것도 나오지 않습니다.

코드에서 이 WebView에 출력될 URL을 지정해 주어야 합니다.

 

WebSettings settings=webView.getSettings();

settings.setJavaScriptEnabled(true);

webView.loadUrl("http://m.daum.net");

 

loadUrl ( ) 함수에 매개변수로 URL을 주는 것만으로 화면이 출력되는데요. 만약 WebView에 의해 출력되는 HTML의 자바스크립트가 실행되어야 한다면 위의 코드처럼 WebSettings의 setJavascript Enabled( ) 함수를 이용해 자바스크립트를 가능하게 설정해 주어야 합니다.

 

이번에는 앱 내부의 HTML 파일을 이용하는 방법에 대해 살펴보겠습니다. HTML 파일을 앱 내부에 둘려면 assets 폴더를 이용해야 합니다. assets 폴더는 리소스 대상이 아닌 나머지 개발자 파일이 위치하는 곳이므로 HTML, CSS, Javascript 파일 등을 이곳에 두면 됩니다. 앱 화면에 HTML을 이용하여 차트를 그리는 업무가 있다고 가정해 보겠습니다.

 

webView.loadUrl("file:///android_asset/test.html");

 

assets에 있는 파일도 loadUrl ( ) 함수를 이용해 로딩할 수 있습니다.

 

 

 

WebView에 의해 화면에 출력된 HTML 파일이 차트를 그린 구조입니다.