首页 > 代码库 > 开源项目: circular-progress-button

开源项目: circular-progress-button

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

其由三部分动画组成: 初始状态->圆环状态->完成状态.
0. 实现从初始到圆环的简单实现:
技术分享

继承自button 类, 设置其背景
  1. public class CircleButton extends Button implements View.OnClickListener {
  2. private StateListDrawable mIdleStateDrawable;
  3. private StrokeGradientDrawable background;
  4. public CircleButton(Context context, AttributeSet attrs) {
  5. super(context, attrs);
  6. background = new StrokeGradientDrawable();
  7. // init();
  8. // setBackground(mIdleStateDrawable);
  9. setBackground(background.getGradientDrawable());
  10. setOnClickListener(this);
  11. }
  12. //.......
  13. }
其中的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. }
  18. public StrokeGradientDrawable() {
  19. mGradientDrawable = new GradientDrawable();
  20. mGradientDrawable.setColor(0xff99cc00);
  21. mStrokeWidth = 5;
  22. }
  23. public GradientDrawable getGradientDrawable() {
  24. return mGradientDrawable;
  25. }
  26. public void setmGradientDrawable(GradientDrawable mGradientDrawable) {
  27. this.mGradientDrawable = mGradientDrawable;
  28. }
  29. private GradientDrawable mGradientDrawable;
  30. }
其中的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;
  18. } else {
  19. leftOffset = (mToWidth - value) / 2;
  20. rightOffset = mToWidth - leftOffset;
  21. }
  22. gradientDrawable.setBounds(leftOffset, 0, rightOffset, getHeight());
  23. }
  24. });
  25. //填充颜色
  26. ObjectAnimator bgColorAnimation = ObjectAnimator.ofInt(gradientDrawable, "color", 0xff99cc00, Color.WHITE);
  27. bgColorAnimation.setEvaluator(new ArgbEvaluator());
  28. //描边
  29. ObjectAnimator strokeColorAnimation =
  30. ObjectAnimator.ofInt(background, "strokeColor", 0xff99cc00, Color.GRAY);
  31. strokeColorAnimation.setEvaluator(new ArgbEvaluator());
  32. //圆角
  33. ObjectAnimator cornerAnimation =
  34. ObjectAnimator.ofFloat(gradientDrawable, "cornerRadius", 0, 30);
  35. AnimatorSet animatorSet = new AnimatorSet();
  36. animatorSet.setDuration(2000);
  37. animatorSet.playTogether(bgColorAnimation, cornerAnimation, widthAnimation,strokeColorAnimation);
  38. animatorSet.start();
  39. }
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 中,通过设置<selector/> 来的background来进行按钮点击时候的背景的切换,此类则是该xml 的实现.
ColorStateList  类似.



来自为知笔记(Wiz)


开源项目: circular-progress-button