不多BB，先上图

• 此按钮由一个圆一个勾组成，准确的说应该是一个圆2条线组成
• 还有动画，这里用的是属性动画，分为4部分，圆圈，线（2条），还有整体的放大缩小

开工

这里不解释初始化画笔，各种数据过程，

关键点在onDraw方法里

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        Log.e("current", "X:" + mCenterX + "," + "Y:" + mCenterY);
        mRectF.left = mCenterX - mRadius;
        mRectF.top = mCenterY - mRadius;
        mRectF.right = mCenterX + mRadius;
        mRectF.bottom = mCenterY + mRadius;
        //画圆
        canvas.drawArc(mRectF, 0, mDegree, false, mCirclePaint);
        //画勾左边
        canvas.drawLine(mCenterX - mRadius / 2, mCenterY,
                mCenterX - mRadius / 2 + mLeftValue, mCenterY + mLeftValue,
                mLinePaint);
        //画勾的右边
        //mCenterX + mRightValue, mCenterY + mRadius / 2 - 1.7f * mRightValue这个坐标在下图解析
        canvas.drawLine(mCenterX, mCenterY + mRadius / 2,
                mCenterX + mRightValue, mCenterY + mRadius / 2 - 1.7f * mRightValue, mLinePaint);
    }

mLeftValue，mRightValue是动态改变的

下面解释mCenterX + mRightValue, mCenterY + mRadius / 2 - 1.7f * mRightValue这个坐标

这里m=mRightValue（动态变化的值）
h就是勾右边线坐标高度
1.7是估计出来的值，假设勾右边线与y轴成30度

其他的比如动画等的，源代码里注释的很清楚-----AnimationViewSet

源代码

