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ページが表示されるといった具合。