【Kotlin】ローディング中にProgressBarを表示するWebViewの実装

# 環境
* macOS: 10.14.1
* Android Studio: 3.4
* kotlin: 1.3.21
* Support Library: AndroidX

※Data Bindingを使ったサンプルになります。

# 手順
## インターネット接続の許可

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

## レイアウトを組む
WebViewの上にProgressBarを乗せておく。

```xml
<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <WebView
            android:id="@+id/web_view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

        <ProgressBar
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:visibility="visible"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>
```

プレビューで見るとこんな感じ。
<img width="400" alt="スクリーンショット 2019-06-02 21.21.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/6105652f-dcd9-2aaf-153e-0d3d5fcaab0a.png">

## ロードする
ただロードをするだけなら下記でOK。

```kotlin
val url = "https://www.google.com/"
binding.webView.loadUrl(url)
```

今回はProgressBarを表示させたいので`WebViewClient`の設定をする。
ローディング開始時に呼ばれる`onPageStarted()`メソッドと終了時に呼ばれる`onPageFinished()`メソッドを使ってProgressBarを出し分ける。


```kotlin
binding.webView.webViewClient = object: WebViewClient() {

    // ローディング開始時に呼ばれる
    override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
        super.onPageStarted(view, url, favicon)
        // ProgressBarの表示
        binding.progress.visibility = View.VISIBLE
    }

    // ローディング終了時に呼ばれる
    override fun onPageFinished(view: WebView?, url: String?) {
        super.onPageFinished(view, url)
        // ProgressBarの非表示
        binding.progress.visibility = View.GONE
    }
}

val url = "https://www.google.com/"
binding.webView.loadUrl(url)
```

## おまけ
存在しないテキトーなURLをwebViewに渡すと……

```kotlin
val url = "https://www.gooaaaaaagle.com/?hl=jaaaaaaaaaaaaaaa"
binding.webView.loadUrl(url)
```
↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/112818/9fc6125f-88e8-734d-3cde-95ec0e1f17a4.png" width="320"/>
ドロイド君がちょこんと出る可愛いページが表示されます:relaxed:

# 参考
*  [Android公式サイト - WebViewClient](https://developer.android.com/reference/kotlin/android/webkit/WebViewClient) 
* [【Android】WebView使用時の設定とTipsまとめ - forus TECH](http://yusukekuni.hatenablog.com/entry/2013/04/11/134758)
* [How to load an URL inside a WebView using Android Kotlin? - Stack Overflow](https://stackoverflow.com/questions/47872078/how-to-load-an-url-inside-a-webview-using-android-kotlin)