码迷,mamicode.com
首页 > 其他好文 > 详细

一款非常好看的下载动画

时间:2016-05-12 17:56:00      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:

废话不多说,先上效果图

技术分享技术分享技术分享技术分享

在下载的时候蓝色的边会跟着下载的进度以前变化


--思路:大概的思路就是在这张图片上盖上一层视图,视图里面有画两个圆,内圆是显示加载进度的,显示的颜色是半透明的,外圆的底色也是半透明的,在将弧长分成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



一款非常好看的下载动画

标签:

原文地址:http://blog.csdn.net/iblue007/article/details/51354711

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!