Android 實(shí)現(xiàn)自定義圓形進(jìn)度條的功能

2019-12-12 04:38:08

字體：大中小

供稿：網(wǎng)友

Android 實(shí)現(xiàn)自定義圓形進(jìn)度條：

Android 自定義view,在大多數(shù)項(xiàng)目中根據(jù)客戶需求及用戶的體驗(yàn)度來(lái)說(shuō)，都要重新寫(xiě)控件的來(lái)展示漂亮的界面，這里就對(duì)圓形進(jìn)度條說(shuō)下如何實(shí)現(xiàn)。

繪制自定義的圓形進(jìn)度條，分為三個(gè)步驟，內(nèi)圓、外圓、文字。

其中內(nèi)圓和文字比較好繪制，進(jìn)度條的變化是由外圓來(lái)控制的，所以核心就是繪制外圓。

首先定義分別定義這三個(gè)畫(huà)筆，兩個(gè)Paint和一個(gè)TextPaint

mCirclePaint = new Paint();mCirclePaint.setAntiAlias(true);mCirclePaint.setStrokeWidth(CIRCLE_LINE_WIDTH);mCirclePaint.setStyle(Paint.Style.STROKE);mCirclePaint.setColor(ContextCompat.getColor(context, R.color.circle_color));mCircleInnerPaint = new Paint();mCircleInnerPaint.setAntiAlias(true);mCircleInnerPaint.setStyle(Paint.Style.FILL);mCircleInnerPaint.setColor(ContextCompat.getColor(context, R.color.circle_inner_color));mTextPaint = new TextPaint();mTextPaint.setAntiAlias(true);mTextPaint.setStyle(Paint.Style.FILL);mTextPaint.setTypeface(Typeface.DEFAULT_BOLD);mTextPaint.setColor(ContextCompat.getColor(context, R.color.circle_text_color));mTextPaint.setTextSize(TEXT_SIZE);

然后讓我們分別繪制出這三個(gè)部分獲取自定義View的寬和高

float halfWidth = getMeasuredWidth() / 2;
float halfHeight = getMeasuredHeight() / 2;

繪制外圓

canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);

繪制內(nèi)圓

canvas.drawCircle(halfWidth, halfHeight,CIRCLE_RADIUS - CIRCLE_LINE_WIDTH / 2，mCircleInnerPaint);

繪制文字

canvas.drawText(mProgressText,halfWidth - mTextPaint.measureText(mProgressText) / 2,halfHeight - (mTextPaint.ascent() + mTextPaint.descent()) / 2,mTextPaint);

最后的效果如下圖

繪制完了基本的圖案，下一步就是實(shí)現(xiàn)進(jìn)度條的動(dòng)畫(huà)效果

進(jìn)度條是實(shí)時(shí)變化的，所以需要不斷的去更新進(jìn)度，進(jìn)度可以用圓弧開(kāi)繪制

設(shè)置進(jìn)度的方法

public void setProgress(float progress) { if (progress > 100) {  progress = 100; } if (progress < 0) {  progress = 0; } mProgress = progress; mProgressText = "Pause"; mStartProgress = true; postInvalidate();}

在Activity中開(kāi)一個(gè)線程模擬網(wǎng)絡(luò)請(qǐng)求后更新進(jìn)度條的操作

沒(méi)30毫秒更新一次數(shù)據(jù)，當(dāng)進(jìn)度超過(guò)100，停止刷新界面

private void startProgress() { new Thread() { @Override public void run() {  super.run();  float currentProgress = mCustomView.getCurrentProgress();  ++currentProgress;  mCustomView.setProgress(currentProgress);  try {   sleep(30);   if (currentProgress <= 100) {    startProgress();   } else {    mCustomView.progressFinished();   }  } catch (InterruptedException e) {    e.printStackTrace();  } } }.start();}

最核心的部分，進(jìn)度更新后更新繪制圓形進(jìn)度條

float halfWidth = getMeasuredWidth() / 2;float halfHeight = getMeasuredHeight() / 2;if (null == mCircleRectF) {  mCircleRectF = new RectF(halfWidth - CIRCLE_RADIUS, halfHeight - CIRCLE_RADIUS,      halfWidth + CIRCLE_RADIUS, halfHeight + CIRCLE_RADIUS);}if (mStartProgress) {  float swipeProgress = mProgress / 100f * 360;  LogUtils.e("swipeProgress = " + swipeProgress);  canvas.drawArc(mCircleRectF, -90, swipeProgress, true, mCirclePaint);} else {  canvas.drawCircle(halfWidth, halfHeight, CIRCLE_RADIUS,mCirclePaint);}

繪制的思路就是把progress進(jìn)度轉(zhuǎn)換為圓弧的弧度，然后不斷繪制出來(lái)，這里要注意，從-90開(kāi)始，也就是時(shí)鐘的0點(diǎn)時(shí)刻開(kāi)始繪制。如果進(jìn)度已經(jīng)繪制完成，或者還沒(méi)有開(kāi)始，則直接繪制一個(gè)圓形。

大概思路就是這樣，最后上兩張效果圖