모바일 안드로이드에서 웹뷰(WebView) 사용법
페이지 정보
작성자
본문
(1) 웹뷰 : 웹 페이지를 보여주는 위젯
- 네트워크 입출력, 캐싱, 링크 클릭 처리, 확대, 축소, 히스토리 관리 등 웹브라우저가 제공하는 모든 기능을 자체적으로 제공
- 안드로이드 내장 웹킷(WebKit)라이브러리가 모든 것을 처리
- 웹킷은 오픈 소스이며 사파리, 크롬등에 채용되어 이미 성능 입증,신뢰성이 높음
(2) WebView구현순서
1) 매니페스트에 INTERNET 퍼미션 지정
: 모바일 장비에서 네트워크의 사용은 요금과 관련되므로 배포시 사용자의 허가나 동의가 필요하므로
<!—인터넷 연결을 한다는 것을 명시하는 선언문 -à <uses-permission android:name="android.permission.INTERNET"/> |
2) layout에서 WebView를 설정
<WebView android:id="@+id/webView1" android:layout_width="match_parent" android:layout_height="match_parent" /> |
3) WebView에서 loadUrl을 이용해 모바일웹을 로딩
WebView wv= (WebView) findViewById(R.id.webView1); wv.loadUrl("http://m.sports.daum.net/sports/soccer/schedule/today/"); |
4) WebSettings클래스로 WebView상태를 설정
WebSettings set = wv.getSettings(); set.setJavaScriptEnabled(true); // javascript를 실행할 수 있도록 설정 set.setJavaScriptCanOpenWindowsAutomtically (true); // javascript가 window.open()을 사용할 수 있도록 설정 set.setBuiltInZoomControls(true); // 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정 set.setPluginState(WebSettings.PluginState.ON_DEMAND); // 플러그인을 사용할 수 있도록 설정 set.setSupportMultipleWindows(true); // 여러개의 윈도우를 사용할 수 있도록 설정 set.setSupportZoom(true); // 확대,축소 기능을 사용할 수 있도록 설정 set.setBlockNetworkImage(false); // 네트워크의 이미지의 리소스를 로드하지않음 set.setLoadsImagesAutomatically(true); // 웹뷰가 앱에 등록되어 있는 이미지 리소스를 자동으로 로드하도록 설정 set.setUseWideViewPort(true); // wide viewport를 사용하도록 설정 set.setCacheMode(WebSettings.LOAD_NO_CACHE); // 웹뷰가 캐시를 사용하지 않도록 설정 // (참고사이트) http://developer.android.com/reference/android/webkit/WebSettings.html |
5) 페이지 navigation처리
: WebView로 구현시에는 첫 화면 로딩시에는 액티비티 내로 브라우저 내용이 보이지만 그 이후 페이지 내에 링크를 통해 리로딩될 시에는 내장된 브라우저가 실행 되어 버립니다.
만약 현재 액티비티 안에서만 계속 리로딩하고 싶으면 아래에 언급될 WebViewClient를 사용하도록 합니다.
//(참고사이트) http://developer.android.com/reference/android/webkit/WebViewClient.html wv.setWebViewClient(new TabWebViewClient());
private class TabWebViewClient extends WebViewClient { @Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
System.out.println("ImageAdapter.bPopUp:["+ImageAdapter.bPopUp+"],URL :[" + url+ "]"); if(ImageAdapter.bPopUp == true){ Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); view.getContext().startActivity(i); return true; }else{ System.out.println("[else]bPopUp:["+ImageAdapter.bPopUp+"],URL :[" + url+ "]"); view.loadUrl(url); return true; } }
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { Toast.makeText(act, "Some Error :" + description, Toast.LENGTH_SHORT) .show(); } } |
이 소스에서는 shouldOverrideUrlLoading과 onReceivedError만 구현했으나 많은 메소드들이 있는 클래스임
대표적인 메소드에 대해서는
void onLoadResource(WebView view, String url) 외부 리소스를 불러올 때 처리할 내용을 구현한다.
void onPageFinished(WebView view, String url) 페이지 로딩이 완료 되었을 때 처리할 내용을 구현한다.
void onPageStarted(WebView view, String url, Bitmap favicon) 페이지 로딩이 시작될 때 처리할 내용을 구현한다.
void onReceivedError(WebView view, int errorCode, String description, String failingUrl) 오류가 발생했을 때 처리할 내용을 구현한다.
void onScaleChanged(WebView view, float oldScale, float newScale) 스케일이 변경되었을 때 처리할 내용을 구현한다.
WebResourceResponse shouldInterceptRequest(WebView view, String url) 리소스 요청이 있을 때 처리할 내용을 구현한다.
boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) 키 이벤트 발생시에 처리할 내용을 구현한다.
boolean shouldOverrideUrlLoading(WebView view, String url) 새로운 Url을 불러 오려고 할 때 처리할 내용을 구현한다. |
출처 : http://blog.daum.net/dayhyub/69
안드로이드 webview 속성
webview = (WebView)findViewById(R.id.web_main);
webview.getSettings().setJavaScriptEnabled(true);
WebSettings set = webview.getSettings();
set.setJavaScriptEnabled(true); // javascript를 실행할 수 있도록 설정
set.setJavaScriptCanOpenWindowsAutomatically (true); // javascript가 window.open()을 사용할 수 있도록 설정
set.setBuiltInZoomControls(false); // 안드로이드에서 제공하는 줌 아이콘을 사용할 수 있도록 설정
set.setSupportZoom(false); // 확대,축소 기능을 사용할 수 있도록 설정
set.setPluginState(WebSettings.PluginState.ON_DEMAND); // 플러그인을 사용할 수 있도록 설정
set.setSupportMultipleWindows(false); // 여러개의 윈도우를 사용할 수 있도록 설정
set.setBlockNetworkImage(false); // 네트워크의 이미지의 리소스를 로드하지않음
set.setLoadsImagesAutomatically(true); // 웹뷰가 앱에 등록되어 있는 이미지 리소스를 자동으로 로드하도록 설정
set.setUseWideViewPort(true); // wide viewport를 사용하도록 설정
set.setCacheMode(WebSettings.LOAD_NO_CACHE); // 웹뷰가 캐시를 사용하지 않도록 설정
기본적으로 해주어야 할 것
webview = (WebView)findViewById(R.id.web_main);
webview.getSettings().setJavaScriptEnabled(true);
WebSettings set = webview.getSettings();
set.setJavaScriptEnabled(true); // javascript를 실행할 수 있도록 설정
set.setSupportZoom(false); // 확대,축소 기능을 사용할 수 있도록 설정
set.setCacheMode(WebSettings.LOAD_NO_CACHE); // 웹뷰가 캐시를 사용하지 않도록 설정
외부에서 URL 불러올 때, 사이트에 따라 확대 및 축소가 안되는 경우도 있다.
1. Web-View에 대한 기본적인 세팅
- Web-view를 사용하기 위해서 기본적으로 뷰를 불러왔을때 세팅해줘야 하는 값들이 있다.
1) javascript 실행여부
2) default URL(실행시 켜지는 URL 설정)
3) 웹뷰를 실행할 때 사용할 브라우져 설정 ( 예제에서는 사용자가 지정한 브라우져가 실행되게 되어있다.)
// web-view settings
mWebView.getSettings().setJavaScriptEnabled(true); // java-script ok
mWebView.loadUrl([YOUR_SITE_URL]); // to set first url
mWebView.setWebViewClient(new WebViewClient());// web-view settings on default browser
- 자바스크립트를 사용가능하게 됬을때의 현상
~ 자바스크립트는 외부(웹 사이트의 클라이언트 레이어)에서 오는 내용이 많다.
~ 스크립트로 인해서 안드로이드와 충돌될 가능성이 있다며 Waring을 발산해준다.
~ 무시해도 되는 경고지만 보기 싫으니 @SuppressLint("SetJavaScriptEnabled") 를 추가한다.
※ SuppressLint, Lint tool 이란?
- Lint tool을 언급한 것이 처음이라 간단하게 언급하고 넘어가려고 한다.
- Lint는 프로그래머 입장에서 완벽한 코드이지만, 충돌 가능성이 존재할 것 같다고 IDE가 판단한 것이다.
- 자신의 코드가 더럽혀져 있는 것을 보기싫은 프로그래머는 Lint tool을 이용하여 경고를 없애버린다.
예를들어, min-sdk 이후에 개발된 컴퍼넌트를 사용하게 되는 상황이 있다. 이 경우 프로그래머는 SDK의 버전을 불러와서 예외처리를 해준다. 신/구버전에 대한 체크를 다하였지만, 프로그래머 눈에는 계속 waring이 보이고, 이를 보기 싫은 프로그래머는 Lint Tool을 이용해 버린다.
SuppressLint("NewApi");
위의 경우에는 어플리케이션 내부에서 페이지를 생성하게되면 서로 자바스크립트가 충돌될 가능성이 있기 때문에 경고를 해주는 것이다. 하지만, 어플리케이션 내부에서 페이지를 생성하지 않는 나의 입장에서는 무시할 경고이므로 Lint Tool을 이용해서 경고를 없앴다.
SuppressLint("SetJavaScriptEnabled");
- 이외의 Lint tool에 대한 자세한 내용은 이곳을 클릭해주길 바란다.
2. URL에 대한 Settings
- 위에서 Web-view browser를 선택함과 동시에 URL기반의 웹뷰가 실행되게 된다.
- 사용자가 설정하는 URL을 자신이 원하는 형식으로 다시 변형이 가능한다.
- 이는 WebView 관련 클래스를 상속받아서 확장시키는 개념이다.
~ 일단, 불러주는 browser setting을 자신이 만든 클래스로 변경해준다.
mWebView.setWebViewClient(new WebViewClientClass());// web-view settings on default browser
~ 클래스 내용을 확장시켜준다. 여기서 예를 든 것은 카카오톡과 카카오스토리에 대한 처리이다.
private class WebViewClientClass extends WebViewClient {
// enable KAKAO-Story and KAKAO-Talk share
public static final String KAKAOTALK_PROTOCOL_START = "kakaolink:";
public static final String KAKAOSTORY_PROTOCOL_START = "storylink:";
// market link ( originally : "market://detail? package name", but it is not acted )
public static final String GOOGLE_PLAY_STORE_PREFIX = "http://market.android.com/details?id=";
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.startsWith(KAKAOTALK_PROTOCOL_START)) {
try {
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
} catch (ActivityNotFoundException e) {
view.loadUrl(GOOGLE_PLAY_STORE_PREFIX + "com.kakao.talk");
}
} else if (url.startsWith(KAKAOSTORY_PROTOCOL_START)){
try {
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
} catch (ActivityNotFoundException e) {
view.loadUrl(GOOGLE_PLAY_STORE_PREFIX + "com.kakao.story");
}
} else {
view.loadUrl(url);
}
return true;
}
}
3. back-key 처리
- 어플입장에서 웹뷰는 하나의 Activity에서 계속 작동하므로, 뒤로가기키를 눌렀을 경우 어플이 꺼진다.
- Back-key event가 발생했을 때 웹뷰에서 뒤로가기가 되는지 여부를 판단해주는 행동이 필요하다.
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}
관련링크
댓글목록
등록된 댓글이 없습니다.