Android自定義View之圓形進度條總結
最近擼了一個圓形進度條的開源項目，算是***次完完整整的使用自定義 View 。在此對項目開發(fā)思路做個小結，歡迎大家 Star 和 Fork。
該項目總共實現(xiàn)了三種圓形進度條效果
- CircleProgress：圓形進度條，可以實現(xiàn)仿 QQ 健康計步器的效果，支持配置進度條背景色、寬度、起始角度，支持進度條漸變
- DialProgress：類似 CircleProgress，但是支持刻度
- WaveProgress：實現(xiàn)了水波紋效果的圓形進度條，不支持漸變和起始角度配置，如需此功能可參考 CircleProgress 自行實現(xiàn)。
先上效果圖，有圖才好說。
CircleProgress 效果圖
DialProgress 和 WaveProgress 效果圖
恩，那么接下來，就來講講怎么實現(xiàn)以上自定義進度條的效果。
圓形進度條
圓形進度條是***個實現(xiàn)的進度條效果，用了我大半天的時間，實現(xiàn)起來并不復雜。
其思路主要可以分為以下幾步：
- View 的測量
- 計算繪制 View 所需參數(shù)
- 圓弧的繪制及漸變的實現(xiàn)
- 文字的繪制
- 動畫效果的實現(xiàn)
首先，我們要測量出所繪制 View 的大小，即重寫 onMeasure() 方法，代碼如下：
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- super.onMeasure(widthMeasureSpec, heightMeasureSpec);
- setMeasuredDimension(MiscUtil.measure(widthMeasureSpec, mDefaultSize),
- MiscUtil.measure(heightMeasureSpec, mDefaultSize));
- }
由于其他兩個進度條類都需要實現(xiàn) View 的測量，這里對代碼進行了封裝：
- /**
- * 測量 View
- *
- * @param measureSpec
- * @param defaultSize View 的默認大小
- * @return 測量出來的 View 大小
- */
- public static int measure(int measureSpec, int defaultSize) {
- int result = defaultSize;
- int specMode = View.MeasureSpec.getMode(measureSpec);
- int specSize = View.MeasureSpec.getSize(measureSpec);
- if (specMode == View.MeasureSpec.EXACTLY) {
- result = specSize;
- } else if (specMode == View.MeasureSpec.AT_MOST) {
- result = Math.min(result, specSize);
- }
- return result;
- }
關于 View 測量可以看下這篇博客 Android 自定義View 中的onMeasure的用法
接下來，在 onSizeChanged() 中計算繪制圓及文字所需的參數(shù)，考慮到屏幕旋轉的情況，故未直接在 onMeasure() 方法中直接計算。這里以下面草圖來講解繪制計算過程中的注意事項，圖丑，勿怪~
圖中，外面藍色矩形為 View，里面黑色矩形為圓的外接矩形，藍色矩形和黑色矩形中間空白的地方為 View 的內邊距(padding)。兩個藍色的圓其實是一個圓，代表圓的粗細，這是因為 Android 在繪制圓或者圓弧的時候是圓的邊寬的中心與外接矩形相交，所以在計算的時候要考慮到內邊距(padding) 和 圓與外接矩形的相交。
默認不考慮圓弧的寬度，繪制出來的效果如下：
- @Override
- protected void onSizeChanged(int w, int h, int oldw, int oldh) {
- super.onSizeChanged(w, h, oldw, oldh);
- Log.d(TAG, "onSizeChanged: w = " + w + "; h = " + h + "; oldw = " + oldw + "; oldh = " + oldh);
- //求圓弧和背景圓弧的***寬度
- float maxArcWidth = Math.max(mArcWidth, mBgArcWidth);
- //求最小值作為實際值
- int minSize = Math.min(w - getPaddingLeft() - getPaddingRight() - 2 * (int) maxArcWidth,
- h - getPaddingTop() - getPaddingBottom() - 2 * (int) maxArcWidth);
- //減去圓弧的寬度，否則會造成部分圓弧繪制在外圍
- mRadius = minSize / 2;
- //獲取圓的相關參數(shù)
- mCenterPoint.x = w / 2;
- mCenterPoint.y = h / 2;
- //繪制圓弧的邊界
- mRectF.left = mCenterPoint.x - mRadius - maxArcWidth / 2;
- mRectF.top = mCenterPoint.y - mRadius - maxArcWidth / 2;
- mRectF.right = mCenterPoint.x + mRadius + maxArcWidth / 2;
- mRectF.bottom = mCenterPoint.y + mRadius + maxArcWidth / 2;
- //計算文字繪制時的 baseline
- //由于文字的baseline、descent、ascent等屬性只與textSize和typeface有關，所以此時可以直接計算
- //若value、hint、unit由同一個畫筆繪制或者需要動態(tài)設置文字的大小，則需要在每次更新后再次計算
- mValueOffset = mCenterPoint.y - (mValuePaint.descent() + mValuePaint.ascent()) / 2;
- mHintOffset = mCenterPoint.y * 2 / 3 - (mHintPaint.descent() + mHintPaint.ascent()) / 2;
- mUnitOffset = mCenterPoint.y * 4 / 3 - (mUnitPaint.descent() + mUnitPaint.ascent()) / 2;
- updateArcPaint();
- Log.d(TAG, "onSizeChanged: 控件大小 = " + "(" + w + ", " + h + ")"
- + "圓心坐標 = " + mCenterPoint.toString()
- + ";圓半徑 = " + mRadius
- + ";圓的外接矩形 = " + mRectF.toString());
關于 Android 中文字繪制可以參考以下兩篇文章：
1. Android 自定義View學習(三)——Paint 繪制文字屬性
2. measureText() vs .getTextBounds()
以上，已經基本完成了 View 繪制所需全部參數(shù)的計算。接下來就是繪制圓弧及文字了。
繪制圓弧需要用到 Canvas 的
- // oval 為 RectF 類型，即圓弧顯示區(qū)域
- // startAngle 和 sweepAngle 均為 float 類型，分別表示圓弧起始角度和圓弧度數(shù)。3點鐘方向為0度，順時針遞增
- // 如果 startAngle < 0 或者 > 360,則相當于 startAngle % 360
- // useCenter:如果為 true 時，在繪制圓弧時將圓心包括在內，通常用來繪制扇形
- // 繪制圓弧的畫筆
- drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint);
為了方便計算，繪制圓弧的時候使用了 Canvas 的 rotate() 方法，對坐標系進行了旋轉
- private void drawArc(Canvas canvas) {
- // 繪制背景圓弧
- // 從進度圓弧結束的地方開始重新繪制，優(yōu)化性能
- canvas.save();
- float currentAngle = mSweepAngle * mPercent;
- canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y);
- // +2 是因為繪制的時候出現(xiàn)了圓弧起點有尾巴的問題
- canvas.drawArc(mRectF, currentAngle, mSweepAngle - currentAngle + 2, false, mBgArcPaint);
- canvas.drawArc(mRectF, 2, currentAngle, false, mArcPaint);
- canvas.restore();
- }
恩，圓環(huán)已經繪制完成，那么接下來就是實現(xiàn)圓環(huán)的漸變，這里使用 SweepGradient 類。SweepGradient 可以實現(xiàn)從中心放射性漸變的效果，如下圖：
SweepGradient 類有兩個構造方法，
- /**
- * @param cx 渲染中心點x坐標
- * @param cy 渲染中心點y坐標
- * @param colors 圍繞中心渲染的顏色數(shù)組，至少要有兩種顏色值
- * @param positions 相對位置的顏色數(shù)組,可為null, 若為null,可為null,顏色沿漸變線均勻分布。一般不需要設置該參數(shù)
- /
- public SweepGradient(float cx, float cy, int[] colors, float[] positions)
- /**
- * @param cx 渲染中心點x坐標
- * @param cy 渲染中心點y坐標
- * @param color0 起始渲染顏色
- * @param color1 結束渲染顏色
- /
- public SweepGradient(float cx, float cy, int color0, int color1)
這里我們選擇***個構造方法。由于設置漸變需要每次都創(chuàng)建一個新的 SweepGradient 對象，所以***不要放到 onDraw 方法中去更新，***在初始化的時候就設置好，避免頻繁創(chuàng)建導致內存抖動。
- private void updateArcPaint() {
- // 設置漸變
- int[] mGradientColors = {Color.GREEN, Color.YELLOW, Color.RED};
- mSweepGradient = new SweepGradient(mCenterPoint.x, mCenterPoint.y, mGradientColors, null);
- mArcPaint.setShader(mSweepGradient);
- }
這里還有一個值得注意的地方，草圖如下
假設，漸變顏色如下：
- int[] mGradientColors = {Color.GREEN, Color.YELLOW, Color.RED, Color.BLUE};
因為 SweepGradient 漸變是 360 度的，所以如果你繪制的圓弧只有 270度，則藍色部分(圖中黑色陰影部分)的漸變就會不可見。
接下來，就是文字的繪制了。文字繪制在上述提到的文章中已經進行了詳細的講解，這里就不再贅述。代碼如下：
- private void drawText(Canvas canvas) {
- canvas.drawText(String.format(mPrecisionFormat, mValue), mCenterPoint.x, mValueOffset, mValuePaint);
- if (mHint != null) {
- canvas.drawText(mHint.toString(), mCenterPoint.x, mHintOffset, mHintPaint);
- }
- if (mUnit != null) {
- canvas.drawText(mUnit.toString(), mCenterPoint.x, mUnitOffset, mUnitPaint);
- }
- }
***，我們來實現(xiàn)進度條的動畫效果。這里我們使用 Android 的屬性動畫來實現(xiàn)進度更新。
- private void startAnimator(float start, float end, long animTime) {
- mAnimator = ValueAnimator.ofFloat(start, end);
- mAnimator.setDuration(animTime);
- mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
- @Override
- public void onAnimationUpdate(ValueAnimator animation) {
- mPercent = (float) animation.getAnimatedValue();
- mValue = mPercent * mMaxValue;
- if (BuildConfig.DEBUG) {
- Log.d(TAG, "onAnimationUpdate: percent = " + mPercent
- + ";currentAngle = " + (mSweepAngle * mPercent)
- + ";value = " + mValue);
- }
- invalidate();
- }
- });
- mAnimator.start();
- }
這里有兩個注意點：
1. 不要在 ValueAnimator.AnimatorUpdateListener 中輸出 Log，特別是動畫調用頻繁的情況下，因為輸出 Log 頻繁會生成大量 String 對象造成內存抖動，當然也可以使用 StringBuilder 來優(yōu)化。
2. 關于 invalidate() 和 postInvalidate() 兩者最本質的前者只能在 UI 線程中使用，而后者可以在非 UI 線程中使用，其實 postInvalidate() 內部也是使用 Handler 實現(xiàn)的。
關于 Android 屬性動畫可以參考：
1. Android 屬性動畫(Property Animation) 完全解析 (上)
2. Android 屬性動畫(Property Animation) 完全解析 (下)
補充：同一個屬性如何支持顏色和顏色數(shù)組
考慮到圓弧設置單色和漸變的區(qū)別，即單色只需要提供一種色值，而漸變至少需要提供兩種色值?？梢杂幸韵聨追N解決方案：
- 定義兩個屬性，漸變的優(yōu)先級高于單色的。
- 定義一個 format 為 string 屬性，以 #FFFFFF|#000000 形式提供色值
- 定義一個 format 為 color|reference 的屬性，其中 reference 屬性指代漸變色的數(shù)組。
這里選用第三種方案，實現(xiàn)如下：
- <!-- 圓形進度條 -->
- <declare-styleable name="CircleProgressBar">
- <!-- 圓弧顏色， -->
- <attr name="arcColors" format="color|reference" />
- </declare-styleable>
- <!-- colors.xml -->
- <color name="green">#00FF00</color>
- <color name="blue">#EE9A00</color>
- <color name="red">#EE0000</color>
- <!-- 漸變顏色數(shù)組 -->
- <integer-array name="gradient_arc_color">
- <item>@color/green</item>
- <item>@color/blue</item>
- <item>@color/red</item>
- </integer-array>
- <!-- 布局文件中使用 -->
- <!-- 使用漸變 -->
- <com.littlejie.circleprogress.DialProgress
- android:id="@+id/dial_progress_bar"
- android:layout_width="300dp"
- android:layout_height="300dp"
- app:arcColors="@array/gradient_arc_color" />
- <!-- 使用單色 -->
- <com.littlejie.circleprogress.DialProgress
- android:id="@+id/dial_progress_bar"
- android:layout_width="300dp"
- android:layout_height="300dp"
- app:arcColors="@color/green" />
代碼中讀取 xml 中配置：
- int gradientArcColors = typedArray.getResourceId(R.styleable.CircleProgressBar_arcColors, 0);
- if (gradientArcColors != 0) {
- try {
- int[] gradientColors = getResources().getIntArray(gradientArcColors);
- if (gradientColors.length == 0) {//如果漸變色為數(shù)組為0，則嘗試以單色讀取色值
- int color = getResources().getColor(gradientArcColors);
- mGradientColors = new int[2];
- mGradientColors[0] = color;
- mGradientColors[1] = color;
- } else if (gradientColors.length == 1) {//如果漸變數(shù)組只有一種顏色，默認設為兩種相同顏色
- mGradientColors = new int[2];
- mGradientColors[0] = gradientColors[0];
- mGradientColors[1] = gradientColors[0];
- } else {
- mGradientColors = gradientColors;
- }
- } catch (Resources.NotFoundException e) {
- throw new Resources.NotFoundException("the give resource not found.");
- }
- }
帶刻度進度條
前面，詳細講了 CircleProgress 的繪制思路，接下來講 DialProgress。
實話說，DialProgress 與 CircleProgress 的實現(xiàn)極其相似，因為兩者之間其實就差了一個刻度，但考慮到擴展以及類職責的單一，所以將兩者分開。
這里主要講一下刻度的繪制。刻度繪制主要使用 Canvas 類的 save()、rotate()和restore() 方法，當然你也可以使用 translate() 方法對坐標系進行平移，方便計算。
- /**
- * 用來保存Canvas的狀態(tài)。save之后，可以調用Canvas的平移、放縮、旋轉、錯切、裁剪等操作。
- */
- public void save()
- /**
- * 旋轉一定的角度繪制圖像
- * @param degrees 旋轉角度
- * @param x 旋轉中心點x軸坐標
- * @param y 旋轉中心點y軸坐標
- */
- public void rotate(float degrees, float x, float y)
- /**
- * 在當前的坐標上平移(x,y)個像素單位
- * 若dx <0 ，沿x軸向上平移； dx >0 沿x軸向下平移
- * 若dy <0 ，沿y軸向上平移； dy >0 沿y軸向下平移
- */
- public void translate(float dx, float dy)
- /**
- * 用來恢復Canvas之前保存的狀態(tài)。防止save后對Canvas執(zhí)行的操作對后續(xù)的繪制有影響。
- */
- public void restore()
- private void drawDial(Canvas canvas) {
- int total = (int) (mSweepAngle / mDialIntervalDegree);
- canvas.save();
- canvas.rotate(mStartAngle, mCenterPoint.x, mCenterPoint.y);
- for (int i = 0; i <= total; i++) {
- canvas.drawLine(mCenterPoint.x + mRadius, mCenterPoint.y, mCenterPoint.x + mRadius + mArcWidth, mCenterPoint.y, mDialPaint);
- canvas.rotate(mDialIntervalDegree, mCenterPoint.x, mCenterPoint.y);
- }
- canvas.restore();
- }
關于 Canvas 的畫布操作可以參考這篇文章：安卓自定義View進階-Canvas之畫布操作
水波紋效果的進度條
水波紋效果的進度條實現(xiàn)需要用到貝塞爾曲線，主要難點在于 繪制區(qū)域的計算 和 波浪效果 的實現(xiàn)，其余的邏輯跟上述兩種進度條相似。
這里使用了 Path 類，該類在 Android 2D 繪圖中是非常重要的，Path 不僅能夠繪制簡單圖形，也可以繪制這些比較復雜的圖形。也可以對多個路徑進行布爾操作，類似設置 Paint 的 setXfermode() ，具體使用可以參考這篇博客：安卓自定義View進階-Path基本操作。這里就不再贅述，有機會自己也會對 Android 自定義 View 的知識進行總結，不過，感覺應該了了無期。
繼續(xù)上示意圖，請叫我靈魂畫手~
圖中黑色的圓為我們要繪制的進度條圓，黑色的曲線為初始狀態(tài)的的波浪，該波浪使用貝塞爾曲線繪制，其中奇數(shù)的點為貝塞爾曲線的起始點，偶數(shù)的點為貝塞爾曲線的控制點。例如：1——>2——>3就為一條貝塞爾曲線，1 是起點，2 是控制點，3 是終點。從圖中可以看到波浪在園內圓外各一個(1—>5 和 5->9)，通過對波浪在 x 軸上做平移，即圖中藍色實線，來實現(xiàn)波浪的動態(tài)效果，所以一個波浪的完整動畫效果需要有兩個波浪來實現(xiàn)。同理，通過控制 y 軸的偏移量，即圖中藍色虛線，可以實現(xiàn)波浪隨進度的上漲下降。
貝塞爾曲線上起始點和控制點的計算如下：
- /**
- * 計算貝塞爾曲線上的起始點和控制點
- * @param waveWidth 一個完整波浪的寬度
- */
- private Point[] getPoint(float waveWidth) {
- Point[] points = new Point[mAllPointCount];
- //第1個點特殊處理，即數(shù)組的中心
- points[mHalfPointCount] = new Point((int) (mCenterPoint.x - mRadius), mCenterPoint.y);
- //屏幕內的貝塞爾曲線點
- for (int i = mHalfPointCount + 1; i < mAllPointCount; i += 4) {
- float width = points[mHalfPointCount].x + waveWidth * (i / 4 - mWaveNum);
- points[i] = new Point((int) (waveWidth / 4 + width), (int) (mCenterPoint.y - mWaveHeight));
- points[i + 1] = new Point((int) (waveWidth / 2 + width), mCenterPoint.y);
- points[i + 2] = new Point((int) (waveWidth * 3 / 4 + width), (int) (mCenterPoint.y + mWaveHeight));
- points[i + 3] = new Point((int) (waveWidth + width), mCenterPoint.y);
- }
- //屏幕外的貝塞爾曲線點
- for (int i = 0; i < mHalfPointCount; i++) {
- int reverse = mAllPointCount - i - 1;
- points[i] = new Point(points[mHalfPointCount].x - points[reverse].x,
- points[mHalfPointCount].y * 2 - points[reverse].y);
- }
- return points;
- }
以上，我們已經獲取到繪制貝塞爾曲線所需的路徑點。接下來，我們就需要來計算出繪制區(qū)域，即使用 Path 類。
紫色區(qū)域為貝塞爾曲線需要繪制的整體區(qū)域。
紅色區(qū)域為上圖紫色區(qū)域與圓的交集，也就是波浪要顯示的區(qū)域
代碼如下：
- //該方法必須在 Android 19以上的版本才能使用(Path.op())
- @TargetApi(Build.VERSION_CODES.KITKAT)
- private void drawWave(Canvas canvas, Paint paint, Point[] points, float waveOffset) {
- mWaveLimitPath.reset();
- mWavePath.reset();
- //lockWave 用于判斷波浪是否隨進度條上漲下降
- float height = lockWave ? 0 : mRadius - 2 * mRadius * mPercent;
- //moveTo和lineTo繪制出水波區(qū)域矩形
- mWavePath.moveTo(points[0].x + waveOffset, points[0].y + height);
- for (int i = 1; i < mAllPointCount; i += 2) {
- mWavePath.quadTo(points[i].x + waveOffset, points[i].y + height,
- points[i + 1].x + waveOffset, points[i + 1].y + height);
- }
- mWavePath.lineTo(points[mAllPointCount - 1].x, points[mAllPointCount - 1].y + height);
- //不管如何移動，波浪與圓路徑的交集底部永遠固定，否則會造成上移的時候底部為空的情況
- mWavePath.lineTo(points[mAllPointCount - 1].x, mCenterPoint.y + mRadius);
- mWavePath.lineTo(points[0].x, mCenterPoint.y + mRadius);
- mWavePath.close();
- mWaveLimitPath.addCircle(mCenterPoint.x, mCenterPoint.y, mRadius, Path.Direction.CW);
- //取該圓與波浪路徑的交集，形成波浪在圓內的效果
- mWaveLimitPath.op(mWavePath, Path.Op.INTERSECT);
- canvas.drawPath(mWaveLimitPath, paint);
以上，就實現(xiàn)了水波動態(tài)的效果，當然，你也可以通過配置，來設定水波是否隨進度上漲下降。為了實現(xiàn)更好的效果，可以設置一個淺色的水波并支持設置水波的走向(R2L 和 L2R)，通過設置淺色波浪和深色波浪動畫的時間，從而實現(xiàn)長江后浪推前浪的效果，恩，效果很自然的~自己腦補從右至左波浪的實現(xiàn)和貝塞爾點的計算。
對獲取坐標點的代碼進行優(yōu)化：
- /**
- * 從左往右或者從右往左獲取貝塞爾點
- *
- * @return
- */
- private Point[] getPoint(boolean isR2L, float waveWidth) {
- Point[] points = new Point[mAllPointCount];
- //第1個點特殊處理，即數(shù)組的中點
- points[mHalfPointCount] = new Point((int) (mCenterPoint.x + (isR2L ? mRadius : -mRadius)), mCenterPoint.y);
- //屏幕內的貝塞爾曲線點
- for (int i = mHalfPointCount + 1; i < mAllPointCount; i += 4) {
- float width = points[mHalfPointCount].x + waveWidth * (i / 4 - mWaveNum);
- points[i] = new Point((int) (waveWidth / 4 + width), (int) (mCenterPoint.y - mWaveHeight));
- points[i + 1] = new Point((int) (waveWidth / 2 + width), mCenterPoint.y);
- points[i + 2] = new Point((int) (waveWidth * 3 / 4 + width), (int) (mCenterPoint.y + mWaveHeight));
- points[i + 3] = new Point((int) (waveWidth + width), mCenterPoint.y);
- }
- //屏幕外的貝塞爾曲線點
- for (int i = 0; i < mHalfPointCount; i++) {
- int reverse = mAllPointCount - i - 1;
- points[i] = new Point((isR2L ? 2 : 1) * points[mHalfPointCount].x - points[reverse].x,
- points[mHalfPointCount].y * 2 - points[reverse].y);
- }
- //對從右向左的貝塞爾點數(shù)組反序，方便后續(xù)處理
- return isR2L ? MiscUtil.reverse(points) : points;
- }
至此，自定義圓形進度條相關的思路已全部講述完成。代碼已全部上傳至 Git ，歡迎大家 Star 和 Fork，傳送門：CircleProgress。
https://github.com/MyLifeMyTravel/CircleProgress
