Android 編寫一個帶進度條的Webview

今天是4月1號，大家愚人節快樂~清明節放假咯！清明節放假咯！清明節放假咯！重要的事情說三遍，祝大家玩得愉快！

言歸正傳，用Webview載入一個網頁時，如果載入時間長，介面會一直空白，體驗不太好，所以加個進度條更好看一下，主流APP也都有進度條效果，先上效果圖：

完整程式碼地址已上傳Github：帶進度條的Webview

之前看到一篇博文：Android WebView頂部進度條，作者直接用的ProgressBar方式實現的，但不知是程式碼有問題，還是我的使用姿勢不對，一進來載入進度條就直接到100％了，有知道問題出在哪裡的還請不吝賜教，在下面評論裡指出來，感謝！

回到正題，看這個效果也不難，就想直接用自定義View寫一個出來，ProgressView .java用來實現進度條效果：

public class ProgressView extends View {
    private Paint mPaint;
    private int mWidth, mHeight;
    private int progress;//載入進度

    public ProgressView(Context context) {
        this(context, null);
    }

    public ProgressView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ProgressView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        //初始化畫筆
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(10);
        mPaint.setColor(Color.RED);
    }

    @Override
    protected void onSizeChanged(int w, int h, int ow, int oh) {
        mWidth = w;
        mHeight = h;
        super.onSizeChanged(w, h, ow, oh);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawRect(0, 0, mWidth * progress / 100, mHeight, mPaint);
        super.onDraw(canvas);
    }

    /**
     * 設定新進度 重新繪製
     *
     * @param newProgress 新進度
     */
    public void setProgress(int newProgress) {
        this.progress = newProgress;
        invalidate();
    }

    /**
     * 設定進度條顏色
     *
     * @param color 色值
     */
    public void setColor(int color) {
        mPaint.setColor(color);
    }
}
複製程式碼

然後在Webview中使用，Webview的父類是 AbsoluteLayout，所以可以通過addView()的方式將我們自定義的進度條加進去，程式碼如下：

public class Html5Webview extends WebView {
    private ProgressView progressView;//進度條
    private Context context;

    public Html5Webview(Context context) {
        this(context, null);
    }

    public Html5Webview(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public Html5Webview(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        init();
    }

    private void init() {
        //初始化進度條
        progressView = new ProgressView(context);
        progressView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, dp2px(context, 4)));
        progressView.setColor(Color.BLUE);
        progressView.setProgress(10);
        //把進度條加到Webview中
        addView(progressView);
        //初始化設定
        initWebSettings();
        setWebChromeClient(new MyWebCromeClient());
        setWebViewClient(new MyWebviewClient());
    }

    private class MyWebCromeClient extends WebChromeClient {
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            if (newProgress == 100) {
                //載入完畢進度條消失
                progressView.setVisibility(View.GONE);
            } else {
                //更新進度
                progressView.setProgress(newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }
    }

    /**
     * dp轉換成px
     *
     * @param context Context
     * @param dp      dp
     * @return px值
     */
    private int dp2px(Context context, float dp) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

}
複製程式碼

主要是通過MyWebCromeClient 的onProgressChanged方法裡面的進度值呼叫progressView.setProgress()方法去更新進度條，當載入100%的時候讓進度條消失。恩，一個帶載入進度條的WebView 就實現了！如果需要其他進度條效果，可以按需擴充套件~

最後再貼一下程式碼地址：帶進度條的Webview