先不說實現功能,上圖看看效果
這個是續上一次水平變色進度條的有一個全新的控件,理論實現原理
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")
@Override
protected 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 .