Android进阶之路 - WebView以进度条方式进行加载

移动端混合开发的时候，最常见的就是通过WebView内嵌一些静态的H5的页面，为了优化用户体验，我们增添了顶部的加载进度条~

纪念(写于2017-10-26的提要)：项目中多多少少会用一些H5页面进行展示，之前我也写过一些常规的，但是感觉没有进度条形式的加载好看，所以在网上找了一个，具体的地址忘了，但是从项目中又扣了出来，好看点，在我认为在于ProgressBar的颜色可自己设置，仅此而已

我那些关于WebView的回忆 ~ 包含入门使用、优化加载样式、监听加载状态、各场景后退键处理、俩端交互流程、header、user-agent传值、交互常见问题、较全API整合

Effect

加入权限

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

ProgressBar的背景样式（放在drawable文件夹下）

• progress_bar.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">
        <shape>
            <corners android:radius="2dp" />
            <gradient
                android:angle="270"
                android:centerColor="#E3E3E3"
                android:endColor="#E6E6E6"
                android:startColor="#C8C8C8" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <gradient
                    android:centerColor="#999999"
                    android:endColor="#999999"
                    android:startColor="#999999" />
            </shape>
        </clip>
    </item>

</layer-list>

MainActivity

package com.bakheet.effect.webprogressbar;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends Activity {

    private ProgressBar mBar;
    private WebView mWeb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBar = (ProgressBar) findViewById(R.id.progress_Bar);
        mWeb = (WebView) findViewById(R.id.web);

        mWeb.loadUrl("http://blog.csdn.net/qq_20451879/article/details/54316824");

        mWeb.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

        mWeb.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                if (newProgress == 100) {
                    mBar.setVisibility(View.GONE);
                } else {
                    mBar.setVisibility(View.VISIBLE);
                    mBar.setProgress(newProgress);
                }
            }
        });
    }
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.bakheet.effect.webprogressbar.MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:text="Web进度条"
        android:gravity="center"
        android:background="#2FCA8F"
        android:textColor="#fff"
        />

    <ProgressBar
        android:id="@+id/progress_Bar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="3dp"
        android:progressDrawable="@drawable/progress_bar"
        android:visibility="gone" />

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

</LinearLayout>