[android/안드로이드] WebView 웹뷰 예제

WebView 간단 예제

 

1. WebView를 추가하는 방법

1. Manifest.xml에 인터넷 관련 권한 코드 작성
2. xml 파일에 WebView를 위한 코드 작성
3. java 파일에 WebView를 위한 코드 작성

2. 기본 코드

/manifests/AndroidManifest.xml

※<application></application>의 바로 위 or아래에 작성한다.

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

/res/layout/activity_web_view_demo.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
	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=".WebViewDemo">

    <WebView
        android:id="@+id/wvLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

/java/com.example.webview/WebViewDemo.java

package com.example.webview;

public class WebViewDemo extends AppCompatActivity {

    private WebView mWebView;
    private WebSettings mWebSettings;

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

        mWebView = findViewById(R.id.wvLayout);
        mWebView.loadUrl("https://saeatechnote.tistory.com/entry/android%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-Login-dialog%EB%A7%8C%EB%93%A4%EA%B8%B0"); //연결할 url

#기본적으로 이것만 있어도 웹페이지는 나온다. 하지만 이럴 경우 표나 동영상, 혹은 이런 코드와 같은 것들이 작성된 대로 보이지 않기 때문에 다른 속성들을 이용하여 이러한 형식들이 완전히 나오게 한다. 

표 같은 것이 잘 나와야 사용자들이 우리 앱에서 벗어나지 않고 편리하게 볼 수 있는데 찌그러져 나온다거나 할 경우 사용자의 사용성을 떨어트릴 수 있고, 코드를 작성하지 않아서 강제로 앱을 이탈하게 될 경우에는 내 손해니까.

 

3. WebView 커스텀

 1) WebChromeClient : 전체 화면 지원 사용 설정. WebView가 창을 만들거나 닫고 javascript 대화 상자(dialog)를 사용자에게 전송하는 등 호스트 앱의 UI를 변경하기 위한 권한을 필요로 할 때도 호출됨. 

 2) WebViewClient : 탐색 오류, 양식 제출 등의 콘텐츠를 가져오거나 보내는 활동에 영향을 미치는 이벤트를 처리한다. 이 서브 클래스를 사용하여 URL로드를 가로챌 수도 있다.

 3) WebSettings : 기본적으로 WebView에서 javascript는 사용 중지되어있다.자바스크립트 사용과 관련된 설정을 할 수 있다.

 4) WebView에 삽입된 android framework 객체에 javascript를 사용하여 액세스 할 수 있다.

 

4. 속성 추가 코드

/res/layout/activity_web_view_demo.xml (동일)

 

/jaca/com.example.webview/WebViewDemo.java

package com.example.webview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebViewDemo extends AppCompatActivity {

    private WebView mWebView;
    private WebSettings mWebSettings;

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

        mWebView = findViewById(R.id.wvLayout);
        mWebView.loadUrl("https://saeatechnote.tistory.com/entry/android%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-Login-dialog%EB%A7%8C%EB%93%A4%EA%B8%B0"); //연결할 url
        mWebView.setWebViewClient(new WebViewClient()); // 현재 앱을 나가서 새로운 브라우저를 열지 않도록 함.

        mWebSettings = mWebView.getSettings(); // 웹뷰에서 webSettings를 사용할 수 있도록 함.
        mWebSettings.setJavaScriptEnabled(true); //웹뷰에서 javascript를 사용하도록 설정
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(false); //멀티윈도우 띄우는 것
        mWebSettings.setAllowFileAccess(true); //파일 엑세스
        mWebSettings.setLoadWithOverviewMode(true); // 메타태그
        mWebSettings.setUseWideViewPort(true); //화면 사이즈 맞추기
        mWebSettings.setSupportZoom(true); // 화면 줌 사용 여부
        mWebSettings.setBuiltInZoomControls(true); //화면 확대 축소 사용 여부
        mWebSettings.setDisplayZoomControls(true); //화면 확대 축소시, webview에서 확대/축소 컨트롤 표시 여부
        mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 브라우저 캐시 사용 재정의 value : LOAD_DEFAULT, LOAD_NORMAL, LOAD_CACHE_ELSE_NETWORK, LOAD_NO_CACHE, or LOAD_CACHE_ONLY
        mWebSettings.setDefaultFixedFontSize(14); //기본 고정 글꼴 크기, value : 1~72 사이의 숫자

    }
}

 

4. 오류 기록

하다가 계속 오류 나고 속성들이 활성화가 안돼서 헤매다가 java파일의 이름이 WebView로 해버려서 그런가 싶어서 새로 다시 WebView용 파일을 만들었더니 잘 되었다. 새로운 파일을 만들 때 파일명을 조금 더 생각해서 만들어야겠다.

 

android developer page

https://developer.android.com/guide/webapps/webview?hl=ko