Android开发：带progressBar效果的Button

这是一个带progressBar的Button，用于告诉用户正在处理数据和反馈处理结果，支付宝最新版本也有用到这个效果的按钮，请看效果图：

使用方法（针对Android studio）

1. 点击这个链接下载aar包，添加在libs文件夹里面（如果没有libs就创建一个）

2. 在项目的build.gradle中添加如下代码

            dependencies {
    compile(name:‘progressbutton-release‘, ext:‘aar‘)
}
repositories{
    flatDir{
        dirs‘libs‘
    }
}
        

3 在xml中引用该控件：

            <cn.xm.weidongjian.progressbuttonlib.ProgressButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New Button"
        android:paddingLeft="30dp"
        android:paddingRight="30dp"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:background="@drawable/selector_button"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>
        

4 在activity中设置各种效果：

            private ProgressButton button;
button = (ProgressButton) findViewById(R.id.button);
button.startRotate();\\添加并开始旋转progressBarbutton.animError();\\显示错误符号
button.animFinish();\\显示正确符号
button.removeDrawable();\\移除progressBar
        

代码说明

• 实现方法：自定义一个drawable，然后通过textview的setCompoundDrawablesWithIntrinsicBounds的方法添加该drawable到Button中，因为Button是Extend Textview的

            drawable = new ProgressDrawable(getTextSize(), this);
this.setCompoundDrawablesWithIntrinsicBounds(drawable, null, null, null);
        

• 自定义一个drawable，并且实现旋转，打钩，打叉的效果

            
                public
                
                    class
                    ProgressDrawable
                    extends
                    Drawable {
                private Paint mPaint;
    privatefloat width;
    privatestaticfinalint STAGE_NULL = 0, STAGE_ROTATE = 1, STAGE_FINISH = 2, STAGE_ERROR = 3;
    privateint stage = 0;
    private RectF rectF;
    privatefloat centerX, centerY;
    privatefloat degreen = 0;
    private ValueAnimator animator;
    private Path pathFinish, pathErrorOne, pathErrorTwo;
    privatefloat lenFinish, lenError, length;
    privateint colorDefault = Color.WHITE, colorError = Color.RED;
    private Button button;
    private Animatable animatable;

    publicProgressDrawable(float size, Button button) {
        this.width = size;
        this.button = button;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(4);
        rectF = new RectF(0, 0, width, width);
        centerX = width/2;
        centerY = width/2;
        initPath();
    }

    privatevoidinitPath() {
        pathFinish = new Path();
        pathFinish.moveTo(width * 1f, width * 0.2f);
        pathFinish.lineTo(width * 0.4f, width * 0.8f);
        pathFinish.lineTo(0f, width * 0.4f);
        PathMeasure pm = new PathMeasure(pathFinish, false);
        lenFinish = pm.getLength();

        pathErrorOne = new Path();
        pathErrorOne.moveTo(width * 0.9f, width * 0.9f);
        pathErrorOne.lineTo(width * 0.1f, width * 0.1f);
        pm.setPath(pathErrorOne, false);
        lenError = pm.getLength();

        pathErrorTwo = new Path();
        pathErrorTwo.moveTo(width * 0.9f, width * 0.1f);
        pathErrorTwo.lineTo(width * 0.1f, width * 0.9f);
    }

    @OverridepublicintgetIntrinsicHeight() {
        return (int) width;
    }

    @OverridepublicintgetIntrinsicWidth() {
        return (int) width;
    }

    @Overridepublicvoiddraw(Canvas canvas) {
        if (stage == STAGE_NULL)
            return;
        if (stage == STAGE_ROTATE) {
            canvas.save();
            canvas.rotate(degreen, centerX, centerY);
            canvas.drawArc(rectF, -90f, 100f, false, mPaint);
            canvas.restore();
            return;
        }
        if (stage == STAGE_FINISH) {
            canvas.drawPath(pathFinish, mPaint);
            mPaint.setPathEffect(null);
            return;
        }
        if (stage == STAGE_ERROR) {
            canvas.drawPath(pathErrorOne, mPaint);
            canvas.drawPath(pathErrorTwo, mPaint);
            mPaint.setPathEffect(null);
            return;
        }
    }

    @OverridepublicvoidsetAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @OverridepublicvoidsetColorFilter(ColorFilter cf) {
        mPaint.setColorFilter(cf);
    }

    @OverridepublicintgetOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    publicvoidstartRotate() {
        stage = STAGE_ROTATE;
        mPaint.setColor(colorDefault);
        button.setClickable(false);
        if (animator == null) {
            animator = ValueAnimator.ofFloat(0f, 1f);
            animator.setDuration(2000);
            animator.setRepeatCount(ValueAnimator.INFINITE);
            animator.setRepeatMode(ValueAnimator.RESTART);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @OverridepublicvoidonAnimationUpdate(ValueAnimator animation) {
                    degreen += 5;
                    invalidateSelf();
                }
            });
        }
        animator.start();
    }

    publicvoidstopRotate() {
        if (animator != null && animator.isRunning()) {
            animator.end();
        }
    }

    privatevoidsetPhase(float phase) {
        mPaint.setPathEffect(new DashPathEffect(newfloat[]{length, length}, -length * phase));
        invalidateSelf();
    }

    publicvoidanimFinish() {
        stage = STAGE_FINISH;
        length = lenFinish;
        mPaint.setColor(colorDefault);
        startAnim();
    }

    publicvoidanimError() {
        stage = STAGE_ERROR;
        length = lenError;
        mPaint.setColor(colorError);
        startAnim();
    }

    privatevoidstartAnim() {
        stopRotate();
        ObjectAnimator animator = ObjectAnimator.ofFloat(this, "Phase", 1f, 0f);
        animator.setDuration(400);
        animator.setInterpolator(new AccelerateInterpolator());
        animator.addListener(new AnimatorListenerAdapter() {
            @OverridepublicvoidonAnimationEnd(Animator animation) {
                button.setClickable(true);
                if (animatable != null){
                    animatable.stop();
                }
            }
        });
        animator.start();
    }

    publicvoidsetColorDefault(int color) {
        this.colorDefault = color;
    }

    publicvoidsetAnimatable(Animatable animatable) {
        this.animatable = animatable;
    }

}
        

其中打钩，打叉是用DashPathEffect的方法实现的，具体可以查看代码

• 补充说明下Canvas的Save和Restore
  save是保存当前的状态，比如旋转，位移等，在save后，我调用了rotate的方法旋转canvas，然后接着draw圆弧，然后调用restore的方法，就可以把canvas恢复到旋转前的状态，相当于rotate的反方向旋转是同样的效果

以上就是大概的说明，有任何疑问的，欢迎留言，源码请点击这里

版权声明：本文为博主原创文章，未经博主允许不得转载。