廢話不多說,先上效果圖
在下載的時候藍色的邊會跟着下載的進度以前變化
--思路:大概的思路就是在這張圖片上蓋上一層視圖,視圖裏面有畫兩個圓,內圓是顯示加載進度的,顯示的顏色是半透明的,外圓的底色也是半透明的,在將弧長分成4份,第一和第三的弧長部分顯示的是淺藍色,然後就是隨着加載進度的變化而開始轉動,下面貼代碼
1.初始化的時候開始創建我們需要的各種圖形
public CircularProgressBar(Context paramContext, AttributeSet paramAttributeSet)
{
super(paramContext, paramAttributeSet);
this.mContext = paramContext;
init();
}
private void init()
{
// this.mBgColor = -16777216;
// this.mFgColor = -1;
this.mSquarePaint = new Paint();//正方形
this.mSquarePaint.setAntiAlias(true);
this.mSquarePaint.setColor(mContext.getResources().getColor(R.color.dark_color));
this.mSquarePaint.setStyle(Paint.Style.FILL);
this.mRingPaint = new Paint();//圓環
this.mRingPaint.setAntiAlias(true);
this.mRingPaint.setColor(this.mContext.getResources().getColor(R.color.alpha_color2));
this.mRingPaint.setStyle(Paint.Style.STROKE);
this.mCircularPaint = new Paint();//圓形
this.mCircularPaint.setAntiAlias(true);
this.mCircularPaint.setColor(mContext.getResources().getColor(R.color.alpha_color2));
this.mCircularPaint.setStyle(Paint.Style.FILL);
this.mProgressRingPaint = new Paint();//進度條
this.mProgressRingPaint.setAntiAlias(true);
this.mProgressRingPaint.setColor(this.mContext.getResources().getColor(R.color.light_color));
this.mProgressRingPaint.setStyle(Paint.Style.STROKE);
}
2.重寫ondraw方法,在這裏面進行我們需要的加載的時候的視圖變化
protected void onDraw(Canvas paramCanvas)
{
//獲得圓心
this.mCenterX = (getWidth() / 2);
this.mCenterY = (getHeight() / 2);
//圓環的寬
this.mStrokeWidth = (getWidth() / 12);
this.mRadius = (11 * (getWidth() / 24));
//進度圓環的半徑
this.mCircularRadius = (this.mRadius - this.mStrokeWidth / 2.0F);
this.mRingPaint.setStrokeWidth(this.mStrokeWidth);
//在圓環上的兩條藍色
this.mProgressRingPaint.setStrokeWidth(this.mStrokeWidth);
Rect localRect = new Rect();
localRect.left = 0;
localRect.top = 0;
localRect.right = getWidth();
localRect.bottom = getHeight();
RectF localRectF1 = new RectF(localRect);
float f = 14 * getWidth() / 128;
paramCanvas.drawRoundRect(localRectF1, f, f, this.mSquarePaint);
paramCanvas.drawCircle(this.mCenterX, this.mCenterY, this.mRadius, this.mRingPaint);
if ((this.mProgress >= 0) && (this.mProgress <= 100))
{
//進度條顯示
RectF localRectF2 = new RectF();
localRectF2.left = (this.mCenterX - this.mCircularRadius);
localRectF2.top = (this.mCenterY - this.mCircularRadius);
localRectF2.right = (localRectF2.left + 2.0F * this.mCircularRadius);
localRectF2.bottom = (localRectF2.top + 2.0F * this.mCircularRadius);
paramCanvas.drawArc(localRectF2, -90.0F, (float)(3.6D * this.mProgress), true, this.mCircularPaint);
//圓環上的兩個藍邊
RectF localRectF3 = new RectF();
localRectF3.left = (this.mCenterX - this.mRadius);
localRectF3.top = (this.mCenterY - this.mRadius);
localRectF3.right = (this.mCenterX + this.mRadius);
localRectF3.bottom = (this.mCenterY + this.mRadius);
paramCanvas.drawArc(localRectF3, (float)(3.6D * this.mProgress) - 45.0F, 90.0F, false, this.mProgressRingPaint);
paramCanvas.drawArc(localRectF3, 135.0F + (float)(3.6D * this.mProgress), 90.0F, false, this.mProgressRingPaint);
}
}
3.公開一個接口,讓外面的數據傳遞過來
public void setProgress(int paramInt)
{
this.mProgress = paramInt;
invalidate();
}
4.通過handler來實現模擬下載的進度變化
public class MainActivity extends Activity {
private int i=0;
private CircularProgressBar circle;
private Handler mhandler=new Handler(){
public void dispatchMessage(android.os.Message msg) {
if(msg.what==1){
circle.setProgress(++i);
mhandler.sendEmptyMessageDelayed(1, 1000);
}
};
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circle = (CircularProgressBar) findViewById(R.id.circle);
//circle.setProgress(++i);
mhandler.sendEmptyMessage(1);
}
}
源碼:http://download.csdn.net/detail/iblue007/9514735