[Android] WebView 구현하기

반응형 홈페이지와 WebView

본인은 회사에 다니면서 많은 홈페이지를 제작했다.

백엔드 개발자라 비록 디자인 영역에는 취약하지만 디자인이 홈페이지를 제작하는데 얼마나 중요한지는 매번 느끼는 바이다.

보기좋은 홈페이지가 사용하기에도 좋은건 당연하니깐 !!

요즘 홈페이지는 대부분 반응형 홈페이지로 만들어지는데

반응형 홈페이지란 pc뿐 아니라 다양한 디바이스에서도 사용자의 해상도에 따라 

레이아웃을 보다 유연하고 강력하게 관리할 수 있도록 설계된 웹사이트이다.

즉, 간단히 말해 반응형 홈페이지는 폰에서도 pc 홈페이지처럼 매끄럽게 화면에 잘 나타나게 하는 유용한 홈페이지다.

WebView는 이런 반응형 웹사이트를 안드로이드 디바이스에서 띄워줄수 있는 기능이다.

WebView를 이용하여 홈페이지를 앱내에서 호출하여 반응형 및 하이브리드 형태의 앱을 개발하는데 유용하다.

하지만 모바일에서 직접적으로 만들어진것이 아니기에 pc 홈페이지에 비해 성능이 떨어 질 수는 있다.

WebView 만들기

1. 먼저 새로운 프로젝트를 만들자. 프로젝트 이름을 WebView라 하겠다.

---

2. 프로젝트 생성 뒤 Manifest.xml 에 아래의 퍼미션을 추가해준다.

Manifest.xml

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

---

3. 다음은 모바일에 보일 화면을 만들어보자. 이부분에서 WebView를 넣어준다.

WebView 를 추가해주고 화면에 꽉차게 보이도록 레이아웃 넓이와 길이를 전부 match로 맞춰준다.

WebView의 id는 webView로 하겠다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
 
<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="com.example.jerry.WebView.MainActivity">
    <!--메인 페이지-->
 
            <WebView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/webView"
                >
            </WebView>
 
</LinearLayout>
 

---

4. 다음은 Java 코드에서 WebView를 연결하는 작업을 해보자. 

4-1. 먼저 Webview 를 할당해서 xml의 Webview랑 연결해준다.

 
private WebView mWebView;
 
mWebView = (WebView) findViewById(webView);//xml 자바코드 연결
 

4-2. 웹뷰에서 자바스크립트가 사용이 안되도록 디폴트 설정 되어 있기 때문에 자바 스크립트가 가능하도록 아래 코드를 넣는다.

mWebView.getSettings().setJavaScriptEnabled(true);//자바스크립트 허용

4-3. 보여줄 홈페이지 URL을 넣은뒤 웹뷰를 실행하는 코드를 작성한다.

mWebView.loadUrl("http://jerryjerryjerry.tistory.com");//웹뷰 실행

4-4. 웹뷰에서 크롬이 실행이 가능하도록 아래 코드를 넣어준다.

mWebView.setWebChromeClient(new WebChromeClient());

4-5. 웹뷰에서 홈페이지를 띄웠을때 새창이 아닌 기존창에서 실행이 되도록 아래 코드를 넣어준다. 

그리고 그 기능을 하는 Class를 만들어 준다.

mWebView.setWebViewClient(new WebViewClientClass());
 
private class WebViewClientClass extends WebViewClient {//페이지 이동
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.d("check URL",url);
            view.loadUrl(url);
            return true;
        }
    }

4-6. 다음 웹뷰에서 뒤로가기가 가능하도록 아래 코드를 넣어준다.

앱 내부에 있는 웹뷰가 아닌 다른 버튼을 클릭할 시 웹뷰의 히스토리를 거꾸로 가게 만들수 있는데,

이 히스토리는 URL 이동, 클릭으로 인한 이동 등 모든 웹뷰에서 일어난 페이지 이동이 저장되어 있다.

goBack() 함수는 페이지 이동을 거슬러 올라 갈수 있는 함수이다.

 @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {//뒤로가기 버튼 이벤트
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {//웹뷰에서 뒤로가기 버튼을 누르면 뒤로가짐
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

MainActivity.java(전체코드)

package com.example.jerry.WebView;
 
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
import static com.example.jerry.WebView.R.id.webView;
 
 
public class MainActivity extends AppCompatActivity {
 
    private WebView mWebView;
 
    private String myUrl = "http://";// 접속 URL (내장HTML의 경우 왼쪽과 같이 쓰고 아니면 걍 URL)
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
 
        // 웹뷰 셋팅
        mWebView = (WebView) findViewById(webView);//xml 자바코드 연결
        mWebView.getSettings().setJavaScriptEnabled(true);//자바스크립트 허용
 
        mWebView.loadUrl("http://jerryjerryjerry.tistory.com");//웹뷰 실행
        mWebView.setWebChromeClient(new WebChromeClient());//웹뷰에 크롬 사용 허용//이 부분이 없으면 크롬에서 alert가 뜨지 않음
        mWebView.setWebViewClient(new WebViewClientClass());//새창열기 없이 웹뷰 내에서 다시 열기//페이지 이동 원활히 하기위해 사용
 
    }
 
 
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {//뒤로가기 버튼 이벤트
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {//웹뷰에서 뒤로가기 버튼을 누르면 뒤로가짐
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
 
    private class WebViewClientClass extends WebViewClient {//페이지 이동
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            Log.d("check URL",url);
            view.loadUrl(url);
            return true;
        }
    }
 
 
}

---

5. 다음은 앱에서 WebView가 넓게 보이기 위해 액션바를 제거하자.

res/values/string.xml로 가서 AppTheme를 NoActionBar 속성으로 바꿔주자.

res/values/string.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
</resources>
 

WebView실행

여기까지 전부 완성되었다면 WebView가 완성된 것이다.

프로젝트를 실행시켜보자.

티스토리 블로그도 반응형 홈페이지이기 때문에 모바일 상에서도 매끄럽게 돌아간다 ㅎㅎ