[Android] WebView 안드로이드에서 구현하기

안녕하세요. 이번 포스트에서는 하이브리드 앱을 만들기 위해서 필수적인 '웹뷰'를 구현해보겠습니다.

 

먼저, '하이브리드 앱' 이란, 겉으로 보기에는 앱이지만, 실제로는 웹을 기반으로 앱의 기능을 차용하는 형태의 앱을 의미합니다. 이곳에서 '웹뷰'는 앱 화면상에 웹페이지를 어플리케이션 안에서 보여주는 프레임입니다.

 

예시를 들자면, 다음이나 네이버 같은 경우 자체 앱을 띄우게 되면 네이버 웹과는 차이가 없습니다.

하지만 음악검색 음성인식 등과 같은 일부 기능은 앱에서만 지원이 됩니다. 이와 같은 형태가 하이브리드 앱입니다.

 

그렇다면 이러한 웹뷰를 안드로이드 에서는 어떻게 구현할 수 있을지 알아봅시다.

 

1. manifest.xml

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


android:usesCleartextTraffic="true"

 

웹을 띄우는 것이므로, 당연히 manifest에 인터넷 권한을 허용해야 합니다.

 

동시에, application 태그에 clearText속성을 true로 설정합니다.(그렇지 않으면, web호출 시 clear text error발생)

 

 

2. xml 파일

<WebView
            android:id="@+id/wvWebview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintTop_toBottomOf="@id/jiho_rank_title_layout">

        </WebView>

mainactivity.xml(본인이 만든 xml)에 다음과 같이 webview를 추가합니다.(본인이 쓰일 디자인에 맞게.)

 

 

 

3.. kt파일

@SuppressLint("JavascriptInterface")
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {

        viewModel = ViewModelProviders.of(this, viewModelFactory)[jihorankViewModel::class.java]
        mBinding = FragmentjihorankBinding.inflate(inflater, container, false)
        mBinding.viewModel = viewModel
        webView = mBinding.wvWebview
        actionWebView()
        SettingWebView()
        return mBinding.root
    }
    
    private fun actionWebView() {
        mBinding.wvWebview.setOnKeyListener(object : View.OnKeyListener {
            override fun onKey(p0: View?, keyCode: Int, event: KeyEvent?): Boolean { //뒤로가기 버튼 이벤트
                if (event?.action != KeyEvent.ACTION_DOWN)
                    return true
                if (keyCode == KeyEvent.KEYCODE_BACK) {
                    if (mBinding.wvWebview.canGoBack()) {
                        mBinding.wvWebview.goBack() 
                    } 
                    return true
                }
                return false
            }
        })
    }
    @SuppressLint("SetJavaScriptEnabled")
    private fun SettingWebView() {
        mBinding.wvWebview.webViewClient = WebViewClient() // 클릭시 새창 안뜸.
        mBinding.wvWebview.webChromeClient = WebChromeClient() // 변경사항 표시.
        mWebSettings = mBinding.wvWebview.settings //상세 세팅 등록.
        mWebSettings.cacheMode = WebSettings.LOAD_NO_CACHE // 브라우저 캐시 허용.
        mWebSettings.javaScriptEnabled = true // 웹뷰의 자바스크립트 허용.
        mWebSettings.setSupportMultipleWindows(false) // 새창 띄우기 거부.
        mWebSettings.setSupportZoom(true) // 화면 줌 허용.
        mWebSettings.builtInZoomControls = false // 화면 확대 축소 거부.
        mWebSettings.domStorageEnabled = true // 로컬저장소 허용.
        mWebSettings.javaScriptCanOpenWindowsAutomatically = false // 자바스크립트 새창 띄우기(멀티뷰) 거부.
        mWebSettings.loadWithOverviewMode = true // 메타태그 허용.
        mWebSettings.useWideViewPort = true // 화면 사이즈 맞추기 허용.
        mBinding.wvWebview.loadUrl("rank.yourjiho.com/") // 웹뷰에 표시할 웹사이트 주소.
       // mBinding.wvWebview.loadUrl("javascript:func()") // JS함수 호출.
    }

    
    

 

 

 

actionWebView는 뒤로 가기 등 keylistener를 관리합니다.

 

웹뷰 세팅은 위 주석을 보시다시피, 굉장히 많습니다.

(웹 페이지상 자바스크립트와 등의 기능들을 동작하려면, 허용해줘야 하는 설정이 많습니다.)

상세한 웹뷰 세팅은 SettingWebView를 참고해주시면 됩니다.

 

 

 

이상으로 포스팅 마치겠습니다. 감사합니다.

 

 

참고 자료 : WebView에서 웹 앱 빌드  |  Android 개발자  |  Android Developers