[안드로이드] 코틀린 WebView 간단 예제 (With Loading Progressbar)

 

WebView 를 불러오는 간단한 예제를 남기려고 합니다.

WebView 가 Loading 되는 동안 progress bar 를 표시하는 동작이 포함되어있습니다.

전체 소스는 가장 아래에 있습니다.

 

 

 

1. 준비 : AndroidManifest

WebView 를 사용하기 위해 INTERNET 권한을 추가해줍니다.

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

 

추가로  http url 접근을 위한 usesCleartextTraffic 을 true 로 선언해줍니다.

<application
    ......
    android:usesCleartextTraffic="true">

 

 

 

2. WebView 사용

WebView 를 Load 하는 함수를 아래와 같이 구현하였습니다.

private fun webViewLoad() {

    binding.webView.apply {
        webViewClient = MyWebViewClient() // webView 콜백함수 연결
        webChromeClient = MyWebChromeClient() // webView 콜백함수 연결

        // 자바스크립트 사용여부
        settings.javaScriptEnabled = true

        // 레이아웃 사이즈에 맞추기
        settings.loadWithOverviewMode = true
        settings.useWideViewPort = true

        // webView zoom 사용여부
        settings.builtInZoomControls = true
        settings.setSupportZoom(true)
    }

    binding.webView.loadUrl("http://www.naver.com/")
}

 

WebView 를 사용할때 WebViewClient, WebChromeClient 클래스를 활용하면

WebView 내에서 이루어지는 로딩 또는 동작들에 대한 콜백 함수들을 사용할 수 있습니다.

해당 예제에서는 로딩에 관련된 콜백 함수들만 사용 합니다.

 

 

 

3. WebView Loading Progress Bar

아래 로딩과 관련된 콜백 함수들이 있는데,

WebView 가 로딩되는 진행률을 표시하고자 onProgressChanged 콜백함수를 사용했습니다.

해당 콜백함수에서 받은 newProgress 를 통해 로딩되는 진행률을 Progress Bar 로 표시할 수 있었습니다.

inner class MyWebChromeClient: WebChromeClient() {
    // 페이지가 로딩되는 시점 콜백
    override fun onProgressChanged(view: WebView?, newProgress: Int) {
        super.onProgressChanged(view, newProgress)

        binding.progressBar.progress = newProgress
    }
}

inner class MyWebViewClient: WebViewClient() {
    // 페이지가 로딩이 시작하는 시점 콜백
    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
        super.onPageStarted(view, url, favicon)
    }

    // 페이지가 로딩이 끝나는 시점 콜백
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
    }

    // 페이지가 보여지는 시점 콜백
    override fun onPageCommitVisible(view: WebView?, url: String?) {
        super.onPageCommitVisible(view, url)
    }
}

 

 

4. 소스코드

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        webViewLoad()
    }

    private fun webViewLoad() {

        binding.webView.apply {
            webViewClient = MyWebViewClient() // webView 콜백함수 연결
            webChromeClient = MyWebChromeClient() // webView 콜백함수 연결

            // 자바스크립트 사용여부
            settings.javaScriptEnabled = true

            // 레이아웃 사이즈에 맞추기
            settings.loadWithOverviewMode = true
            settings.useWideViewPort = true

            // webView zoom 사용여부
            settings.builtInZoomControls = true
            settings.setSupportZoom(true)
        }

        binding.webView.loadUrl("http://www.naver.com/")
    }

    inner class MyWebChromeClient: WebChromeClient() {
        // 페이지가 로딩되는 시점 콜백
        override fun onProgressChanged(view: WebView?, newProgress: Int) {
            super.onProgressChanged(view, newProgress)

            binding.progressBar.progress = newProgress
        }
    }

    inner class MyWebViewClient: WebViewClient() {
        // 페이지가 로딩이 시작하는 시점 콜백
        override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
            super.onPageStarted(view, url, favicon)
        }

        // 페이지가 로딩이 끝나는 시점 콜백
        override fun onPageFinished(view: WebView?, url: String?) {
            super.onPageFinished(view, url)
        }

        // 페이지가 보여지는 시점 콜백
        override fun onPageCommitVisible(view: WebView?, url: String?) {
            super.onPageCommitVisible(view, url)
        }
    }

    private var backPressedTime = 0L
    override fun onBackPressed() {
        if (binding.webView.canGoBack()) { // webView 뒤로가기 체크
            binding.webView.goBack() // webView 뒤로가기
        } else {
            if (System.currentTimeMillis() - backPressedTime < 2000) {
                finish()
                return
            }

            Toast.makeText(this, "뒤로가기를 두번 눌러서 종료시켜주세요.", Toast.LENGTH_SHORT).show()
            backPressedTime = System.currentTimeMillis()
        }
    }
}

 

activity_main.kt

<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:gravity="center"
            android:text="WebView Example"
            android:textAllCaps="false"
            android:textSize="22sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:orientation="vertical">

            <ProgressBar
                android:id="@+id/progressBar"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:progressDrawable="@drawable/progress_bar" />

            <WebView
                android:id="@+id/webView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </LinearLayout>
    </LinearLayout>
</layout>

progress_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#FFFFFF" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <solid android:color="#009900" />
            </shape>
        </scale>
    </item>
</layer-list>