<!--使用默認UI屬性-->
 <com.mcxtzhang.lib.AnimShopButton
 android:id="@+id/btn1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:maxCount="3"/>
 <!--設置了兩圓間距-->
 <com.mcxtzhang.lib.AnimShopButton
 android:id="@+id/btn2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:count="3"
 app:gapBetweenCircle="90dp"
 app:maxCount="99"/>
 <!--仿餓了么-->
 <com.mcxtzhang.lib.AnimShopButton
 android:id="@+id/btnEle"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:addEnableBgColor="#3190E8"
 app:addEnableFgColor="#ffffff"
 app:hintBgColor="#3190E8"
 app:hintBgRoundValue="15dp"
 app:hintFgColor="#ffffff"
 app:maxCount="99"/>

@Override
 protected void onDraw(Canvas canvas) {
 if (isHintMode) {
  //hint 展開
  //背景
  mHintPaint.setColor(mHintBgColor);
  RectF rectF = new RectF(mLeft, mTop
   , mWidth - mCircleWidth, mHeight - mCircleWidth);
  canvas.drawRoundRect(rectF, mHintBgRoundValue, mHintBgRoundValue, mHintPaint);
  //前景文字
  mHintPaint.setColor(mHintFgColor);
  // 計算Baseline繪制的起點X軸坐標
  int baseX = (int) (mWidth / 2 - mHintPaint.measureText(mHintText) / 2);
  // 計算Baseline繪制的Y坐標
  int baseY = (int) ((mHeight / 2) - ((mHintPaint.descent() + mHintPaint.ascent()) / 2));
  canvas.drawText(mHintText, baseX, baseY, mHintPaint);
 } else {
  //左邊
  //背景 圓
  if (mCount > 0) {
  mDelPaint.setColor(mDelEnableBgColor);
  } else {
  mDelPaint.setColor(mDelDisableBgColor);
  }
  mDelPaint.setStrokeWidth(mCircleWidth);
  mDelPath.reset();
  mDelPath.addCircle(mLeft + mRadius, mTop + mRadius, mRadius, Path.Direction.CW);
  mDelRegion.setPath(mDelPath, new Region(mLeft, mTop, mWidth - getPaddingRight(), mHeight - getPaddingBottom()));
  canvas.drawPath(mDelPath, mDelPaint);
  //前景 -
  if (mCount > 0) {
  mDelPaint.setColor(mDelEnableFgColor);
  } else {
  mDelPaint.setColor(mDelDisableFgColor);
  }
  mDelPaint.setStrokeWidth(mLineWidth);
  canvas.drawLine(-mRadius / 2, 0,
   +mRadius / 2, 0,
   mDelPaint);
  //數(shù)量
  //是沒有動畫的普通寫法,x left, y baseLine
  canvas.drawText(mCount + "", mLeft + mRadius * 2, mTop + mRadius - (mFontMetrics.top + mFontMetrics.bottom) / 2, mTextPaint);
  //右邊
  //背景 圓
  if (mCount < mMaxCount) {
  mAddPaint.setColor(mAddEnableBgColor);
  } else {
  mAddPaint.setColor(mAddDisableBgColor);
  }
  mAddPaint.setStrokeWidth(mCircleWidth);
  float left = mLeft + mRadius * 2 + mGapBetweenCircle;
  mAddPath.reset();
  mAddPath.addCircle(left + mRadius, mTop + mRadius, mRadius, Path.Direction.CW);
  mAddRegion.setPath(mAddPath, new Region(mLeft, mTop, mWidth - getPaddingRight(), mHeight - getPaddingBottom()));
  canvas.drawPath(mAddPath, mAddPaint);
  //前景 +
  if (mCount < mMaxCount) {
  mAddPaint.setColor(mAddEnableFgColor);
  } else {
  mAddPaint.setColor(mAddDisableFgColor);
  }
  mAddPaint.setStrokeWidth(mLineWidth);
  canvas.drawLine(left + mRadius / 2, mTop + mRadius, left + mRadius / 2 + mRadius, mTop + mRadius, mAddPaint);
  canvas.drawLine(left + mRadius, mTop + mRadius / 2, left + mRadius, mTop + mRadius / 2 + mRadius, mAddPaint);
 }
 }

 /**
 * Return true if the region contains the specified point
 */
 public native boolean contains(int x, int y);

