[안드로이드/Android] 웹뷰(WebView) 만들기

 

웹뷰(WebView) 란?

 

안드로이드 어플 내에서 웹 브라우저를 보여주는 webkit 입니다.

 

작성한 파일 목록 입니다.

 

1. AndroidManifest.xml

2. WebViewActivity.java

3. activity_webview.xml

 

 

 

1. AndroidManifest.xml

 

새로 생성한 WebViewActivity 를 application 에 등록해주고,

인터넷 관련 권한 추가, http 사이트 접근 허용 설정 추가 합니다.

 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.eun.myapp">

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme"
        android:usesCleartextTraffic="true" >

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".WebViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

 

인터넷 관련 권한을 추가해야 합니다.

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

 

일반 http 사이트를 접근하기 위한 설정을 추가합니다.

android:usesCleartextTraffic="true"

 

만약 주소를 http 로 사용하는데 android:usesCleartextTraffic="true" 를 추가해주지 않는다면 

 

이렇게 net:ERR_CLEARTEXT_NOT_PERMITTED 에러가 뜹니다! 

 

 

 

2. WebViewActivity.java

 

웹뷰(WebView) 객체를 생성 및 초기화 하고

웹뷰(WebView) 설정 후 webView.loadUrl("주소"); 를 통해 웹페이지를 호출합니다.

 

package com.eun.myapp;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewActivity extends AppCompatActivity {
    private String TAG = WebViewActivity.class.getSimpleName();
    
    private WebView webView = null;

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

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

        webView.setWebViewClient(new WebViewClient());  // 새 창 띄우기 않기
        webView.setWebChromeClient(new WebChromeClient());
        webView.setDownloadListener(new DownloadListener(){...});  // 파일 다운로드 설정

        webView.getSettings().setLoadWithOverviewMode(true);  // WebView 화면크기에 맞추도록 설정 - setUseWideViewPort 와 같이 써야함
        webView.getSettings().setUseWideViewPort(true);  // wide viewport 설정 - setLoadWithOverviewMode 와 같이 써야함

        webView.getSettings().setSupportZoom(false);  // 줌 설정 여부
        webView.getSettings().setBuiltInZoomControls(false);  // 줌 확대/축소 버튼 여부

        webView.getSettings().setJavaScriptEnabled(true); // 자바스크립트 사용여부
//        webview.addJavascriptInterface(new AndroidBridge(), "android");
        webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true); // javascript가 window.open()을 사용할 수 있도록 설정
        webView.getSettings().setSupportMultipleWindows(true); // 멀티 윈도우 사용 여부

        webView.getSettings().setDomStorageEnabled(true);  // 로컬 스토리지 (localStorage) 사용여부


        //웹페이지 호출
//        webView.loadUrl("http://www.naver.com");
        webView.loadUrl("https://eunoia3jy.tistory.com");
    }

}

 

 

웹뷰(WebView) 설정 은 다음과 같습니다.

필요한 설정들만 추가해서 사용하면 됩니다.

 

//WebView 화면크기에 맞추도록 설정 - setUseWideViewPort 와 같이 써야함
webView.getSettings().setLoadWithOverviewMode(true);

//wide viewport 설정 - setLoadWithOverviewMode 와 같이 써야함
webView.getSettings().setUseWideViewPort(true);

//줌 설정 여부
webView.getSettings().setSupportZoom(false); 

//줌 확대/축소 버튼 여부
webView.getSettings().setBuiltInZoomControls(true);

//자바스크립트 사용 여부
webView.getSettings().setJavaScriptEnabled(true); 

//자바스크립트가 window.open()을 사용할 수 있도록 설정
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);

//멀티윈도우 사용 여부
webView.getSettings().setSupportMultipleWindows(true);

 

//캐시 사용 여부
webView.getSettings().setAppCacheEnabled(false); 

//캐시 설정
webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE); 

// -- LOAD_CACHE_ELSE_NETWORK : 캐시 기간만료 시 네트워크 접속
// -- LOAD_CACHE_ONLY : 캐시만 불러옴 (네트워크 사용 X)
// -- LOAD_DEFAULT : 기본 모드, 캐시 사용, 기간 만료 시 네트워크 사용
// -- LOAD_NO_CACHE : 캐시모드 사용안함
// -- LOAD_NORMAL : 기본모드 캐시 사용 @Deprecated

 

//로컬 스토리지 (localStorage) 사용여부 
webView.getSettings().setDomStorageEnabled(true); 

//폼에 입력된 데이터 저장 여부
webView.getSettings().setSaveFormData(true);

//파일 액세스 허용 여부
webView.getSettings().setAllowFileAccess(true); 

//디버그 모드 사용 여부 
// -- true 인 경우 크롬에서 "chrome://inspect" 를 통해 웹뷰 확인 가능
webView.setWebContentsDebuggingEnabled(false);
 
//사용자 문자열 설정
webView.getSettings().setUserAgentString("app"); 

//인코딩 설정
webView.getSettings().setDefaultTextEncodingName("UTF-8"); 

//네트워크를 통해 이미지리소스 받을지 여부
webView.getSettings().setBlockNetworkImage(false); 

//database storage API 사용 여부
webView.getSettings().setDatabaseEnabled(false); 

//웹뷰를 통해 Content URL 에 접근 사용 여부
webView.getSettings().setAllowContentAccess(true);

 

 

 

3. activity_webview.xml

 

웹뷰(WebView) 레이아웃 리소스 입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WebViewActivity">
    <WebView
        android:id="@+id/webview"
        android:layout_width="409dp"
        android:layout_height="729dp"
        android:layout_marginStart="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginEnd="1dp"
        android:layout_marginBottom="1dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

 

 

 

안드로이드 결과화면

 

 

 

 

The END - ⭐️