티스토리 뷰

Development/App

#28 WebView로 인터넷을 해보자

Mir(whdghks913) 2014.02.13 14:46

안녕하세요

강좌가 등록되는 시간 주기가 초반에는 하루였는대 요즘은 보름~한달 되는거 같아요

천천히 강좌를 써서 여러분이 빨리 따라올수있도록 배려하는거랍니다~(?)

그리고 이번강좌 부터는 모바일에서의 가독성 향상을 위해 소스코드를 사진으로 캡쳐해서 올리겠습니다

복사할수있는 소스코드는 "코드보기"버튼을 누르면 볼수 있으며, 티스토리에서만 볼수있습니다 (네이버는 지원을 안하므로..)


28. WebView로 인터넷을 해보자

28-1 인터넷을 하기 위해서는 권한이 필요해요

웹뷰 예제를 따라하다 마지막에 "잘못한게 없는거 같은데 강제종료 되요"라는 덧글이 올라올까봐 처음부터 언급하겠습니다

인터넷을 하기 위해서는 AndroidManifest.xml에 인터넷 권한을 추가해 주어야만 합니다


그래야 이 어플을 설치하기 전에 아 인터넷에 접속할수 있구나 라는걸 사용자에게 알릴수가 있답니다


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




28-2 레이아웃을 만들어 보자

오랜만에 레이아웃을 만드는거 같습니다(?)

이번시간에 만들 레이아웃은 아래와 같습니다



평소 사용하던 RelativeLayout을 사용하면 힘들수 있으므로 이번에는 리니어 레이아웃을 사용해 보겠습니다


잠깐 LinearLayout에 대해 설명하자면..

이 레이아웃은 추가된 하위뷰들(EditText)을 순서대로 위에서 아래로, 또는 왼쪽에서 오른쪽으로 배열합니다


저 사진에서 ProgressBar는 0으로 설정해야 하고요


레이아웃 xml은 아래와 같습니다




코드 보기


두번째 리니어 레이아웃을 보면

focusable과 focusableInTouchMode이 있는데요

처음에 액티비티에 EditText가 있을경우 포커스가 EditText로 먼저 가므로 이를 방지하기 위해 넣어줬습니다

이 두개가 없을경우 앱을 실행하면 키보드가 나타나요


더 자세한 설명보다 직접 보는게 이해가 빠르므로 설명은 생략하겠습니다

(앱 예제안 주석에 달아두겠습니다)




28-3 MainActivity.java

이번 강좌에서는 선언해야 할것이 조금 많습니다



코드 보기

가독성 향상을 위해 사진을 사용했습니다

코드를 보기 위해서는 "코드보기"버튼을 눌러주세요~~


이제 onCreate()로 와주세요


id값과 InputMethodManager의 경우는 시스탬 서비스를 호출해야 합니다



코드보기

첫번째 줄을 보시면 InputMethodManager가 처음 나왔는데요 이것을 사용하는 이유는 이동할 주소를 입력한뒤 이동 버튼을 누르면

키보드가 숨겨져야 하죠? 그래서 InputMethodManager를 사용합니다



이제 WebSettings에 대해 설명할 차례가 왔습니다



코드보기

첫번째 줄이 WebView의 설정을 불러오는 부분입니다

3번째 라인은 Form데이터를 저장할지 여부이며,

4번째는 java스크립트 사용여부

5~6번째는 멀티터치로 화면을 늘릴지 여부를 설정하고,

7번줄은 캐쉬 사용 모드를 나타내고 있습니다


CacheMode에는 아래중 하나가 들어갈수 있습니다

  • WebSettings.LOAD_DEFAULT
  • WebSettings.LOAD_NORMAL
  • WebSettings.LOAD_CACHE_ELSE_NETWORK
  • WebSettings.LOAD_NO_CACHE
  • WebSettings.LOAD_CACHE_ONLY

여기서 LOAD_CACHE_ELSE_NETWORK에 대해 부가 설명을 하면

캐쉬를 사용할수 있는경우 기간이 만료되도 사용합니다, 사용할수 없으면 네트워크를 사용합니다

