不多說先來看下效果圖：
1. 顏色漸變加載進度條（夜神模擬器）
綠色加載進度條（魅藍note2）
看圖說話：
上圖是不是加載網頁的時候會有一個進度條在橫向加載，比以前網速不好的時候是一片空白給人的感覺友好多了是不，然后效果還不錯。
實現思路
就是自己畫一條進度線（大家應該都會吧）然后加載到WebView的上面，開始進度條是隱藏的，進度線初始值為1，然后為了效果好一點，初始少于10的進度都讓它加載到10的位置，等進度到100的時候0.2秒后隱藏。
請記得添加網絡權限：
<uses-permission android/138434.html">android:name="android.permission.INTERNET" />
說多了都是淚 ，快吃晚飯了，直接代碼說話：
代碼講解
步驟一：我們先來話進度線
#WebViewProgressBar.javapackage com.losileeya.materialprogresswebview.widget;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;import com.losileeya.materialprogresswebview.R;/** * User: Losileeya (847457332@qq.com) * Date: 2016-04-24 * Time: 14:43 * 類描述：自定義進度條 * * @version : */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[]{0xFF7AD237, 0xFF8AC14A, 0x35B056 }; //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) { //顏色漸變從colors[0]到colors[2],透明度從0到1// LinearGradient shader = new LinearGradient(// 0, 0,// 100, HEIGHT,// colors,// new float[]{0 , 0.5f, 1.0f},// Shader.TileMode.MIRROR); 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));//畫筆設置顏色// paint.setShader(shader);//畫筆設置漸變 } /** * 設置進度 * @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）的區域 }}上面代碼的功能就是畫一條線（顏色可漸變也可不變色），暴露設置進度的方法給使用者，然后調用 invalidate()刷新進度。
注意：使用漸變時數組的長度和透明度數組長度必須一致，否則會報錯的
步驟二：自定義封裝webView
#ProgressWebView.javapackage com.losileeya.materialprogresswebview.widget;import android.content.Context;import android.graphics.Bitmap;import android.os.Handler;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;/** * User: Losileeya (847457332@qq.com) * Date: 2016-04-24 * Time: 14:42 * 類描述：自定義帶進度加載條的webView * * @version : */public class ProgressWebView extends WebView { private WebViewProgressBar progressBar;//進度條的矩形（進度線） private Handler handler; private WebView mWebView; public ProgressWebView(Context context, AttributeSet attrs) { super(context, attrs); //實例化進度條 progressBar = new WebViewProgressBar(context); //設置進度條的size progressBar.setLayoutParams(new ViewGroup.LayoutParams (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); //剛開始時候進度條不可見 progressBar.setVisibility(GONE); //把進度條添加到webView里面 addView(progressBar); //初始化handle handler = new Handler(); mWebView = this; initSettings(); } private void initSettings() { // 初始化設置 WebSettings mSettings = this.getSettings(); mSettings.setJavaScriptEnabled(true);//開啟javascript mSettings.setDomStorageEnabled(true);//開啟DOM mSettings.setDefaultTextEncodingName("utf-8");//設置字符編碼 //設置web頁面 mSettings.setAllowFileAccess(true);//設置支持文件流 mSettings.setSupportZoom(true);// 支持縮放 mSettings.setBuiltInZoomControls(true);// 支持縮放 mSettings.setUseWideViewPort(true);// 調整到適合webview大小 mSettings.setLoadWithOverviewMode(true);// 調整到適合webview大小 mSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR);// 屏幕自適應網頁,如果沒有這個，在低分辨率的手機上顯示可能會異常 mSettings.setRenderPriority(WebSettings.RenderPriority.HIGH); //提高網頁加載速度，暫時阻塞圖片加載，然后網頁加載好了，在進行加載圖片 mSettings.setBlockNetworkImage(true); mSettings.setAppCacheEnabled(true);//開啟緩存機制 setWebViewClient(new MyWebClient()); setWebChromeClient(new MyWebChromeClient()); } /** * 自定義WebChromeClient */ private class MyWebChromeClient extends WebChromeClient { /** * 進度改變的回掉 * * @param view WebView * @param newProgress 新進度 */ @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress == 100) { progressBar.setProgress(100); handler.postDelayed(runnable, 200);//0.2秒后隱藏進度條 } else if (progressBar.getVisibility() == GONE) { progressBar.setVisibility(VISIBLE); } //設置初始進度10，這樣會顯得效果真一點，總不能從1開始吧 if (newProgress < 10) { newProgress = 10; } //不斷更新進度 progressBar.setProgress(newProgress); super.onProgressChanged(view, newProgress); } } private class MyWebClient extends WebViewClient { /** * 加載過程中 攔截加載的地址url * * @param view * @param url 被攔截的url * @return */ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { mWebView.loadUrl(url); return true; } /** * 頁面加載過程中，加載資源回調的方法 * * @param view * @param url */ @Override public void onLoadResource(WebView view, String url) { super.onLoadResource(view, url); } /** * 頁面加載完成回調的方法 * * @param view * @param url */ @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); // 關閉圖片加載阻塞 view.getSettings().setBlockNetworkImage(false); } /** * 頁面開始加載調用的方法 * * @param view * @param url * @param favicon */ @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { super.onPageStarted(view, url, favicon); } @Override public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) { super.onReceivedError(view, errorCode, description, failingUrl); } @Override public void onScaleChanged(WebView view, float oldScale, float newScale) { super.onScaleChanged(view, oldScale, newScale); ProgressWebView.this.requestFocus(); ProgressWebView.this.requestFocusFromTouch(); } } /** *刷新界面（此處為加載完成后進度消失） */ private Runnable runnable = new Runnable() { @Override public void run() { progressBar.setVisibility(View.GONE); } };}上面的代碼就是把進度線加到webView里面，然后自定義WebChromeClient通過重寫onProgressChanged（）方法調用 progressBar.setProgress(newProgress)來更新進度，進度到100時再隱藏，是不是思路很清晰，其他的就是一些webView的設置和封裝這里都有清楚的注釋，自己去看。
使用ProgressWebView加載網頁
布局使用：
#activity_main.xml<?xml version="1.0" encoding="utf-8"?><com.losileeya.materialprogresswebview.widget.ProgressWebView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"></com.losileeya.materialprogresswebview.widget.ProgressWebView>
布局看起來是不是很清爽，對了，要的就是之效果：
實際使用也很簡單：
#MainActivity.javapackage com.losileeya.materialprogresswebview;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import com.losileeya.materialprogresswebview.widget.ProgressWebView;public class MainActivity extends AppCompatActivity { //ProgressWebView private ProgressWebView mWebView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (ProgressWebView) findViewById(R.id.webView);//findViewById webView mWebView.loadUrl("http://blog.csdn.net/u013278099/");//加載網址 mWebView.setFocusable(true);//設置有焦點 mWebView.setFocusableInTouchMode(true);//設置可觸摸 }}總結
以上所述是小編給大家介紹的Android自定義webView頭部進度加載效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！
新聞熱點
疑難解答
