1昔逗、概述
??Long Long Ago，由于當(dāng)時(shí)技術(shù)有限至非，使用一些第三方庫(kù)才能勉強(qiáng)能夠?qū)崿F(xiàn)這個(gè)效果钠署，但是還是存在一些瑕疵，當(dāng)進(jìn)度很小的時(shí)候睡蟋，會(huì)有溢出的情況踏幻，導(dǎo)致進(jìn)度部分壓住了裝飾框，沒有體現(xiàn)出圓角戳杀，顯得非常丑陋该面。最近學(xué)習(xí)了clipPath方法，正好可以解決了這個(gè)問(wèn)題信卡。
GitHub:https://github.com/aositeluoke/ProgressView
2隔缀、繪制流程分析
2.1、繪制裝飾框
1傍菇、left=裝飾框畫筆寬度的一半
2猾瘸、top=裝飾框畫筆寬度的一半
3、right=控件寬度-裝飾框畫筆寬度的一半
4丢习、bottom=控件高度-裝飾框畫筆寬度的一半
5牵触、圓角半徑radius=裝飾框高度的一半
mProgressRect = new RectF(mDecoratorWidth + mProWidth / 2f,
mDecoratorWidth + mProWidth / 2f,
getMeasuredWidth() - mDecoratorWidth + mProWidth / 2f,
getMeasuredHeight() - mDecoratorWidth - mProWidth / 2f);
canvas.drawRoundRect(mDecoratorRect,
mDecoratorRect.height() / 2,
mDecoratorRect.height() / 2,
mDecoratorPaint);
2.2、繪制裁剪區(qū)和進(jìn)度區(qū)
1咐低、left=裝飾框畫筆寬度+進(jìn)度條畫筆寬度的一半
2揽思、top=裝飾框畫筆寬度+進(jìn)度條畫筆寬度的一半
3、right=控件寬度-裝飾框畫筆寬度-進(jìn)度條畫筆寬度的一半
4见擦、bottom=控件高度-裝飾框畫筆寬度-進(jìn)度條畫筆寬度的一半
5钉汗、圓角半徑radius=進(jìn)度區(qū)域高度的一半
/**
* 繪制裁剪區(qū)域和進(jìn)度區(qū)域
*
* @param canvas
*/
private void drawClipAreaAndProArea(Canvas canvas) {
canvas.save();
canvas.clipPath(mClipPath);
mProgressRect.right = mDecoratorWidth + mProWidth / 2f + (getMeasuredWidth() - mDecoratorWidth * 2f - mProWidth) * (mCurPro / mTotalPro);
canvas.drawRoundRect(mProgressRect, mProgressRect.height() / 2, mProgressRect.height() / 2, mProgressPaint);
canvas.restore();
}
2.3、繪制文本
1鲤屡、baseX=進(jìn)度條區(qū)域?qū)挾?裝飾區(qū)域畫筆寬度-文字區(qū)域的寬度-1
減10的目的是使文字與進(jìn)度條有一定的間距
2驼鹅、baseY=控件高度/2f+(fontMetrics.bottom-fontMetrics.top)-fontMetrics.bottom
3纽窟、fontMetrics的獲取方法
??獲取fontMetrics之前购对，需要對(duì)mTextPaint對(duì)象進(jìn)行初始化岂座、設(shè)置文字大小和顏色等。
fontMetrics = mTextPaint.getFontMetrics();
/**
* 繪制文字
*
* @param canvas
*/
private void drawText(Canvas canvas) {
BigDecimal percent = new BigDecimal(mCurPro * 100).divide(new BigDecimal(mTotalPro), 0, BigDecimal.ROUND_FLOOR);
String mTextStr = percent + "%";
mTextPaint.getTextBounds(mTextStr, 0, mTextStr.length(), mTextRect);
/*進(jìn)度條區(qū)域?qū)挾却笥谖谋緟^(qū)域?qū)挾炔趴衫L制*/
if (mProgressRect.width() > mTextRect.width() + 10) {
float max = mProgressRect.width() + mDecoratorWidth - 10;
baseX = max - mTextRect.width();
canvas.drawText(mTextStr, baseX, baseY, mTextPaint);
}
}
3役首、提供一些方法
public void setProgress(float curPro, float totalPro) {
this.mTotalPro = totalPro;
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(this, "mCurPro", 0, curPro);
objectAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
objectAnimator.setDuration(1000);
objectAnimator.start();
}
4尝丐、屬性說(shuō)明
| 屬性名 | 默認(rèn)值 | 備注 |
|---|---|---|
| decorator_width | 5 | 裝飾框?qū)挾?/td> |
| cur_pro | 0 | 當(dāng)前進(jìn)度 |
| total_pro | 0 | 總進(jìn)度 |
| pro_color | Color.RED | 進(jìn)度條顏色 |
| decorator_color | Color.BLACK | 裝飾框顏色 |
| text_color | Color.WHITE | 文本顏色 |
| text_size | 20 | 文字大小 |
5显拜、總結(jié)
??以前并不知道有clipPath這個(gè)方法，所以一直找不到解決方案爹袁，導(dǎo)致這樣的結(jié)果歸根結(jié)底還是因?yàn)榛A(chǔ)薄弱远荠、基礎(chǔ)不扎實(shí)和缺乏源碼閱讀能力。源碼閱讀確實(shí)很枯燥失息，但是里邊有很多值得我們學(xué)習(xí)的知識(shí)譬淳，和做人的道理是一模一樣的，我們要做到取其精華去其糟粕盹兢，為我所用即可邻梆。