/**
     * 圆圈的画笔
     */
    private Paint mCirclePaint;
    /**
     * 线的画笔
     */
    private Paint mLinePaint;
    /**
     * 设置线宽，px
     */
    private float mStrokeWidth = 10;

    private float mCenterX, mCenterY;

    /**
     * 为了画出目标圆形的矩形外框
     */
    private RectF mRectF = new RectF();

    /**
     * 圆的半径
     */
    private float mRadius = 300;

    /**
     * 画圆时动态设置的角度
     */
    private Float mDegree = 360f;

    private Float mLeftValue = 150f;
    private Float mRightValue = 150f;
    //默认半径
    private static final int DEFAULT_RADIUS = 150;
    //边距
    private static final float PADDING = 20;

    private AnimatorSet mAnimatorSet = new AnimatorSet();
    private ValueAnimator mCircleAnim;
    private ValueAnimator mLineLeftAnimator;
    private ValueAnimator mLineRightAnimator;


    public ConfirmView(Context context) {
        this(context, null);
    }

    public ConfirmView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ConfirmView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化画笔
     */
    private void initPaint() {
        mCirclePaint = new Paint();
        //抗锯齿
        mCirclePaint.setAntiAlias(true);
        //设置连接点为圆角
        mCirclePaint.setStrokeJoin(Paint.Join.ROUND);
        mCirclePaint.setStrokeWidth(mStrokeWidth);
        mCirclePaint.setColor(Color.WHITE);
        mCirclePaint.setStyle(Paint.Style.STROKE);


        mLinePaint = new Paint();
        mLinePaint.setAntiAlias(true);
        mLinePaint.setStrokeJoin(Paint.Join.ROUND);
        mLinePaint.setStrokeWidth(mStrokeWidth);
        mLinePaint.setColor(Color.WHITE);
        mLinePaint.setStyle(Paint.Style.STROKE);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        reMeasure();
    }

    /**
     * 重新测量宽和高
     */
    private void reMeasure() {
        int viewWidth = getMeasuredWidth();
        int viewHeight = getMeasuredHeight();
        mCenterX = viewWidth / 2;
        mCenterY = viewHeight / 2;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mCenterX = w / 2;
        mCenterY = h / 2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        Log.e("current", "X:" + mCenterX + "," + "Y:" + mCenterY);
        mRectF.left = mCenterX - mRadius;
        mRectF.top = mCenterY - mRadius;
        mRectF.right = mCenterX + mRadius;
        mRectF.bottom = mCenterY + mRadius;
        //画圆
        canvas.drawArc(mRectF, 0, mDegree, false, mCirclePaint);
        //画勾左边
        canvas.drawLine(mCenterX - mRadius / 2, mCenterY,
                mCenterX - mRadius / 2 + mLeftValue, mCenterY + mLeftValue,
                mLinePaint);
        //画勾的右边
        //mCenterX + mRightValue, mCenterY + mRadius / 2 - 1.7f * mRightValue这个坐标
        canvas.drawLine(mCenterX, mCenterY + mRadius / 2,
                mCenterX + mRightValue, mCenterY + mRadius / 2 - 1.7f * mRightValue, mLinePaint);
    }

    public void loadCircle(int mRadius) {
        mRadius = mRadius < 0 ? DEFAULT_RADIUS : mRadius;
        this.mRadius = mRadius - PADDING;
        if (mAnimatorSet != null && mAnimatorSet.isRunning()) {
            return;
        }
        resetDegreeAndLeftRightValueAndPaintColor();
        reMeasure();

        //这里其实限定了
        //mDegree，对应更新值的方法是mLeftValue = (Float) animation.getAnimatedValue();，在下面的监听器里
        //mLeftValue
        //mRightValue三个数的取值
        mCircleAnim = ValueAnimator.ofFloat(0, 360);
        mLineLeftAnimator = ValueAnimator.ofFloat(0, this.mRadius / 2f);
        mLineRightAnimator = ValueAnimator.ofFloat(0, this.mRadius / 2f);

        mCircleAnim.setDuration(800);
        mLineLeftAnimator.setDuration(500);
        mLineRightAnimator.setDuration(500);

        mCircleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mDegree = (Float) animation.getAnimatedValue();
                invalidate();
            }
        });

        mLineLeftAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mLeftValue = (Float) animation.getAnimatedValue();
                invalidate();
            }
        });

        mLineRightAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mRightValue = (Float) animation.getAnimatedValue();
                invalidate();
            }
        });

        mAnimatorSet.play(mCircleAnim).before(mLineLeftAnimator);
        mAnimatorSet.play(mLineRightAnimator).after(mLineLeftAnimator);
        mAnimatorSet.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                stopPropertyAnimation();
                if (mEndListener != null) {
                    mEndListener.onCircleDone();
                    //放大效果
                    loadEndAnim();
                }
            }
        });
        mAnimatorSet.start();
    }

    /**
     * 加载结束动画
     */
    private void loadEndAnim() {
        //放大的值
        ObjectAnimator scaleXAnim = ObjectAnimator.ofFloat(this, "scaleX", 1.0f, 1.2f, 1.0f);
        ObjectAnimator scaleYAnim = ObjectAnimator.ofFloat(this, "scaleY", 1.0f, 1.2f, 1.0f);
        AnimatorSet set = new AnimatorSet();
        set.setDuration(3000);
        set.setInterpolator(new BounceInterpolator());
        set.playTogether(scaleXAnim, scaleYAnim);
        set.start();
    }

    private void stopPropertyAnimation() {
        if (null != mCircleAnim) {
            mCircleAnim.end();
        }
        if (null != mLineLeftAnimator) {
            mLineLeftAnimator.end();
        }
        if (null != mLineRightAnimator) {
            mLineRightAnimator.end();
        }
        clearAnimation();
    }

    private void resetDegreeAndLeftRightValueAndPaintColor() {
        mDegree = 0f;
        mLeftValue = 0f;
        mRightValue = 0f;
        mCirclePaint.setColor(Color.WHITE);
        mLinePaint.setColor(Color.WHITE);
    }


    public interface onCircleFinishListener {
        void onCircleDone();
    }

    private onCircleFinishListener mEndListener;

    public void addCircleAnimatorEndListener(onCircleFinishListener endListener) {
        if (mEndListener == null) {
            this.mEndListener = endListener;
        }
    }

    public void setPaintColor(int color) {
        mCirclePaint.setColor(color);
        mLinePaint.setColor(color);
        invalidate();
    }
}