开源项目: circular-progress-button

带进度条显示的按钮, 其效果如下所示:

其由三部分动画组成: 初始状态->圆环状态->完成状态.

0. 实现从初始到圆环的简单实现:

继承自button 类, 设置其背景

1. public class CircleButton extends Button implements View.OnClickListener {
2. private StateListDrawable mIdleStateDrawable;
3. private StrokeGradientDrawable background;
5. public CircleButton(Context context, AttributeSet attrs) {
6. super(context, attrs);
7. background = new StrokeGradientDrawable();
8. // init();
9. // setBackground(mIdleStateDrawable);
10. setBackground(background.getGradientDrawable());
11. setOnClickListener(this);
12. }
13. //.......
14. }

其中的StrokeGradientDrawable(照搬源码) 如下:

1. public class StrokeGradientDrawable {
2. private int mStrokeColor; //描边颜色
3. private int mStrokeWidth; //描边宽度
4. public int getStrokeColor() {
5. return mStrokeColor;
6. }
7. public void setStrokeColor(int strokeColor) {
8. mStrokeColor = strokeColor;
9. mGradientDrawable.setStroke(getStrokeWidth(), strokeColor);
10. }
11. public int getStrokeWidth() {
12. return mStrokeWidth;
13. }
14. public void setStrokeWidth(int strokeWidth) {
15. mStrokeWidth = strokeWidth;
16. mGradientDrawable.setStroke(strokeWidth, getStrokeColor());
17. }
19. public StrokeGradientDrawable() {
20. mGradientDrawable = new GradientDrawable();
21. mGradientDrawable.setColor(0xff99cc00);
22. mStrokeWidth = 5;
23. }
24. public GradientDrawable getGradientDrawable() {
25. return mGradientDrawable;
26. }
27. public void setmGradientDrawable(GradientDrawable mGradientDrawable) {
28. this.mGradientDrawable = mGradientDrawable;
29. }
30. private GradientDrawable mGradientDrawable;
31. }

其中的GradientDrawable 为动画的关键所在

在该类中,可以设置其圆角, 填充颜色, 描边, 尺寸等. 因此,当点击按钮时,可通过动画的方式渐变到目的状态, 其实现如下(源码见MorphingAnimation 类):

1. @Override
2. public void onClick(View v) {
3. final GradientDrawable gradientDrawable = background.getGradientDrawable();
4. final int mFromWidth = getWidth();
5. final int mToWidth = getHeight();
6. //宽度动画
7. ValueAnimator widthAnimation = ValueAnimator.ofInt(mFromWidth, mToWidth);
8. widthAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
9. @Override
10. public void onAnimationUpdate(ValueAnimator animation) {
11. Integer value = (Integer) animation.getAnimatedValue();
12. int leftOffset;
13. int rightOffset;
14. int padding;
15. if (mFromWidth > mToWidth) {
16. leftOffset = (mFromWidth - value) / 2;
17. rightOffset = mFromWidth - leftOffset;
19. } else {
20. leftOffset = (mToWidth - value) / 2;
21. rightOffset = mToWidth - leftOffset;
22. }
23. gradientDrawable.setBounds(leftOffset, 0, rightOffset, getHeight());
24. }
25. });
26. //填充颜色
27. ObjectAnimator bgColorAnimation = ObjectAnimator.ofInt(gradientDrawable, "color", 0xff99cc00, Color.WHITE);
28. bgColorAnimation.setEvaluator(new ArgbEvaluator());
29. //描边
30. ObjectAnimator strokeColorAnimation =
31. ObjectAnimator.ofInt(background, "strokeColor", 0xff99cc00, Color.GRAY);
32. strokeColorAnimation.setEvaluator(new ArgbEvaluator());
33. //圆角
34. ObjectAnimator cornerAnimation =
35. ObjectAnimator.ofFloat(gradientDrawable, "cornerRadius", 0, 30);
36. AnimatorSet animatorSet = new AnimatorSet();
37. animatorSet.setDuration(2000);
38. animatorSet.playTogether(bgColorAnimation, cornerAnimation, widthAnimation,strokeColorAnimation);
39. animatorSet.start();
40. }

1. 源码分析(此处以Sample2Activity 为实例):

按钮的几种状态, [ , IDLE,   ,]

初始为IDLE 状态.

在Sample2Activity 中, 仅仅只是调用了setProgress()来实现其整个过程.其value的值从0-100 不断的递增

在setProgress()方法中,其中的从初始化进入加载的圆环状态如下

 在morphToProgress() 方法,实现了从初始化到圆环状态的过度.在setListener(mProgressStateListener)中当动画完成的时候将mState 置为Progress

在createProgressMorphing() 中为创建一个MorphingAnimation实例, 其主要设置动画的圆角,宽度,颜色等等 ,在0中的简单实现也用到了这个类中的一些代码( MorphingAnimation.start() 方法中的代码片段) .

在动画完成后,在setProgress 中将进行不断的界面刷新invalidate() 在调用此方法,则系统将进行重绘调用onDraw()方法

当setProgress() 到达100的时候则会调用到morphProgressToComplete() 来转换到完成的状态.

---------------------------------------------------END---------------------------------------------------------------------------------------

StateListDrawable 类, 在xml 中,通过设置 来的background来进行按钮点击时候的背景的切换,此类则是该xml 的实现.

ColorStateList  类似.

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/lv-2012/p/4212762.html