Android WebView 예제 자습서

WebView에 대한 참조를 얻은 후에는 이를 구성하고 HTTP를 통해 URL을 로드할 수 있습니다. WebView loadUrl() 메서드는 아래와 같이 WebView에 URL을 로드하는 데 사용됩니다.

webView.loadUrl("https://www.journaldev.com");

URL을 가지고 놀기 전에 살펴봐야 할 두 가지 중요한 측면이 있습니다.

1. Supporting JavaScript: JavaScript is by default turned off in WebView widgets. Hence web pages containing javascript references won’t work properly. To enable java script the following snippet needs to be called on the webview instance:

   getSettings().setJavaScriptEnabled(true);
   

2. Adding Permissions: To fetch and load the urls in the WebView we need to add permissions to access the internet from within the app else it won’t be able to load the webpages. The following line of code needs to be added in the AndroidManifest.xml file above the application tag as shown below:

   <?xml version="1.0" encoding="utf-8"?>
   <manifest xmlns:android="https://schemas.android.com/apk/res/android"
       package="com.journaldev.webview" >
   
       <uses-permission android:name="android.permission.INTERNET" />
   
       <application
           android:allowBackup="true"
           android:icon="@mipmap/ic_launcher"
           android:label="@string/app_name"
           android:theme="@style/AppTheme" >
           <activity
               android:name=".MainActivity"
               android:label="@string/app_name" >
               <intent-filter>
                   <action android:name="android.intent.action.MAIN" />
   
                   <category android:name="android.intent.category.LAUNCHER" />
               </intent-filter>
           </activity>
       </application>
   
   </manifest>
   

아래의 MainAcivity 클래스에는 지금까지 설명한 모든 기능이 포함되어 있습니다.

package com.journaldev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        webView.loadUrl("https://www.journaldev.com");
    }

}

WebViewClient 설정

사용자가 웹페이지 내부의 링크를 클릭할 때의 기본 동작은 시스템 기본 브라우저 앱을 여는 것입니다. 이로 인해 앱 사용자의 사용자 경험이 손상될 수 있습니다. WebView 내에서, 따라서 앱 내에서 페이지 탐색을 유지하려면 WebViewClient의 하위 클래스를 생성하고 해당 shouldOverrideUrlLoading(WebView webView, String url) 메서드를 재정의해야 합니다. 이러한 WebViewClient 하위 클래스는 다음과 같습니다.

private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        return false;
    }
}

shouldOverrideUrlLoading() 메서드가 false를 반환하면 메서드에 매개변수로 전달된 URL이 브라우저 대신 WebView 내부에 로드됩니다. 앱과 브라우저 내에 로드되는 URL을 구분하려면 shouldOverrideUrlLoading() 메서드에 다음 코드를 추가해야 합니다.

if(url.indexOf("journaldev.com") > -1 ) return false;
        return true;

참고: true를 반환한다고 해서 URL이 브라우저 앱에서 열리는 것은 아닙니다. 실제로 URL은 전혀 열리지 않습니다. URL을 브라우저에 로드하려면 인텐트를 실행해야 합니다. 다음 하위 클래스에는 추가한 모든 구성이 포함되어 있습니다.

package com.journaldev.webview;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class WebViewClientImpl extends WebViewClient {

    private Activity activity = null;

    public WebViewClientImpl(Activity activity) {
        this.activity = activity;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(url.indexOf("journaldev.com") > -1 ) return false;

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        activity.startActivity(intent);
        return true;
    }

}

생성자는 Activity를 매개변수로 사용하여 브라우저에서 인텐트를 실행합니다. MainActivity에서 이 하위 클래스를 인스턴스화하기 전에 다른 중요한 기능을 살펴보겠습니다.

뒤로 버튼이 있는 탐색 WebView

지금까지 개발한 앱에서 뒤로 버튼을 클릭하면 WebView 자체 내에서 몇 페이지를 탐색했지만 애플리케이션이 홈 화면으로 돌아가는 것을 볼 수 있습니다. 뒤로 버튼을 누를 때 검색 기록을 살펴보려면 아래 스니펫에 표시된 대로 뒤로 버튼 기능을 수정해야 합니다.

@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

onKeyDown() 메서드는 WebView가 돌아갈 수 있는지 먼저 확인하는 구현으로 재정의되었습니다. 사용자가 WebView 내부에 로드된 첫 번째 페이지에서 다른 곳으로 이동한 경우 WebView로 돌아갈 수 있습니다. WebView는 일반 브라우저처럼 검색 기록을 유지합니다. 기록이 없으면 뒤로 버튼의 기본 동작, 즉 앱 종료가 발생합니다. 다음은 위의 기능이 포함된 MainActivity의 코드입니다.

package com.journaldev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        webView.loadUrl("https://www.journaldev.com");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}

WebView에서 콘텐츠를 로드하기 위한 대안

지금까지는 loadUrl() 메서드를 사용하여 WebView에 콘텐츠를 로드했습니다. 여기서는 loadUrl() 사용법에 대한 간략한 브리핑 후 콘텐츠를 로드하는 다른 방법을 살펴보겠습니다. loadUrl()은 다음과 함께 작동합니다.

• https:// 및 https://URL
• file:// 로컬 파일 시스템을 가리키는 URL
• 애플리케이션 자산 중 하나를 가리키는 file:///android_asset/ URL
• content:// 스트리밍할 수 있는 콘텐츠를 게시하는 ContentProvider를 가리키는 URL

loadUrl() 대신 loadData()를 사용하여 메소드의 스니펫 또는 전체 HTML 코드를 표시할 수 있습니다. loadData()에는 두 가지 종류가 있습니다. 더 간단한 방법은 콘텐츠, MIME 유형 및 인코딩을 모두 문자열로 제공할 수 있도록 합니다. 일반적으로 MIME 유형은 text/html이고 인코딩은 아래와 같이 일반 HTML의 경우 UTF-8입니다.

webView.loadData("<html><body>Hello, world!</body></html>",
                  "text/html", "UTF-8");

아래는 위와 같이 MainActivity에 위 스니펫을 추가했을 때의 출력입니다.

package com.journaldev.webview;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

    private WebView webView = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.webView = (WebView) findViewById(R.id.webview);

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        WebViewClientImpl webViewClient = new WebViewClientImpl(this);
        webView.setWebViewClient(webViewClient);

        //webView.loadUrl("https://www.journaldev.com");
        webView.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8");
    }


    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

}

String baseUrl    = "https://www.journaldev.com";
String data       = "Relative Link";
String mimeType   = "text/html";
String encoding   = "UTF-8";
String historyUrl = "https://www.journaldev.com";

webView.loadDataWithBaseURL(baseUrl, data, mimeType, encoding, historyUrl);

이것으로 Android WebView 예제 자습서를 마칩니다. 아래 링크에서 최종 Android webview 프로젝트를 다운로드할 수 있습니다.

Android WebView 예제 프로젝트 다운로드