(API 원문 : Use cached resources when they are available, even if they have expired. Otherwise load resources from the network.)



이제 아래 문구를 또 넣어주세요



코드 보기


그러면 new ~()부분에 빨간 밑줄이 나타날겁니다



당황하지 마시고 아래의 클래스를 추가해 주면 되는데요

onCreate()아래에 추가해 주시면 됩니다

설명까지 한번에 이어서 하겠습니다



먼저 webChromeClient입니다






코드 보기



이 onProgressChanged()메소드는 페이지를 로딩할때, 프로그래스가 달라질때마다 호출됩니다

그러므로 ProgressBar를 설정하는 부분을 이곳에 넣어주면 됩니다~


onReceivedIcon()는 웹페이지의 아이콘이 변경될때마다 호출되는데요


이게 아이콘 입니다


onReceivedTitle()는 웹페이지의 제목이 변경될때마다,

onJsAlert()와 onJsConfirm()는 자바스크립트 알림/경고를 표시할지 여부를 설정해줍니



아래는 webViewClient입니다



코드 보기



위에 있는 4번째 줄의 onPageFinished()는 페이지 로딩이 끝났을때 호출됩니다


아래 shouldOverriedUrlLoading()메소드는 한 페이지에서 다른 페이지로 넘어갈때 호출되므로

13줄의 loadUrl()을 통해 페이지를 이동합니다



여기까지 하셨다면 아까 빨간줄은 없어졌을겁니다


이제 마지막으로 onCreate()의 맨 마지막에 아래 문구만 추가해 주면 끝입니다



코드 보기




이제 Layout에서 버튼을 누르면 할 작업을 만들어 줘야 되요~

onClick에서 GoButton으로 했기 때문에 GoButton이라는 메소드를 만들어 줍시다



코드 보기


2번째 줄에서버튼을 누르면 일단 키보드를 숨겨줍니다

그다음에 httpaddressCheck()라는 메소드를 호출하는데요


이 메소드는 "http://"라는 글자가 주소에 없을경우 추가해주는 메소드입니다


8번 라인에서 입력한 주소로 이동하는 모습을 볼수 있어요




마지막으로 뒤로가기 키를 누르면 이전 페이지로 가는 코드를 넣어줍시다



코드 보기


4번줄의 canGoBack()은 이전 페이지가 있으면 true, 없으면 false를 반환합니다

뒤로 갈수 있는 페이지가 있으면 goBack()을 통해 이전페이지로 이동하고,


없으면 어플을 종료합니다




어플 스크린샷은 아래와 같습니다


이렇게 해서 기본적인 웹뷰 사용법을 알아봤습니다


더 많은 API는 기회가 되면 알아보도록 하겠습니다




MainActivity.java


ExampleWebView.zip

저작자 표시 비영리 변경 금지
신고
댓글
  • HS unicode.html 을 앱을실행시키면 앱메인화며에 실행되어서나오게어떻게하는지 알수있을까요 2014.03.08 18:58 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) aeesrt에 있는 sample.html을 실행시키는 코드입니다

    webView.loadUrl("file:///android_asset/sample.html");
    2014.03.12 18:01 신고
  • Favicon of http://basixblog.tistory.com Basix public class webViewChrome extends WebChromeClient {
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
    super.onProgressChanged(view, newProgress);

    if(newProgress < 100) {
    mProgressBar.setProgress(newProgress);
    }else{
    mProgressBar.setVisibility(View.INVISIBLE);
    }
    }
    }
    에서 mProgressBar를 찾을 수 없다는 오류가 뜨네요...
    2014.07.26 11:45 신고
  • Favicon of http://basixblog.tistory.com Basix 그리고 새창은 어떻게 구현하죠? 2014.07.26 12:31 신고
  • NHS webview 로 로딩할때 white screen현상이나 blank screen현상이 생기는건
    무슨 이유 때문 일까요
    원인이 무엇인지....
    2015.08.17 13:52 신고
댓글쓰기 폼