溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關Android自定義View實現圓形加載進度條效果的方法，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
View仿華為圓形加載進度條效果圖
實現思路
可以看出該View可分為三個部分來實現
最外圍的圓，該部分需要區分進度圓和底部的刻度圓，進度部分的刻度需要和底色刻度區分開來
中間顯示的文字進度，需要讓文字在View中居中顯示
旋轉的小圓點，小圓點需要模擬小球下落運動時的加速度效果，開始下落的時候慢，到最底部時最快，上來時速度再逐漸減慢
具體實現
先具體細分講解，博客最后面給出全部源碼
（1）首先為View創建自定義的xml屬性
在工程的values目錄下新建attrs.xml文件
<resources> <!-- 仿華為圓形加載進度條 --> <declare-styleable name="CircleLoading"> <attr name="indexColor" format="color"/> <attr name="baseColor" format="color"/> <attr name="dotColor" format="color"/> <attr name="textSize" format="dimension"/> <attr name="textColor" format="color"/> </declare-styleable> </resources>
各個屬性的作用：
indexColor：進度圓的顏色
baseColor：刻度圓底色
dotColor：小圓點顏色
textSize：文字大小
textColor：文字顏色
（2）新建CircleLoadingView類繼承View類，重寫它的三個構造方法，獲取用戶設置的屬性，同時指定默認值
public CircleLoadingView(Context context) {
this(context, null);
}
public CircleLoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 獲取用戶配置屬性
TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
tya.recycle();
initUI();
}我們從View繪制的第一步開始
（3）測量onMeasure，首先需要測量出View的寬和高，并指定View在wrap_content時的最小范圍，對于View繪制流程還不熟悉的同學，可以先去了解下具體的繪制流程
淺談Android View繪制三大流程探索及常見問題
重寫onMeasure方法，其中我們要考慮當View的寬高被指定為wrap_content時的情況，如果我們不對wrap_content的情況進行處理，那么當使用者指定View的寬高為wrap_content時將無法正常顯示出View
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
// 獲取寬
if (myWidthSpecMode == MeasureSpec.EXACTLY) {
// match_parent/精確值
mWidth = myWidthSpecSize;
} else {
// wrap_content
mWidth = DensityUtil.dip2px(mContext, 120);
}
// 獲取高
if (myHeightSpecMode == MeasureSpec.EXACTLY) {
// match_parent/精確值
mHeight = myHeightSpecSize;
} else {
// wrap_content
mHeight = DensityUtil.dip2px(mContext, 120);
}
// 設置該view的寬高
setMeasuredDimension(mWidth, mHeight);
}MeasureSpec的狀態分為三種EXACTLY、AT_MOST、UNSPECIFIED，這里只要單獨指定非精確值EXACTLY之外的情況就好了。
本文中使用到的DensityUtil類，是為了將dp轉換為px來使用，以便適配不同的屏幕顯示效果
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}（4）重寫onDraw，繪制需要顯示的內容
因為做的是單純的View而不是ViewGroup，內部沒有子控件需要確定位置，所以可直接跳過onLayout方法，直接開始對View進行繪制
分為三個部分繪制，繪制刻度圓，繪制文字值，繪制旋轉小圓點
@Override
protected void onDraw(Canvas canvas) {
drawArcScale(canvas);
drawTextValue(canvas);
drawRotateDot(canvas);
}繪制刻度圓
先畫一個小豎線，通過canvas.rotate()方法每次旋轉3.6度（總共360度，用100/360=3.6）得到一個刻度為100的圓，然后通過progress參數，得到要顯示的進度數，并把小于progress的刻度變成進度圓的顏色
/**
* 畫刻度
*/
private void drawArcScale(Canvas canvas) {
canvas.save();
for (int i = 0; i < 100; i++) {
if (progress > i) {
mScalePaint.setColor(indexColor);
} else {
mScalePaint.setColor(baseColor);
}
canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
// 旋轉的度數 = 100 / 360
canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
}
canvas.restore();
}繪制中間文字
文字繪制的坐標是以文字的左下角開始繪制的，所以需要先通過把文字裝載到一個矩形Rect，通過畫筆的getTextBounds方法取得字符串的長度和寬度，通過動態計算，來使文字居中顯示
/**
* 畫內部數值
*/
private void drawTextValue(Canvas canvas) {
canvas.save();
String showValue = String.valueOf(progress);
Rect textBound = new Rect();
mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound); // 獲取文字的矩形范圍
float textWidth = textBound.right - textBound.left; // 獲得文字寬
float textHeight = textBound.bottom - textBound.top; // 獲得文字高
canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);
canvas.restore();
}繪制旋轉小圓點
這個小圓點就是簡單的繪制一個填充的圓形就好
/**
* 畫旋轉小圓點
*/
private void drawRotateDot(final Canvas canvas) {
canvas.save();
canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);
canvas.restore();
}讓它自己動起來可以通過兩種方式，一種是開一個線程，在線程中改變mDotProgress的數值，并通過postInvalidate方法跨線程刷新View的顯示效果
new Thread() {
@Override
public void run() {
while (true) {
mDotProgress++;
if (mDotProgress == 100) {
mDotProgress = 0;
}
postInvalidate();
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}.start();開線程的方式不推薦使用，這是沒必要的開銷，而且線程不好控制，要實現讓小圓點在運行過程中開始和結束時慢，運動到中間時加快這種效果不好實現，所以最好的方式是使用屬性動畫，需要讓小圓點動起來時，調用以下方法就好了
/**
* 啟動小圓點旋轉動畫
*/
public void startDotAnimator() {
animator = ValueAnimator.ofFloat(0, 100);
animator.setDuration(1500);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 設置小圓點的進度，并通知界面重繪
mDotProgress = (Float) animation.getAnimatedValue();
invalidate();
}
});
animator.start();
}在屬性動畫中可以通過setInterpolator方法指定不同的插值器，這里要模擬小球掉下來的重力效果，所以需要使用AccelerateDecelerateInterpolator插值類，該類的效果就是在動畫開始時和結束時變慢，中間加快
（5）設置當前進度值
對外提供一個方法，用來更新當前圓的進度
/**
* 設置進度
*/
public void setProgress(int progress) {
this.progress = progress;
invalidate();
}通過外部調用setProgress方法就可以跟更新當前圓的進度了
源碼
/**
* 仿華為圓形加載進度條
* Created by zhuwentao on 2017-08-19.
*/
public class CircleLoadingView extends View {
private Context mContext;
// 刻度畫筆
private Paint mScalePaint;
// 小原點畫筆
private Paint mDotPaint;
// 文字畫筆
private Paint mTextPaint;
// 當前進度
private int progress = 0;
/**
* 小圓點的當前進度
*/
public float mDotProgress;
// View寬
private int mWidth;
// View高
private int mHeight;
private int indexColor;
private int baseColor;
private int dotColor;
private int textSize;
private int textColor;
private ValueAnimator animator;
public CircleLoadingView(Context context) {
this(context, null);
}
public CircleLoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 獲取用戶配置屬性
TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
tya.recycle();
initUI();
}
private void initUI() {
mContext = getContext();
// 刻度畫筆
mScalePaint = new Paint();
mScalePaint.setAntiAlias(true);
mScalePaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
mScalePaint.setStrokeCap(Paint.Cap.ROUND);
mScalePaint.setColor(baseColor);
mScalePaint.setStyle(Paint.Style.STROKE);
// 小圓點畫筆
mDotPaint = new Paint();
mDotPaint.setAntiAlias(true);
mDotPaint.setColor(dotColor);
mDotPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
mDotPaint.setStyle(Paint.Style.FILL);
// 文字畫筆
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(textColor);
mTextPaint.setTextSize(textSize);
mTextPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
mTextPaint.setStyle(Paint.Style.FILL);
}
@Override
protected void onDraw(Canvas canvas) {
drawArcScale(canvas);
drawTextValue(canvas);
drawRotateDot(canvas);
}
/**
* 畫刻度
*/
private void drawArcScale(Canvas canvas) {
canvas.save();
for (int i = 0; i < 100; i++) {
if (progress > i) {
mScalePaint.setColor(indexColor);
} else {
mScalePaint.setColor(baseColor);
}
canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
// 旋轉的度數 = 100 / 360
canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
}
canvas.restore();
}
/**
* 畫內部數值
*/
private void drawTextValue(Canvas canvas) {
canvas.save();
String showValue = String.valueOf(progress);
Rect textBound = new Rect();
mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound); // 獲取文字的矩形范圍
float textWidth = textBound.right - textBound.left; // 獲得文字寬
float textHeight = textBound.bottom - textBound.top; // 獲得文字高
canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);
canvas.restore();
}
/**
* 畫旋轉小圓點
*/
private void drawRotateDot(final Canvas canvas) {
canvas.save();
canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);
canvas.restore();
}
/**
* 啟動小圓點旋轉動畫
*/
public void startDotAnimator() {
animator = ValueAnimator.ofFloat(0, 100);
animator.setDuration(1500);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.setRepeatMode(ValueAnimator.RESTART);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 設置小圓點的進度，并通知界面重繪
mDotProgress = (Float) animation.getAnimatedValue();
invalidate();
}
});
animator.start();
}
/**
* 設置進度
*/
public void setProgress(int progress) {
this.progress = progress;
invalidate();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
// 獲取寬
if (myWidthSpecMode == MeasureSpec.EXACTLY) {
// match_parent/精確值
mWidth = myWidthSpecSize;
} else {
// wrap_content
mWidth = DensityUtil.dip2px(mContext, 120);
}
// 獲取高
if (myHeightSpecMode == MeasureSpec.EXACTLY) {
// match_parent/精確值
mHeight = myHeightSpecSize;
} else {
// wrap_content
mHeight = DensityUtil.dip2px(mContext, 120);
}
// 設置該view的寬高
setMeasuredDimension(mWidth, mHeight);
}
}在的onDraw方法中需要避免頻繁的new對象，所以把一些如初始化畫筆Paint的方法放到了最前面的構造方法中進行。
在分多個模塊繪制時，應該使用canvas.save()和canvas.restore()的組合，來避免不同模塊繪制時的相互干擾，在這兩個方法中繪制相當于PS中的圖層概念，上一個圖層進行的修改不會影響到下一個圖層的顯示效果。
在需要顯示動畫效果的地方使用屬性動畫來處理，可自定義的效果強，在系統提供的插值器類不夠用的情況下，我么還可通過繼承Animation類，重寫它的applyTransformation方法來處理各種復雜的動畫效果。
關于Android自定義View實現圓形加載進度條效果的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
