当前位置：首页 > 行业动态 > 正文

Android自定义WebView头部进度加载效果如何实现？

admin
行业动态
2025-03-04
2

自定义WebView头部进度加载效果通过自定义WebViewClient和ProgressBar实现。

自定义WebView头部进度加载效果

在Android开发中，为了提升用户体验，特别是在网络加载不畅时，一个动态的加载进度条可以让用户感知到网页加载过程，而不是等待页面空白，下面将详细介绍如何实现自定义WebView头部的进度加载效果。

一、实现思路

1、自定义进度条组件：创建一个名为WebViewProgressBar的子类，继承自View，在这个类中设置进度条的高度为5dp，并定义一个Paint对象用于绘制进度，进度默认值设为1，表示加载开始。

2、颜色渐变：使用一个颜色数组colors[]，这里包含了两种颜色（绿色和未指定的颜色），用于创建进度条的渐变效果，在onDraw()方法中，根据当前的进度比例填充不同颜色的区域。

3、进度更新与显示：当WebView开始加载时，隐藏进度条并将其初始值设置为100%，这样可以立即显示加载开始，当进度变化时，实时更新progress变量，然后在onDraw()中相应地绘制新的进度条位置，当进度达到100%后，延迟0.2秒再隐藏进度条，以提供更好的视觉反馈。

4、网络权限：别忘了在AndroidManifest.xml中添加网络访问权限<uses-permission android:name="android.permission.INTERNET" />，这是使用WebView加载网页所必需的。

二、代码实现

1. WebViewProgressBar.java

package com.losileeya.materialprogresswebview.widget;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class WebViewProgressBar extends View {
    private int progress = 1;//进度默认为1
    private final static int HEIGHT = 5;//进度条高度为5
    private Paint paint;//进度条的画笔
    // 渐变颜色数组
    private final static int colors[] = new int[]{Color.GREEN, Color.parseColor("#8AC14A"), Color.parseColor("#35B056")}; //int类型颜色值格式：0x+透明值+颜色的rgb值
    public WebViewProgressBar(Context context) {
        this (context, null);
    }
    public WebViewProgressBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public WebViewProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint(context);
    }
    private void initPaint(Context context) {
        paint = new Paint(Paint.DITHER_FLAG);
        paint.setStyle(Paint.Style.STROKE);// 填充方式为描边
        paint.setStrokeWidth(HEIGHT);//设置画笔的宽度
        paint.setAntiAlias(true);// 抗锯齿
        paint.setDither(true);// 使用抖动效果
        paint.setColor(context.getResources().getColor(R.color.primary_light));//画笔设置颜色
    }
    /
      设置进度
      @param progress 进度值
     /
    public void setProgress(int progress){
        this.progress = progress;
        invalidate();//刷新画笔
    }
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRect(0, 0, getWidth()  progress / 100, HEIGHT, paint);//画矩形从（0.0）开始到（progress,height）的区域
    }
}

2. ProgressWebView.java

package com.losileeya.materialprogresswebview.widget;
import android.content.Context;
import android.graphics.Bitmap;
import android.os.Handler;
import android.util.AttributeSet;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class ProgressWebView extends WebView {
    private WebViewProgressBar progressBar;//进度条
    private Context context;
    public ProgressWebView(Context context) {
        this(context, null);
    }
    public ProgressWebView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ProgressWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init();
    }
    private void init() {
        progressBar = new WebViewProgressBar(context);
        LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT, dp2px(context, 4));
        progressBar.setLayoutParams(layoutParams);
        progressBar.setColor(Color.BLUE);
        progressBar.setProgress(10);
        addView(progressBar);
        initWebSettings();
        setWebChromeClient(new MyWebChromeClient());
        setWebViewClient(new MyWebViewClient());
    }
    private class MyWebChromeClient extends WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        progressBar.setVisibility(GONE);
                    }
                }, 200);
            } else {
                if (progressBar.getVisibility() == GONE)
                    progressBar.setVisibility(VISIBLE);
                progressBar.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }
    }
}

三、布局文件（res/layout/activity_main.xml）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.losileeya.materialprogresswebview.widget.ProgressWebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>