@Override
 public boolean onTouchEvent(MotionEvent event) {
 int action = event.getAction();
 switch (action) {
  case MotionEvent.ACTION_DOWN:
  //hint模式
  if (isHintMode) {
   onAddClick();
   return true;
  } else {
   if (mAddRegion.contains((int) event.getX(), (int) event.getY())) {
   onAddClick();
   return true;
   } else if (mDelRegion.contains((int) event.getX(), (int) event.getY())) {
   onDelClick();
   return true;
   }
  }
  break;
  case MotionEvent.ACTION_MOVE:
  break;
  case MotionEvent.ACTION_UP:
  case MotionEvent.ACTION_CANCEL:
  break;
 }
 return super.onTouchEvent(event);
 }

protected void onDelClick() {
 if (mCount > 0) {
  mCount--;
  onCountDelSuccess();
 }
 }
 protected void onAddClick() {
 if (mCount < mMaxCount) {
  mCount++;
  onCountAddSuccess();
 } else {
 }
 }
 /**
 * 數(shù)量增加成功后，使用者回調(diào)
 */
 public void onCountAddSuccess() {
 if (mCount == 1) {
  cancelAllAnim();
  mAnimReduceHint.start();
 } else {
  mAnimFraction = 0;
  invalidate();
 }
 }
 /**
 * 數(shù)量減少成功后，使用者回調(diào)
 */
 public void onCountDelSuccess() {
 if (mCount == 0) {
  cancelAllAnim();
  mAniDel.start();
 } else {
  mAnimFraction = 0;
  invalidate();
 }
 }

//動畫的基準值 動畫：減 0~1, 加 1~0 
 // 普通狀態(tài)下是0
 protected float mAnimFraction;
 //提示語收縮動畫 0-1 展開1-0
 //普通模式時，應該是1， 只在 isHintMode true 才有效
 protected float mAnimExpandHintFraction;

//背景
  mHintPaint.setColor(mHintBgColor);
  RectF rectF = new RectF(mLeft + (mWidth - mRadius * 2) * mAnimExpandHintFraction, mTop
   , mWidth - mCircleWidth, mHeight - mCircleWidth);
  canvas.drawRoundRect(rectF, mHintBgRoundValue, mHintBgRoundValue, mHintPaint);

//動畫 mAnimFraction ：減 0~1, 加 1~0 ,
  //動畫位移Max,
  float animOffsetMax = (mRadius * 2 +mGapBetweenCircle);
  //透明度動畫的基準
  int animAlphaMax = 255;
  int animRotateMax = 360;
  //左邊
  //背景 圓
  mDelPaint.setAlpha((int) (animAlphaMax * (1 - mAnimFraction)));
  mDelPath.reset();
  //改變圓心的X坐標，實現(xiàn)位移
  mDelPath.addCircle(animOffsetMax * mAnimFraction + mLeft + mRadius, mTop + mRadius, mRadius, Path.Direction.CW);
  canvas.drawPath(mDelPath, mDelPaint);

