#9 웹을 불러오는 웹뷰 (WebView)

안드로이드 스튜디오

- WebView -

어플 내에 우리가 원하는 웹을 보여주는 위젯인 WebView의 사용법을 알아보자

[ WebView ]

우선 새로운 프로젝트를 생성한 후 activity_main.xml 파일에서 레이아웃을 LinearLayout으로 변경한 다음

WebView를 생성해준다.

생성할 때 화면전체에 웹을 띄우려 할 것이기에 height값과 width값을 match_parent 로 설정해 줄 것이다.

겸사겸사 아이디값도 부여해보자.

<LinearLayout 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=".MainActivity">

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

</LinearLayout>

그러면 프리뷰화면에서 꽉 찬 웹뷰의 모습을 볼 수 있을것이다.

다음으로 MainActivity.java 파일로 넘어가서 MainActivity 클래스 안에 WebView를 선언, 띄우길 원하는 웹의 url도 선언해보자

public class MainActivity extends AppCompatActivity {

    private WebView webview;
    private String url = "https://www.youtube.com";

onCreate 메소드에서 WebView의 아이디를 가져오고 여러 세팅들을 설정해 줄 것이다.

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

    webview = (WebView)findViewById(R.id.webView);
    //webView 에 대한 셋팅
    // 자바스크립트를 허용해주는 세팅
    webview.getSettings().setJavaScriptEnabled(true);
    //url 주소를 가져오기
    webview.loadUrl(url);
    // 웹을 더 쾌적하게 돌리기 위한 세팅
    webview.setWebChromeClient(new WebChromeClient());
    webview.setWebViewClient(new WebViewClientClass());

}

webview.getSettings().setJavaScriptEnabled(boolean true); : 웹뷰에 자바스크립트 접근을 허용해주는 세팅

webview.loadUrl(String url); : url주소를 불러오는 함수

webview.setWebChromeClient(new WebChromeClient()); : 웹뷰로 띄운 웹 페이지를 컨트롤하는 함수, 크롬에 맞춰 

쾌적한 환경조성을 위한 세팅으로 보면 된다.

webview.setWebViewClient(); : 페이지 컨트롤을 위한 기본적인 함수, 다양한 요청, 알림을 수신하는 기능을 한다.

그런데 여기서 setWebViewClient(new WebViewClientClass()); 하면 WebViewClientClass부분이 에러가 뜰거다.

에러가 난 부분을 클릭 후 ALT + Enter 하면 2개의 해결방안이 나올텐데

여기서는 Create inner class 라고 되어있는 해결방법을 선택해준다.

그럼 onCreate메소드 밖에 또하나의 클래스가 생성되는데

private class WebViewClientClass extends WebViewClient {
}

이 클래스 안에다가 현재 웹페이지의 url을 읽어오는 메소드를 생성해 줄 거다.

Ctrl + O 한 다음 shouldOverrideUrlLoading 이라는 메소드를 선택

private class WebViewClientClass extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return super.shouldOverrideUrlLoading(view, url);
    }
}

그 다음 view.loadUrl 구문을 shouldOverrideUrlLoading 메소드 안에 입력해준다.

그리고 return super. ~~ 되어있는 구문을 return true; 로 변경해준다.

private class WebViewClientClass extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
}

그리고 안드로이드 폰 내에서 뒤로가기 버튼을 눌렀을 때 웹이 뒤로 가는 모습을 봤을것이다.

이러한 기능도 직접 명령을 넣어줘야 하는데

Ctrl + O 한 뒤 onKeyDown 메소드 선택

// 안드로이드 내에서 특정 키를 누를 때 동작하는 메소드
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    return super.onKeyDown(keyCode, event);
}

onKeyDown 해석 그대로 안드로이드 내에서 특정 키를 누를 때 동작하는 메소드이다.

이제 뒤로가기 버튼을 누를 경우 웹이 뒤로간다는 기능을 추가해줘야 하므로

If 문을 사용해서 onKeyDown 메소드 내에 다음과 같이 넣어준다.

// 뒤로가기 키를 누를 때 & 웹뷰가 뒤로 갈 수 있는 상태일 때 뒤로 가라는 명령
if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
    webview.goBack();
    return true;
}

단순히 if문 조건식에 keyCode == KeyEvent.KEYCODE_BACK 만 넣어준다면 웹에서 뒤로갈 페이지가 없을때

에러가 나게 될 것이다. webview.canGoBack() 은 웹이 뒤로 갈수 있는 상황이면 True를 반환하는 함수다.

if문의 조건식이 True가 되면 webview.goBack(); : 웹 뒤로가기 가 되는 것이다.

빌드를 하기 전에 가장 중요한 작업이 하나가 남았다.

바로 이 앱에 인터넷 권한을 설정해줘야 한다.

app->manifest->AndroidMenifest.xml 파일로 들어가서

<manifest xmins ~~~  이 manifest 사이에 다음과 같이 작성해준다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.leegm.webexample">
    //인터넷 접근 권한 허용
    <uses-permission android:name="android.permission.INTERNET" />

<uses-permission 까지 치면 자동완성창이 뜰텐데 INTERNET까지만 쳐도 자동으로 "android ~ INTERNET" 구문이

완성이 될 것이며 구문을 마칠 땐 꼭 />로 닫아줘야 한다.

그럼 java파일 총 코드를 올리며 마무리하겠다.

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

public class MainActivity extends AppCompatActivity {

    private WebView webview;
    private String url = "https://www.youtube.com";

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

        webview = (WebView)findViewById(R.id.webView);
        //webView 에 대한 셋팅
        // 자바스크립트를 허용해주는 세팅
        webview.getSettings().setJavaScriptEnabled(true);
        //url 주소를 가져오기
        webview.loadUrl(url);
        // 웹을 더 쾌적하게 돌리기 위한 세팅
        webview.setWebChromeClient(new WebChromeClient());
        webview.setWebViewClient(new WebViewClientClass());

    }

    // 안드로이드 내에서 특정 키를 누를 때 동작하는 메소드
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // 뒤로가기 키를 누를 때 & 웹뷰가 뒤로 갈 수 있는 상태일 때 뒤로 가라는 명령
        if((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
            webview.goBack();
            return true;
        }

        return super.onKeyDown(keyCode, event);
    }

    private class WebViewClientClass extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}