带进度条显示的按钮, 其效果如下所示:
其由三部分动画组成: 初始状态->圆环状态->完成状态.
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)
转载于:https://www.cnblogs.com/lv-2012/p/4212762.html
相关资源：JAVA上百实例源码以及开源项目