//前景 -
  //旋轉(zhuǎn)動畫
  canvas.save();
  canvas.translate(animOffsetMax * mAnimFraction + mLeft + mRadius, mTop + mRadius);
  canvas.rotate((int) (animRotateMax * (1 - mAnimFraction)));
  canvas.drawLine(-mRadius / 2, 0,
   +mRadius / 2, 0,
   mDelPaint);
  canvas.restore();

 //數(shù)量
  canvas.save();
  //平移動畫
  canvas.translate(mAnimFraction * (mGapBetweenCircle / 2 - mTextPaint.measureText(mCount + "") / 2 + mRadius), 0);
  //旋轉(zhuǎn)動畫,旋轉(zhuǎn)中心點，x 是繪圖中心,y 是控件中心
  canvas.rotate(360 * mAnimFraction,
  mGapBetweenCircle / 2 + mLeft + mRadius * 2 ,
   mTop + mRadius);
  //透明度動畫
  mTextPaint.setAlpha((int) (255 * (1 - mAnimFraction)));
  //是沒有動畫的普通寫法,x left, y baseLine
  canvas.drawText(mCount + "", mGapBetweenCircle / 2 - mTextPaint.measureText(mCount + "") / 2 + mLeft + mRadius * 2, mTop + mRadius - (mFontMetrics.top + mFontMetrics.bottom) / 2, mTextPaint);
  canvas.restore();

 //動畫 +
 mAnimAdd = ValueAnimator.ofFloat(1, 0);
 mAnimAdd.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  mAnimFraction = (float) animation.getAnimatedValue();
  invalidate();
  }
 });
 mAnimAdd.setDuration(350);
 //提示語收縮動畫 0-1
 mAnimReduceHint = ValueAnimator.ofFloat(0, 1);
 mAnimReduceHint.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  mAnimExpandHintFraction = (float) animation.getAnimatedValue();
  invalidate();
  }
 });
 mAnimReduceHint.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
  if (mCount == 1) {
   //然后底色也不顯示了
   isHintMode = false;
  }
  if (mCount == 1) {
   Log.d(TAG, "現(xiàn)在還是1 開始收縮動畫");
   if (mAnimAdd != null && !mAnimAdd.isRunning()) {
   mAnimAdd.start();
   }
  }
  }
  @Override
  public void onAnimationStart(Animator animation) {
  if (mCount == 1) {
   //先不顯示文字了
   isShowHintText = false;
  }
  }
 });
 mAnimReduceHint.setDuration(350);
 //動畫 -
 mAniDel = ValueAnimator.ofFloat(0, 1);
 mAniDel.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  mAnimFraction = (float) animation.getAnimatedValue();
  invalidate();
  }
 });
 //1-0的動畫
 mAniDel.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
  if (mCount == 0) {
   Log.d(TAG, "現(xiàn)在還是0onAnimationEnd() called with: animation = [" + animation + "]");
   if (mAnimExpandHint != null && !mAnimExpandHint.isRunning()) {
   mAnimExpandHint.start();
   }
  }
  }
 });
 mAniDel.setDuration(350);
 //提示語展開動畫
 //分析這個動畫，最初是個圓。 就是left 不斷減小
 mAnimExpandHint = ValueAnimator.ofFloat(1, 0);
 mAnimExpandHint.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  mAnimExpandHintFraction = (float) animation.getAnimatedValue();
  invalidate();
  }
 });
 mAnimExpandHint.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
  if (mCount == 0) {
   isShowHintText = true;
  }
  }
  @Override
  public void onAnimationStart(Animator animation) {
  if (mCount == 0) {
   isHintMode = true;
  }
  }
 });
 mAnimExpandHint.setDuration(350);

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int wMode = MeasureSpec.getMode(widthMeasureSpec);
 int wSize = MeasureSpec.getSize(widthMeasureSpec);
 int hMode = MeasureSpec.getMode(heightMeasureSpec);
 int hSize = MeasureSpec.getSize(heightMeasureSpec);
 switch (wMode) {
  case MeasureSpec.EXACTLY:
  break;
  case MeasureSpec.AT_MOST:
  //不超過父控件給的范圍內(nèi)，自由發(fā)揮
  int computeSize = (int) (getPaddingLeft() + mRadius * 2 +mGapBetweenCircle + mRadius * 2 + getPaddingRight() + mCircleWidth * 2);
  wSize = computeSize < wSize ? computeSize : wSize;
  break;
  case MeasureSpec.UNSPECIFIED:
  //自由發(fā)揮
  computeSize = (int) (getPaddingLeft() + mRadius * 2 + mGapBetweenCircle + mRadius * 2 + getPaddingRight() + mCircleWidth * 2);
  wSize = computeSize;
  break;
 }
 switch (hMode) {
  case MeasureSpec.EXACTLY:
  break;
  case MeasureSpec.AT_MOST:
  int computeSize = (int) (getPaddingTop() + mRadius * 2 + getPaddingBottom() + mCircleWidth * 2);
  hSize = computeSize < hSize ? computeSize : hSize;
  break;
  case MeasureSpec.UNSPECIFIED:
  computeSize = (int) (getPaddingTop() + mRadius * 2 + getPaddingBottom() + mCircleWidth * 2);
  hSize = computeSize;
  break;
 }
 setMeasuredDimension(wSize, hSize);
 //復用時會走這里，所以初始化一些UI顯示的參數(shù)
 mAnimFraction = 0;
 initHintSettings();
 }
 /**
 * 根據(jù)當前count數(shù)量 初始化 hint提示語相關變量
 */
 private void initHintSettings() {
 if (mCount == 0) {
  isHintMode = true;
  isShowHintText = true;
  mAnimExpandHintFraction = 0;
 } else {
  isHintMode = false;
  isShowHintText = false;
  mAnimExpandHintFraction = 1;
 }
 }

 /**
 * 設置當前數(shù)量
 * @param count
 * @return
 */
 public AnimShopButton setCount(int count) {
 mCount = count;
 //先暫停所有動畫
 if (mAnimAdd != null && mAnimAdd.isRunning()) {
  mAnimAdd.cancel();
 }
 if (mAniDel != null && mAniDel.isRunning()) {
  mAniDel.cancel();
 }
 //復用機制的處理
 if (mCount == 0) {
  // 0 不顯示 數(shù)字和-號
  mAnimFraction = 1;
 } else {
  mAnimFraction = 0;
 }
 initHintSettings();
 return this;
 }