Android

>

WebViewにWEBページが読み込まれるまで白い画面が表示されるのを回避

WebViewを使用する WEBアプリ開発においてWebViewにWEBページが読み込まれ表示される前に画面が白くなるのを回避する対策をしてみた。
といっても読み込むWEBページの内容や通信状況、デバイスのスペック等によっては僅かだが一瞬画面が白くなった後、ウェブページが表示される。
気にならないレベルではあるが完全な回避策とは言い難いのが現状だが例を下記に示す。(Kotlin)

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    
    // ↓ 必須
    <uses-permission android:name="android.permission.INTERNET" />
    
    ⌇
    ⌇
    ⌇
    ⌇

</manifest

インターフェースの作成

interface MyWebViewClientCallback {
    /**
     * ページ表示直前ハンドル
     *
     *
     * Webページの表示直前に行う処理
     *
     */
    fun onPageCommitVisibleHandle()
}

WEBページが表示できる状態になったことを知らせるクラスを作成

import android.webkit.WebView
import android.webkit.WebViewClient

class MyWebViewClient
/**
 * コンストラクタ
 * @param callback コールバック
 */(
    /**
     * コールバック
     */
    private val callback: MyWebViewClientCallback,
) : WebViewClient() {
    /**
     * ページ表示直前
     * @param view WebView
     * @param url URL
     */
    override fun onPageCommitVisible(view: WebView, url: String) {
        super.onPageCommitVisible(view, url)
        // Webページ表示直前
        callback.onPageCommitVisibleHandle()
    }
}

Layoutファイル

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

    <ProgressBar
        android:id="@+id/myProgressbar"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_weight="1" />

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="fill"
        android:visibility="gone"/>

</LinearLayout>

Activity側

import android.webkit.WebViewClient
import androidx.activity.OnBackPressedCallback

class MainActivity : AppCompatActivity(), MyWebViewClientCallback {

    private lateinit var binding: ActivitySubBinding
    
    @SuppressLint("SetJavaScriptEnabled", "LongLogTag")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        
        binding.webView.settings.javaScriptEnabled = true
        binding.webView.webViewClient = WebViewClient()
        val webUrl = "https://webrydays.net"
        binding.webView.loadUrl(webUrl)
        
    }
    
    override fun onPageCommitVisibleHandle() {
        
        // プログレスバー非表示
        binding.myProgressbar.visibility = View.GONE
        
        // WebView表示
        binding.webView.setVisibility(View.VISIBLE)
    }
}

流れとしてはWebViewをvisibility=”gone”としておきプログレスバーを表示させておく。
WEBページが表示できるようになったらプログレスバーを非表示、WebViewを表示、WEBページが表示されるといった具合。