开源项目: circular-progress-button

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

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

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

继承自button 类, 设置其背景

public class CircleButton extends Button implements View.OnClickListener {
    private StateListDrawable mIdleStateDrawable;
    private StrokeGradientDrawable background;

    public CircleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        background = new StrokeGradientDrawable();
//        init();
//        setBackground(mIdleStateDrawable);
        setBackground(background.getGradientDrawable());
        setOnClickListener(this);
    }
//.......
}

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

public class StrokeGradientDrawable {
    private int mStrokeColor;   //描边颜色
    private int mStrokeWidth;   //描边宽度
    public int getStrokeColor() {
        return mStrokeColor;
    }
    public void setStrokeColor(int strokeColor) {
        mStrokeColor = strokeColor;
        mGradientDrawable.setStroke(getStrokeWidth(), strokeColor);
    }
    public int getStrokeWidth() {
        return mStrokeWidth;
    }
    public void setStrokeWidth(int strokeWidth) {
        mStrokeWidth = strokeWidth;
        mGradientDrawable.setStroke(strokeWidth, getStrokeColor());
    }

    public StrokeGradientDrawable() {
        mGradientDrawable = new GradientDrawable();
        mGradientDrawable.setColor(0xff99cc00);
        mStrokeWidth = 5;
    }
    public GradientDrawable getGradientDrawable() {
        return mGradientDrawable;
    }
    public void setmGradientDrawable(GradientDrawable mGradientDrawable) {
        this.mGradientDrawable = mGradientDrawable;
    }
    private GradientDrawable mGradientDrawable;
}

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

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

  @Override
    public void onClick(View v) {
        final GradientDrawable gradientDrawable = background.getGradientDrawable();
        final int mFromWidth = getWidth();
        final int mToWidth = getHeight();
        //宽度动画
        ValueAnimator widthAnimation = ValueAnimator.ofInt(mFromWidth, mToWidth);
        widthAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                int leftOffset;
                int rightOffset;
                int padding;
                if (mFromWidth > mToWidth) {
                    leftOffset = (mFromWidth - value) / 2;
                    rightOffset = mFromWidth - leftOffset;

                } else {
                    leftOffset = (mToWidth - value) / 2;
                    rightOffset = mToWidth - leftOffset;
                }
                gradientDrawable.setBounds(leftOffset, 0, rightOffset, getHeight());
            }
        });
        //填充颜色
        ObjectAnimator bgColorAnimation = ObjectAnimator.ofInt(gradientDrawable, "color", 0xff99cc00, Color.WHITE);
        bgColorAnimation.setEvaluator(new ArgbEvaluator());
        //描边
        ObjectAnimator strokeColorAnimation =
                ObjectAnimator.ofInt(background, "strokeColor", 0xff99cc00,  Color.GRAY);
        strokeColorAnimation.setEvaluator(new ArgbEvaluator());
        //圆角
        ObjectAnimator cornerAnimation =
                ObjectAnimator.ofFloat(gradientDrawable, "cornerRadius", 0, 30);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.playTogether(bgColorAnimation, cornerAnimation, widthAnimation,strokeColorAnimation);
        animatorSet.start();
    }

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)