본문 바로가기

개발 코딩 정보 공유/안드로이드 자바 코틀린

안드로이드 웹뷰 기초 ~ 알아보기

 

 

 

 

 

 

 

 

 

 

 

 

 

안드로이드 웹뷰 기초

 

안녕하세요. 모바일과 웹은 우리 일상생활에서 필수가 되버린지 오래인 것 같네요. 안드로이드 개발시에도 역시나 웹은 필수 요소중 하나 이기도 합니다. 개발시 웹뷰 라는 객체를 활용하여 앱내에서도 기존의 모바일 브라우저 처럼 사용할 수 있습니다. 우리 앱내부에 브라우저를 심는다고 생각하면 편할 것 같네요. 그러나 웹 브라우저들의 막강한 기능을 다 지원하지는 않습니다. 그래도 대부분은 어떤 꼼수를 써서든 구현이 되긴 합니다^^;; 웹뷰 사용법 기초에 대해서 알아봅시다.

#웹뷰 #웹뷰사용법 #웹뷰기초

 

안드로이드 웹뷰의 경우 초기에는 매우 제약적인 기능만 사용이 가능했습니다. 이는 우리가 원하는 하이브리드 웹과 거리가 멀었죠. 그러던 중 반가운 소식이 들려옵니다. 구글은 '안드로이드킷캣' 을 기점으로 웹뷰의 대대적인 변화를 가져옵니다. 안드로이드 4.4 킷캣에서는 웹뷰가 크로미엄 프로젝트 기반으로 새롭게 구현되었고, HTML5, CSS3, 자바스크립트등 웹 표준 기술들을 지원하며, 특히 안드로이드용 크롬 브라우저 버전 30 이후에서 지원하던 최신 HTML5 기능 들을 대부분 지원하게 되었습니다. 또한 V8 자바스크립트 엔진이 적용되어 있기 때문에 자바스크립트를 처리하는 속도가 훨씬 빨라졌습니다. 개인적으로 가장 좋아하는 기능이죠. 웹뷰의 디버깅이 매우 편해졌습니다. 웹페이지를 개발할 수 있도록 크롬 개발자 도구를 통한 리모트 디버깅 기능을 제공합니다.

#크롬웹뷰 #크로미엄프로젝트 #킷캣변화 #html5 #css3 #웹표준

 

 

 

*파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음

 

 

안드로이드 웹뷰를 사용한 앱은 흔히들 말하는 하이브리드 앱의 다른말 이기도 합니다. (하이브리드 앱의 경우 각각의 개발 환경마다 다르게 부르는 경우가 있으니 주의 : 폰갭, 코도바, 아이오닉등을 이용해 IOS, android 앱을 개발한 경우를 이르기도 함) 웹뷰를 사용할때 장점은 PC 와 모바일 용 웹이 존재한다면 혹은 반응형 웹을 가지고 있다면 그걸 그대로 앱으로 임베디드 하여 사용할 수 있습니다. 하지만 브라우저처럼 모든 기능을 다 사용할 수 없기 때문에 약간의 튜닝은 필수겠죠. 웹뷰를 사용한 앱의 단점은 속도입니다. 네이티브 UI를 사용한 앱보다 현저히 느릴수 밖에 없습니다. 그래서 인지 웹뷰를 사용하지 않는 네이티브 언어만을 사용하여 UI를 구현한 앱들이 많아지는 것 같습니다. #하이브리드앱 #안드로이드웹뷰

 

우선은 Layout(XML)상에 WEBVIEW 를 만들어 줍니다. 그리곤 소스상에 객체를 연결해 줍니다.

 

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

 

1
2
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
cs

 

웹뷰를 사용하기위해서는 WebSettings 객체를 이용하여 각종필요한 셋팅을 해주셔야 합니다. 우리는 오늘 자바스크립트 셋팅을 해봅니다. 

 

1
2
3
//웹뷰클라이언트를 상속한 이너클래스를 우리의 웹뷰로 사용하도록 설정합니다.
MyWebViewClient webViewClient = new MyWebViewClient();
webView.setWebViewClient(webViewClient);
cs

 

 

그리곤 MyWebViewClient 라는 이너클래스를 생성하여 layout 과 연결한 webview 객체와 연결하여 줍니다. 클래스는 아래와 같이 정의 해주면 됩니다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 /**
 * 웹뷰를 사용하려면 그에 따른 클래스를 정의해야 합니다.
 * 우리는 MyWebViewClient를 통해 이를 구현 해봅시다.
 */
private class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
 
        Uri url = request.getUrl();
        if(url.toString().indexOf("google.com"> -1 ) {
            return false;
        }
 
        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url.toString()));
        startActivity(intent);
        
        return true;
    }
}
cs

 

 

shouldOverrideUrlLoading 메서드에서 'google.com' 이외의 값은 intent 를 통해 실행을 위임해버립니다. 이렇게 하면 간단한 웹뷰를 삽입한 앱이 손쉽게 만들어 집니다. 좀 더 자세한 공부는 구글의 레퍼런스를 통해서 확인하는게 좋겠죠? 아래는 전체 소스를 첨부합니다. 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
public class BasicWebviewActivity extends AppCompatActivity {
 
    private WebView webView = null;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_basic_webview);
 
        webView = (WebView) findViewById(R.id.webview);
 
        //자바스크립트는 선택이 아니라 필수 요소죠.
        //true 값을 통해 설정해 줍시다.
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
 
        //웹뷰클라이언트를 상속한 이너클래스를 우리의 웹뷰로 사용하도록 설정합니다.
        MyWebViewClient webViewClient = new MyWebViewClient();
        webView.setWebViewClient(webViewClient);
 
        webView.loadUrl("https://www.google.com");
 
        //이런식의 간단한 페이지를 구성하여 활용도 가능합니다.
        //webView.loadData("<html><body>Hello, world!</body></html>", "text/html", "UTF-8");
 
 
    }
 
 
    /**
     * 웹뷰를 사용하려면 그에 따른 클래스를 정의해야 합니다.
     * 우리는 MyWebViewClient를 통해 이를 구현 해봅시다.
     */
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
 
            Uri url = request.getUrl();
            if(url.toString().indexOf("google.com"> -1 ) {
                return false;
            }
 
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url.toString()));
            startActivity(intent);
            return true;
        }
    }
 
 
    /**
     * 키 이벤트를 탐지하고 백버튼일 경우
     * 브라우저에서 처럼 뒤로 돌아가기를 구현할 수 있습니다.
     * 이 말은 웹뷰에서 히스토리 관리가 된다는 말이죠.
     *
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && this.webView.canGoBack()) {
            this.webView.goBack();
            return true;
        }
 
        return super.onKeyDown(keyCode, event);
    }
 
    @Override
    public void onBackPressed() {
        //백프레스키만을 위해 지정한다면 여기도 괜찮겠죠?
        //if(this.webView.canGoBack()){
            //this.webView.goBack();
        //}
    }
}
cs

 

 

 

구글 레퍼런스 : https://developer.android.com/reference/android/webkit/WebView