一款非常好看的下載動畫

廢話不多說，先上效果圖

在下載的時候藍色的邊會跟著下載的進度以前變化

--思路：大概的思路就是在這張圖片上蓋上一層視圖，視圖裡面有畫兩個圓，內圓是顯示加載進度的，顯示的顏色是半透明的，外圓的底色也是半透明的，在將弧長分成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);	
	} 
}