首页 > 代码库 > 开源项目: circular-progress-button
开源项目: 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)
开源项目: circular-progress-button
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。