【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android如何實(shí)現(xiàn)自定義webView頭部進(jìn)度加載效果

【移動(dòng)應(yīng)用開發(fā)技術(shù)】Android如何實(shí)現(xiàn)自定義webView頭部進(jìn)度加載效果

1.顏色漸變加載進(jìn)度條（夜神模擬器）

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

/upload/information/20200623/125/125357.gif實(shí)現(xiàn)思路

<uses-permission

android:name="android.permission.INTERNET"

/>代碼講解步驟一：我們先來話進(jìn)度線#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

*

類描述：自定義進(jìn)度條

*

*

@version

:

*/

public

class

WebViewProgressBar

extends

View

{

private

int

progress

=

1;//進(jìn)度默認(rèn)為1

private

final

static

int

HEIGHT

=

5;//進(jìn)度條高度為5

private

Paint

paint;//進(jìn)度條的畫筆

//

漸變顏色數(shù)組

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);//設(shè)置畫筆的寬度

paint.setAntiAlias(true);//

抗鋸齒

paint.setDither(true);//

使用抖動(dòng)效果

paint.setColor(context.getResources().getColor(R.color.primary_light));//畫筆設(shè)置顏色

//

paint.setShader(shader);//畫筆設(shè)置漸變

}

/**

*

設(shè)置進(jìn)度

*

@param

progress

進(jìn)度值

*/

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

*

類描述：自定義帶進(jìn)度加載條的webView

*

*

@version

:

*/

public

class

ProgressWebView

extends

WebView

{

private

WebViewProgressBar

progressBar;//進(jìn)度條的矩形（進(jìn)度線）

private

Handler

handler;

private

WebView

mWebView;

public

ProgressWebView(Context

context,

AttributeSet

attrs)

{

super(context,

attrs);

//實(shí)例化進(jìn)度條

progressBar

=

new

WebViewProgressBar(context);

//設(shè)置進(jìn)度條的size

progressBar.setLayoutParams(new

ViewGroup.LayoutParams

(ViewGroup.LayoutParams.MATCH_PARENT,

ViewGroup.LayoutParams.WRAP_CONTENT));

//剛開始時(shí)候進(jìn)度條不可見

progressBar.setVisibility(GONE);

//把進(jìn)度條添加到webView里面

addView(progressBar);

//初始化handle

handler

=

new

Handler();

mWebView

=

this;

initSettings();

}

private

void

initSettings()

{

//

初始化設(shè)置

WebSettings

mSettings

=

this.getSettings();

mSettings.setJavaScriptEnabled(true);//開啟javascript

mSettings.setDomStorageEnabled(true);//開啟DOM

mSettings.setDefaultTextEncodingName("utf-8");//設(shè)置字符編碼

//設(shè)置web頁(yè)面

mSettings.setAllowFileAccess(true);//設(shè)置支持文件流

mSettings.setSupportZoom(true);//

支持縮放

mSettings.setBuiltInZoomControls(true);//

支持縮放

mSettings.setUseWideViewPort(true);//

調(diào)整到適合webview大小

mSettings.setLoadWithOverviewMode(true);//

調(diào)整到適合webview大小

mSettings.setDefaultZoom(WebSettings.ZoomDensity.FAR);//

屏幕自適應(yīng)網(wǎng)頁(yè),如果沒有這個(gè)，在低分辨率的手機(jī)上顯示可能會(huì)異常

mSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);

//提高網(wǎng)頁(yè)加載速度，暫時(shí)阻塞圖片加載，然后網(wǎng)頁(yè)加載好了，在進(jìn)行加載圖片

mSettings.setBlockNetworkImage(true);

mSettings.setAppCacheEnabled(true);//開啟緩存機(jī)制

setWebViewClient(new

MyWebClient());

setWebChromeClient(new

MyWebChromeClient());

}

/**

*

自定義WebChromeClient

*/

private

class

MyWebChromeClient

extends

WebChromeClient

{

/**

*

進(jìn)度改變的回掉

*

*

@param

view

WebView

*

@param

newProgress

新進(jìn)度

*/

@Override

public

void

onProgressChanged(WebView

view,

int

newProgress)

{

if

(newProgress

==

100)

{

progressBar.setProgress(100);

handler.postDelayed(runnable,

200);//0.2秒后隱藏進(jìn)度條

}

else

if

(progressBar.getVisibility()

==

GONE)

{

progressBar.setVisibility(VISIBLE);

}

//設(shè)置初始進(jìn)度10，這樣會(huì)顯得效果真一點(diǎn)，總不能從1開始吧

if

(newProgress

<

10)

{

newProgress

=

10;

}

//不斷更新進(jìn)度

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;

}

/**

*

頁(yè)面加載過程中，加載資源回調(diào)的方法

*

*

@param

view

*

@param

url

*/

@Override

public

void

onLoadResource(WebView

view,

String

url)

{

super.onLoadResource(view,

url);

}

/**

*

頁(yè)面加載完成回調(diào)的方法

*

*

@param

view

*

@param

url

*/

@Override

public

void

onPageFinished(WebView

view,

String

url)

{

super.onPageFinished(view,

url);

//

關(guān)閉圖片加載阻塞

view.getSettings().setBlockNetworkImage(false);

}

/**

*

頁(yè)面開始加載調(diào)用的方法

*

*

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

}

}

/**

*刷新界面（此處為加載完成后進(jìn)度消失）

*/

private

Runnable

runnable

=

new

Runnable()

{

@Override

public

void

run()

{

progressBar.setVisibility(View.GONE);

}

};

}使用ProgressWebView加載網(wǎng)頁(yè)#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