(안드로이드) 34 - 웹뷰(WebView)

웹뷰는 앱 안에 웹페이지를 부분화면으로 보여줄 때 사용한다. 인텐트를 통해 웹 브라우저를 띄우는 것과 다르게 부분화면에 웹페이지를 보여줌으로써 웹페이지가 앱의 일부분이 된 것같은 자연스러운 느낌을 준다.

웹뷰를 사용하면 인터넷에 접속하게 되므로 매니페스트 파일에 인터넷 권한을 등록해줘야한다.

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

웹뷰는 XML 레이아웃에서 <WebView\> 태그를 사용해 추가할 수 있다. 그럼 웹뷰를 사용해 앱 내에서 웹피이지를 볼 수 있는 앱을 만들어보자.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/urlInput"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:layout_weight="1"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:hint="url을 입력하세요"/>

        <Button
            android:id="@+id/loadButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="열기"
            android:padding="4dp"
            android:textSize="20dp"/>


    </LinearLayout>

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="10dp">
    </WebView>

</LinearLayout>

웹페이지 URL을 입력할 수 있는 입력상자하나와 클릭하면 해당 사이트로 이동하는 버튼을 하나 만들었다. 이제 자바 소스코드를 통해서 이 기능들을 만들어보자.

package io.swnomad.samplewebview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    WebView webView;
    EditText urlInput;

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

        webView = findViewById(R.id.webView);

        WebSettings webSettings = webView.getSettings(); //웹뷰 설정 정보 가져오기
        webSettings.setJavaScriptEnabled(true); //자바스크림트 허용
        webSettings.setLoadWithOverviewMode(true); //컨텐츠가 웹뷰 사이즈를 넘어갈 경우 스크린 크기에 맞춤

        webView.setWebChromeClient(new WebChromeClient()); //웹뷰에서 크롬 실행 가능하도록 추가
        webView.setWebViewClient(new MyWebViewClient());

        urlInput = findViewById(R.id.urlInput);
        Button loadButton = findViewById(R.id.loadButton);

        loadButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String url = urlInput.getText().toString();
                if(!url.contains("https://") && !url.contains("http://")){
                    url = "https://"+url;
                }
                webView.loadUrl(url); //웹뷰에 웹페이지 로드
            }
        });

    }
}

/* 새 창이 아닌 앱 안에서 웹페이지를 띄우기 위해 WebViewClient 상속받은 클래스를 정의하고
 * shouldOverrideUrlLoading() 메소드를 재정의해준다. */
class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}

먼저 findViewById() 메소드를 통해 웹뷰를 참조하였다. 그리고 웹뷰에서 getSettings() 메소드를 호출하여 웹뷰의 설정을 가져와 webSettings 변수로 참조하였다. 이 변수를 통해서 자바스크립트를 허용하고 컨텐츠가 웹뷰 사이즈를 넘어갈 경우 자동으로 맞추도록 하였다. 참고로 요새는 대부분의 사이트에서 자바스크립트를 사용하므로 이 설정은 꼭 하는 것이 좋다.

웹뷰에 설정한 MyWebViewClient 클래스는 WebViewClient 클래스를 상속하고 shouldOverrideUrlLoading() 메소드를 재정의하여 앱 내에서 웹페이지를 불러올 수 있도록 하였다. 이 설정을 하지 않으면 버튼을 클릭했을때 웹 브라우저를 실행하게 된다.

앱을 실행하면 다음의 화면을 볼 수 있다.