自定义环形进度条按钮

项目上需要一个按钮 实现点击变换 并有进度条提示 结束后有事件可以回调  

直接先看成果吧  

不要吐槽为啥是个弧  项目需要....T_T

代码奉上  

package com.example.main.aidltest.view;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;

import com.example.main.aidltest.R;


/**
 * Created by h on 2018/1/12.
 */

public class StopView extends View {
    // 画圆所在的距形区域
    private RectF mRectF;

    private Paint mPaint;

    private Context mContext;
    private AnimalEndoncLickListener listener;
    private int value = 0;
    int w, h;
    Bitmap bitmap;
    Boolean showcolor = false;

    public StopView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mRectF = new RectF();
        mPaint = new Paint();
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.btn_end);
        w = bitmap.getWidth();
        h = bitmap.getHeight();
    }


    public void SetListener(AnimalEndoncLickListener listener) {
        this.listener = listener;
    }



    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 设置画笔相关属性
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.parseColor("#F94269"));//255,165,0
        canvas.drawBitmap(bitmap, getWidth() / 2 - w / 2, 0, null);//设置图片 并且确定从哪个位置开始
        mPaint.setAntiAlias(true);//抗锯齿
        mPaint.setStrokeWidth(w / 9);
        mPaint.setStyle(Paint.Style.STROKE);
        //设置圆的边界
        mRectF.left = (int) (getWidth() / 2 - w / 2.5);
        mRectF.top = (int) (h / 2 - h / 2.5);
        mRectF.right = (int) (getWidth() / 2 + w / 2.5); // 左下角x
        mRectF.bottom = (int) (h / 2 + h / 2.5); // 右下角y
        //是否显示底色
        if (showcolor) {
            mPaint.setColor(Color.parseColor("#80F94269"));
            canvas.drawArc(mRectF, -150, 120, false, mPaint);
        }
        mPaint.setColor(Color.parseColor("#F94269"));
        //绘画
        canvas.drawArc(mRectF, -150, value, false, mPaint);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        String tag = "onMeasure";
        Log.e(tag, " View on measure...");
        //v确定view大小
        setMeasuredDimension(widthMeasureSpec, h);
    }

//设置动画
    ValueAnimator animator = ValueAnimator.ofInt(0, 120);

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            bitmap= BitmapFactory.decodeResource(getResources(), R.drawable.btn_long_press);
            showcolor = true;
            animator.addUpdateListener(
                    new ValueAnimator.AnimatorUpdateListener() {

                        @Override
                        public void onAnimationUpdate(ValueAnimator animation) {
                            value = (int) animation.getAnimatedValue();
                            invalidate();

                        }


                    }
            );
            animator.setDuration(2000);
            animator.setInterpolator(new
                    LinearInterpolator());
            animator.start();
        } else if (event.getAction() == MotionEvent.ACTION_UP) {
            Log.d("Stopview", "up");

            if (value == 120) {
                if (listener != null) {
                    listener.AnimalEndoncLick();
                    bitmap= BitmapFactory.decodeResource(getResources(), R.drawable.btn_end);
                    showcolor = false;
                    value = 0;
                    invalidate();
                }
            } else {
                animator.cancel();
                bitmap= BitmapFactory.decodeResource(getResources(), R.drawable.btn_end);
                value = 0;
                showcolor = false;
                invalidate();
            }

        }

        return true;

    }
//点击事件响应接口
    public interface AnimalEndoncLickListener {
        public abstract void AnimalEndoncLick();
    }
}

想把圆环换成圆  只需要将120改成360就是了 动画使用的 是属性动画 通过 动态刷新圆环的大小 来实现动画  

使用也很简单  

StopView stopView= (StopView) findViewById(R.id.stop);
        stopView.SetListener(new StopView.AnimalEndoncLickListener() {
            @Override
            public void AnimalEndoncLick() {
                Toast.makeText(activity, "123", Toast.LENGTH_SHORT).show();
            }
        });

实现AnimalEndoncLickListener接口 动画完成后将自动调用接口执行