Android 自訂圓圈進度並顯示百分比例控制項（純程式碼實現）

標籤：控制項   android   

首先，感謝公司能給我閑暇的時間，來穩固我的技術，讓我不斷的去探索研究，在此不勝感激。
先不說實現功能，看看效果
這個是續上一次水平變色進度條的有一個全新的控制項，理論實現原理
1.分析控制項：該控制項基本上是圓圈內嵌圓圈；

2.進度計算：其實是小學二年級數學題：當前進度/總數=百分比；

3.中間時間：呵呵，純粹忽悠，不解釋（目前時間）。

理論總是和實踐差距的太遠，不扯淡，不吹噓，貼代碼：

package com.spring.progressview;import java.text.SimpleDateFormat;import java.util.Date;import android.annotation.SuppressLint;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.Align;import android.graphics.Paint.Style;import android.graphics.Rect;import android.graphics.RectF;import android.util.AttributeSet;import android.view.View;/**** * 圓圈進度控制項 * @author spring sky * Email:[email protected] * ：http://download.csdn.net/detail/vipa1888/7637905 */public class RoundProgressView extends View {/**最外圍的顏色值*/private int mOutRoundColor = Color.argb(60, 255, 255, 255);/**中心圓的顏色值*/private int mCenterRoundColor = Color.argb(255, 255, 255, 255);/**進度的顏色*/private int mProgressRoundColor = Color.argb(255, 255, 255, 255);/**進度的背景顏色*/private int mProgressRoundBgColor = Color.argb(100, 255, 255, 255);/**進度條的寬度*/private int mProgressWidth = 5;private int[] colors = {Color.WHITE,Color.RED};/***字型顏色*/private int mTextColor = Color.rgb(118, 181, 66);private float mPencentTextSize = 65;private int mWidth,mHeight;private int mPaddingX;private float mProgress = 0.5f;private float mMax = 1.0f;/** * 時間顯示格式 */private SimpleDateFormat mDateFormat = new SimpleDateFormat("HH:mm:ss.S");private Paint mPaint = new Paint();public RoundProgressView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}public RoundProgressView(Context context, AttributeSet attrs) {super(context, attrs);init();}public RoundProgressView(Context context) {super(context);init();}public void init(){}@SuppressLint("DrawAllocation")@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);mWidth = getWidth();mHeight = getHeight();if(mWidth > mHeight){mPaddingX = (mWidth-mHeight)/2;mWidth = mHeight;}mPaint.setAntiAlias(true); // 消除鋸齒mPaint.setStyle(Style.FILL);mPaint.setColor(mOutRoundColor);RectF oval = new RectF(new Rect(mPaddingX, 0, mWidth+mPaddingX, mHeight));canvas.drawArc(oval, 0, 360, true, mPaint);int halfWidth = mWidth/6;mPaint.setColor(mProgressRoundBgColor);mPaint.setStrokeWidth(mProgressWidth);mPaint.setStyle(Style.STROKE);oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*5+mPaddingX, halfWidth*5));canvas.drawArc(oval, 0, 360, false, mPaint);mPaint.setColor(mProgressRoundColor);canvas.drawArc(oval, 90, 360*mProgress/mMax, false, mPaint);halfWidth = mWidth/4;mPaint.setStyle(Style.FILL);mPaint.setColor(mCenterRoundColor);oval = new RectF(new Rect(halfWidth+mPaddingX, halfWidth, halfWidth*3+mPaddingX, halfWidth*3));canvas.drawArc(oval, 0, 360, false, mPaint);mPaint.reset();mPaint.setTextSize(mPencentTextSize);mPaint.setColor(mTextColor);mPaint.setStyle(Style.FILL);mPaint.setTextAlign(Align.CENTER);String number = (int)(mProgress*100/mMax)+"";canvas.drawText(number, mWidth/2+mPaddingX, mHeight/2+mPencentTextSize/3, mPaint);float textWidth = mPaint.measureText(number);mPaint.setTextSize(mPencentTextSize/2);canvas.drawText("%", mWidth/2+mPaddingX+textWidth/2+5, mHeight/2-mPencentTextSize/8, mPaint);mPaint.setTextSize(mPencentTextSize/2);canvas.drawText(mDateFormat.format(new Date(System.currentTimeMillis())), mWidth/2+mPaddingX, mHeight/2+halfWidth/4*3, mPaint);}public void setMax(float mMax) {this.mMax = mMax;}public void setProgress(float mProgress) {this.mProgress = mProgress;invalidate();}public float getMax() {return mMax;}public float getProgress() {return mProgress;}}

雖然只有短短不到200行代碼，但是，裡面的有些基本函數，我還是得簡單的說明
1.  Color.argb(60, 255, 255, 255);   這個是來得到一個顏色，並且設定他的透明度，第一個參數就是透明度，0~255之間，其他的RGB，呵呵，不解釋，自己搞。
2. 下面的兩個方法，是畫筆的方法，很重要

mPaint.setStyle(Style.STROKE); //這個是原來顯示空心的東西

mPaint.setStrokeWidth(mProgressWidth);   //這個是空心最外層的寬度
比如：drawArc 是畫一個圓，那麼，我們的設定了以上兩個方法，就是要畫一個空心圓，圓的軌跡寬度就是  mProgressWidth
3.畫圓的時候，開始度數和結束度數一定要控制好哦。
4.如果您還有什麼不懂的，請多瞭解：Canvas 和Paint的相關方法和API，在此不勝感激。


寫這篇部落格的目的為了分享，我也希望能給你們提供一些思路，希望大家把不錯的控制項都共用出來，不勝感激。

好了，部落格貼出去，肯定有很多人要Demo，為了防止蜘蛛亂抓取而丟失，地址請看代碼上的註明點。
轉載請註明作者來源：Spring sky .