Android自定義webView頭部進(jìn)度加載效果
更新時間：2017年11月29日 15:03:46 作者：u013278099
這篇文章主要介紹了Android自定義webView頭部進(jìn)度加載效果,小編畫一條進(jìn)度線，然后加載webview上面，具體實現(xiàn)代碼大家參考下本文
不多說先來看下效果圖：
1. 顏色漸變加載進(jìn)度條（夜神模擬器）
綠色加載進(jìn)度條（魅藍(lán)note2）
看圖說話：
上圖是不是加載網(wǎng)頁的時候會有一個進(jìn)度條在橫向加載，比以前網(wǎng)速不好的時候是一片空白給人的感覺友好多了是不，然后效果還不錯。
實現(xiàn)思路
就是自己畫一條進(jìn)度線（大家應(yīng)該都會吧）然后加載到WebView的上面，開始進(jìn)度條是隱藏的，進(jìn)度線初始值為1，然后為了效果好一點，初始少于10的進(jìn)度都讓它加載到10的位置，等進(jìn)度到100的時候0.2秒后隱藏。
請記得添加網(wǎng)絡(luò)權(quá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@qq.com)
* 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);// 使用抖動效果
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){
this.progress = progress;
invalidate();//刷新畫筆
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawRect(0, 0, getWidth() * progress / 100, HEIGHT, paint);//畫矩形從（0.0）開始到（progress,height）的區(qū)域
}
}
上面代碼的功能就是畫一條線（顏色可漸變也可不變色），暴露設(shè)置進(jìn)度的方法給使用者，然后調(diào)用 invalidate()刷新進(jìn)度。
注意：使用漸變時數(shù)組的長度和透明度數(shù)組長度必須一致，否則會報錯的
步驟二：自定義封裝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@qq.com)
* 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);
//實例化進(jìn)度條
progressBar = new WebViewProgressBar(context);
//設(shè)置進(jìn)度條的size
progressBar.setLayoutParams(new ViewGroup.LayoutParams
(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
//剛開始時候進(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頁面
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)頁,如果沒有這個，在低分辨率的手機(jī)上顯示可能會異常
mSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
//提高網(wǎng)頁加載速度，暫時阻塞圖片加載，然后網(wǎng)頁加載好了，在進(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，這樣會顯得效果真一點，總不能從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;
}
/**
* 頁面加載過程中，加載資源回調(diào)的方法
*
* @param view
* @param url
*/
@Override
public void onLoadResource(WebView view, String url) {
super.onLoadResource(view, url);
}
/**
* 頁面加載完成回調(diào)的方法
*
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
// 關(guān)閉圖片加載阻塞
view.getSettings().setBlockNetworkImage(false);
}
/**
* 頁面開始加載調(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);
}
};
}
上面的代碼就是把進(jìn)度線加到webView里面，然后自定義WebChromeClient通過重寫onProgressChanged（）方法調(diào)用 progressBar.setProgress(newProgress)來更新進(jìn)度，進(jìn)度到100時再隱藏，是不是思路很清晰，其他的就是一些webView的設(shè)置和封裝這里都有清楚的注釋，自己去看。
使用ProgressWebView加載網(wǎng)頁
布局使用：
#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.java
package 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/");//加載網(wǎng)址
mWebView.setFocusable(true);//設(shè)置有焦點
mWebView.setFocusableInTouchMode(true);//設(shè)置可觸摸
}
}
總結(jié)
以上所述是小編給大家介紹的Android自定義webView頭部進(jìn)度加載效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Flutter 局部路由實現(xiàn)詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
項目需要研究了一下微信紅包動畫，即硬幣轉(zhuǎn)動的效果，原理其實就是三張不同角度的圖片利用AnimationDrawable幀動畫進(jìn)行播放。下面通過本文給大家分享Android仿微信紅包動畫效果，感興趣的朋友一起看看吧2017-12-12
Android自定義控件ViewGroup實現(xiàn)標(biāo)簽云
這篇文章主要為大家詳細(xì)介紹了Android自定義控件ViewGroup實現(xiàn)標(biāo)簽云，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
Android開發(fā)之開發(fā)者頭條(二)實現(xiàn)左滑菜單
本文給大家介紹Android開發(fā)之開發(fā)者頭條(二)實現(xiàn)左滑菜單，主要用android自帶的DrawerLayout控件實現(xiàn)的此功能，具體實現(xiàn)過程請參考下本文2016-04-04
這篇文章主要為大家詳細(xì)介紹了一款非常簡單酷炫的LoadingView動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要為大家詳細(xì)介紹了Android從圖片獲取二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
基于Android studio3.6的JNI教程之ncnn人臉檢測mtcnn功能
這篇文章主要介紹了基于Android studio3.6的JNI教程之ncnn之人臉檢測mtcnn功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
Android Dialog仿ios9中UIAlertController控件
這篇文章主要為大家詳細(xì)介紹了Android Dialog仿ios9中UIAlertController控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
android利用ContentResolver訪問者獲取手機(jī)聯(lián)系人信息
這篇文章主要介紹了android利用ContentResolver訪問者獲取手機(jī)聯(lián)系人信息，非常具有實用價值，需要的朋友可以參考下。2017-02-02
這篇文章主要給大家介紹了關(guān)于Flutter如何保證數(shù)據(jù)操作原子性的相關(guān)資料,文章通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03