【移動應用開發(fā)技術】Android如何實現自定義webView頭部進度加載效果

【移動應用開發(fā)技術】Android如何實現自定義webView頭部進度加載效果

1.顏色漸變加載進度條（夜神模擬器）

/upload/information/20200623/125/125356.gif

/upload/information/20200623/125/125357.gif實現思路

<uses-permission

android:name="android.permission.INTERNET"

/>代碼講解步驟一：我們先來話進度線#WebViewProgressBar.java

package

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@)

*

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){

gress

=

progress;

invalidate();//刷新畫筆

}

@Override

protected

void

onDraw(Canvas

canvas)

{

canvas.drawRect(0,

0,

getWidth()

*

progress

/

100,

HEIGHT,

paint);//畫矩形從（0.0）開始到（progress,height）的區(qū)域

}

}步驟二：自定義封裝webView#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.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@)

*

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);

}

};

}使用ProgressWebView加載網頁#activity_main.xml

<?xml

version="1.0"

encoding="utf-8"?>

<com.losileeya.materialprogresswebview.widget.ProgressWebView

xmlns:android="/apk/res/android"

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="match_pa