Android WebView加载网页、html文件显示加载进度

一、视图绑定

通过视图绑定功能，您可以更轻松地编写可与视图交互的代码。在模块中启用视图绑定之后，系统会为该模块中的每个 XML 布局文件生成一个绑定类。绑定类的实例包含对在相应布局中具有 ID 的所有视图的直接引用。

在大多数情况下，视图绑定会替代 findViewById。

视图绑定功能可按模块启用。要在某个模块中启用视图绑定，请将 viewBinding 元素添加到其 build.gradle 文件中，如下例所示：

    viewBinding {
        enabled = true
    }

二、新建加载WebViewActivity

新建WebViewActivity加载网页html文件

class WebViewActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

页面xml文件activity_web_view如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@null"
        android:indeterminateOnly="false"
        android:max="100"
        app:layout_constraintTop_toTopOf="parent"
        android:progressDrawable="@drawable/progress_bar_horizontal"/>

</androidx.constraintlayout.widget.ConstraintLayout>

进度条progress_bar_horizontal.xml样式如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@color/white"/>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="270"
                    android:centerColor="#00923F"
                    android:centerY="0.75"
                    android:endColor="#888C98"
                    android:startColor="#00923F" />
            </shape>
        </clip>
    </item>

</layer-list>

三、在 Activity 中使用视图绑定

在 Activity 的 onCreate() 方法中执行以下步骤：

1、调用生成的绑定类中包含的静态 inflate() 方法。此操作会创建该绑定类的实例以供 Activity 使用。
2、通过调用 getRoot() 方法或使用 Kotlin 属性语法获取对根视图的引用。
3、将根视图传递到 setContentView()，使其成为屏幕上的活动视图。

class WebViewActivity : AppCompatActivity() {
    private lateinit var mViewBinding: ActivityWebViewBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mViewBinding = ActivityWebViewBinding.inflate(layoutInflater)

        setContentView(mViewBinding.root)
        
    }
}

四、设置WebView

class WebViewActivity : AppCompatActivity() {
    private lateinit var mViewBinding: ActivityWebViewBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mViewBinding = ActivityWebViewBinding.inflate(layoutInflater)

        setContentView(mViewBinding.root)

        val webSettings = mViewBinding.webView.settings
        webSettings.javaScriptEnabled = true
        webSettings.domStorageEnabled = true //支持webView从localStorage中读取数据

        mViewBinding.webView.webChromeClient = object : WebChromeClient() {  // 设置加载进度
            override fun onProgressChanged(view: WebView?, newProgress: Int) {
                mViewBinding.progressBar.progress = newProgress
                if (newProgress == 100) {
                    mViewBinding.progressBar.visibility = View.GONE
                } else {
                    mViewBinding.progressBar.visibility = View.VISIBLE
                }
                super.onProgressChanged(view, newProgress)

            }
        }

        mViewBinding.webView.loadUrl("https://www.baidu.com");
    }
}

清单文件中添加网络权限

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

运行就可以看到加载进度条了