웹뷰(webview)를 만들어 보자

디자이너가 만들어 보는 안드로이드 앱!!

안녕하세요. cwhboy 입니다.

안드로이드를 배우면서 가장 먼저 해보고 싶었던 기능은?

내가 만든 포트폴리오 사이트, 블로그, SNS를

앱으로 만들어 보고 싶다 였죠.

하지만

정말 어렵다 ㅠㅠ.................!!!!!

절망에 빠져 허우적 거리던 중

하이브리드 앱 방식을 알게 되었죠.

오에~!

네이트, 네이버, 다음도 일종에 하이브리드 앱이죠.

껍데기는 앱이고, 웹으로 만들어둔 화면을 웹뷰(webview)로 끌어다 쓰는거죠.

html로 설명하면 iframe와 비슷한 기능이에요.

쉽게 이야기 하면 핸드폰에 기본 설치 되어 있는 브라우저 (크롬, 사파리)를 만들어 사용하는거에요.

자 일단 만들어 보죠.

AndroidManifest.xml

// 인터넷 사용할꺼야 라고 선언
<uses-permission android:name="android.permission.INTERNET" />

layout.xml

//웹뷰 등록 html로 비교하면 iframe 과 비슷하겠네요.
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"></WebView>

Java

private WebView mWebView; //웹뷰
private WebSettings mWebSettings; //웹뷰세팅

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 웹뷰 세팅
mWebView = (WebView)findViewById(R.id.webview); //레이어와 연결
mWebView .setWebViewClient(new WebViewClient()); // 클릭시 새창 안뜨게
mWebSettings = mWebView.getSettings(); //세부 세팅 등록
mWebSettings.setJavaScriptEnabled(true); // 자바스크립트 사용 허용

mWebView.loadUrl("http://m.nate.com"); //원하는 URL 입력
}

단 몇 줄로 웹뷰 완성 ㅋㅋ

정말 간단하죠.

물론 이대로는 원활하게 사용하긴 무리가 있어요.

하지만 포트폴리오를 잠시 보여준다거나

특정 이미지를 보여주기는 충분할수도 있죠.

제가 이야기 하고 싶은건

생각보다 안드로이드 개발 접근이 쉽다는 점을 알려드리고 싶네요.

아래는 웹뷰(webview) 세부 옵션이에요.

잘 응용하면 기본 브라우저와 거의 유사한 조작도 가능합니다.

웹뷰 기본 옵션

mWebView.goBack(); //뒤로가기
mWebView.goForward(); //앞으로가기
mWebView.reload(); //새로고침

mWebView.clearCache(true); // 캐시 지우기
mWebView.reload(); // 현재 웹뷰 새로고침
mWebView.stopLoading(); // 로딩 중단

//스크롤 없애기
mWebView.setVerticalScrollBarEnabled(false);
mWebView.setHorizontalScrollBarEnabled(false);

웹뷰 세부 옵션

wvs = mWebView.getSettings();

wvs .setWebViewClient(new WebViewClient()); // 클릭시 새창 안뜨게
wvs .setJavaScriptEnabled(true); //자바스크립트 사용

wvs .setWebChromeClient(new webViewChrome()); // alert 경고창 사용

//화면 비율 관련
wvs .setUseWideViewPort(true); //wide viewport를 사용하도록 설정
wvs.setLoadWithOverviewMode(true) // 컨텐츠가 웹뷰보다 클 경우 스크린 크기에 맞게 조정
wvs.setInitialScale(35); //비율 조절
wvs.setDefaultFontSize(8); // 기본 폰트 사이즈 지정
wvs.setMinimumFontSize(8); //폰트 사이즈 지정

//웹뷰 멀티 터치 가능하게 (줌기능)
wvs .getSettings().setBuiltInZoomControls(true); //줌 아이콘 사용 설정
wvs .getSettings().setSupportZoom(false);

wvs .setPluginState(WebSettings.PluginState.ON_DEMAND); // 플러그인을 사용 설정
wvs .setCacheMode(WebSettings.LOAD_NO_CACHE); // 웹뷰가 캐시를 사용하지 않도록 설정

wvs .setDefaultZoom(WebSettings.ZoomDensity.FAR); // 페이지 크기 자동 조절?

뒤로 가기 버튼

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
}
return super.onKeyDown(keyCode, event);
}

webViewExampleSettings.setSaveFormData(true); 입력된 데이터 저장 여부

webViewExampleSettings.setSavePassword(true); 입력된 비밀번호 저장 여부