Android自定義控件之實(shí)現(xiàn)可拖動(dòng)控制的圓環(huán)控制條

小編給大家分享一下Android自定義控件之實(shí)現(xiàn)可拖動(dòng)控制的圓環(huán)控制條，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

先看看下面這張需求的樣圖：

然后在看一下最終實(shí)現(xiàn)的效果圖，可能是gif錄制軟件的問題，有一些浮影，忽略就好了：

首先要分析一下最核心的地方，如何獲取到滑動(dòng)距離對(duì)應(yīng)的弧長，看圖：

p1是手指按下的點(diǎn)，很明顯要想知道當(dāng)前進(jìn)度弧邊的值，就是要求出角d的值。
以p為圓心點(diǎn)，atan(b)=Math.atan((-p.y)/(-p.x));

所以角d的值為：Math.toDegrees(atan);


那么角b的值就得出來了，b=Math.toDegrees(atan) + mProgressOffest;

圖中的圓可以分為四個(gè)象限，同理可以得出四個(gè)象限中求得弧長的方法：

 /**
   * 更新當(dāng)前進(jìn)度對(duì)應(yīng)弧度
   *
   * @param x 按下x坐標(biāo)點(diǎn)
   * @param y 按下y坐標(biāo)點(diǎn)
   */
  private void updateCurrentAngle(float x, float y) {
    //根據(jù)坐標(biāo)轉(zhuǎn)換成對(duì)應(yīng)的角度
    float pointX = x - mCenterX;
    float pointY = y - mCenterY;
    float tan_x;//根據(jù)左邊點(diǎn)所在象限處理過后的x值
    float tan_y;//根據(jù)左邊點(diǎn)所在象限處理過后的y值
    double atan;//所在象限弧邊angle

    //01：第一象限-右上角區(qū)域
    if (pointX >= 0 &amp;&amp; pointY <= 0) {
      tan_x = pointX;
      tan_y = pointY * (-1);
      atan = Math.atan(tan_x / tan_y);//求弧邊
      mCurrentAngle = (int) Math.toDegrees(atan) + 90.f + mProgressOffest;
    }

    //02：第二象限-左上角區(qū)域
    if (pointX <= 0 &amp;&amp; pointY <= 0) {
      tan_x = pointX * (-1);
      tan_y = pointY * (-1);
      atan = Math.atan(tan_y / tan_x);//求弧邊
      mCurrentAngle = (int) Math.toDegrees(atan) + mProgressOffest;
    }

    //03：第三象限-左下角區(qū)域
    if (pointX <= 0 &amp;&amp; pointY >= 0) {
      tan_x = pointX * (-1);
      tan_y = pointY;
      atan = Math.atan(tan_x / tan_y);//求弧邊
      if ((int) Math.toDegrees(atan) >= (90.f - mProgressOffest)) {
        mCurrentAngle = (int) Math.toDegrees(atan) - (90.f - mProgressOffest);
      } else {
        mCurrentAngle = (int) Math.toDegrees(atan) + 270.f + mProgressOffest;
      }
    }

    //04：第四象限-右下角區(qū)域
    if (pointX >= 0 &amp;&amp; pointY >= 0) {
      tan_x = pointX;
      tan_y = pointY;
      atan = Math.atan(tan_y / tan_x);//求弧邊
      mCurrentAngle = (int) Math.toDegrees(atan) + 180.f + mProgressOffest;
    }
  }

獲取手指按下的區(qū)域，避免誤判斷：

 /**
   * 按下時(shí)判斷按下的點(diǎn)是否按在圓環(huán)范圍內(nèi)
   *
   * @param x x坐標(biāo)點(diǎn)
   * @param y y坐標(biāo)點(diǎn)
   */
  private boolean isTouchArc(float x, float y) {
    double d = getTouchRadius(x, y);
    return d >= mMinValidateTouchArcRadius &amp;&amp; d <= mMaxValidateTouchArcRadius;
  }

  /**
   * 計(jì)算某點(diǎn)到圓點(diǎn)的距離
   *
   * @param x x坐標(biāo)點(diǎn)
   * @param y y坐標(biāo)點(diǎn)
   */
  private double getTouchRadius(float x, float y) {
    float cx = x - getWidth() / 2;
    float cy = y - getHeight() / 2;
    return Math.hypot(cx, cy);
  }

繪制bitmap；

/**
   * 繪制小圓點(diǎn)bitmap
   *
   * @param canvas canvas
   */
  private void drawDragBitmap(Canvas canvas) {
    PointF progressPoint = ChartUtils.calcArcEndPointXY(mCenterX, mCenterY, mRadius,
        mCurrentAngle, 180.f - mProgressOffest);

    int left = (int) progressPoint.x - mDragBitmap.getWidth() / 2;
    int top = (int) progressPoint.y - mDragBitmap.getHeight() / 2;

    //    mBitmapRect = new Rect(left, top, left + mDragBitmap.getWidth(), top +
    //        mDragBitmap.getHeight());
    //
    //    canvas.drawBitmap(mDragBitmap,
    //        new Rect(0, 0, mDragBitmap.getWidth(), mDragBitmap.getHeight()),
    //        mBitmapRect, mBitmapPaint);
    //bitmap直接使用BitmapUtils中的縮放方法縮放，可以不用Rect進(jìn)行縮放，也可以通過限定Rect來限定bitmap大小
    canvas.drawBitmap(mDragBitmap, left, top, mBitmapPaint);
  }

重寫onTouchEvent事件；

@Override
  public boolean onTouchEvent(MotionEvent event) {
    //獲取點(diǎn)擊位置的坐標(biāo)
    float x = event.getX();
    float y = event.getY();
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        if (isTouchArc(x, y)) {
          mTouchQuadrant = getTouchQuadrant(x, y);
          mIsTouchOnArc = true;
          updateCurrentAngle(x, y);
          return true;
        }
        break;
      case MotionEvent.ACTION_MOVE:
        if (mIsTouchOnArc) {
          updateCurrentAngle(x, y);
          if (mOnCirqueProgressChangeListener != null)
            mOnCirqueProgressChangeListener.onChange(mMinProgress, mMaxProgress,
                Integer.parseInt(mText.replace("℃", "")));
        }
        break;
      case MotionEvent.ACTION_UP:
        mIsTouchOnArc = false;
        mTouchQuadrant = 0;
        if (mOnCirqueProgressChangeListener != null)
          mOnCirqueProgressChangeListener.onChangeEnd(mMinProgress, mMaxProgress,
              Integer.parseInt(mText.replace("℃", "")));
        break;
    }

    invalidate();
    return true;
  }

到這里基本這個(gè)自定義控件也就實(shí)現(xiàn)完了。但是！是不是！忘了點(diǎn)！什么？沒錯(cuò)，就是讓我蛋疼不已的圓環(huán)上下限值判斷。

由于手指滑動(dòng)的時(shí)候，當(dāng)前的angle值的范圍是0-360，因此不可能簡單的限定上下限。沒有做任何判斷的話，在起點(diǎn)處是可以隨意滑動(dòng)的，如下圖所示：

很明顯這樣是不行的，然后就是一陣雞飛狗跳，簡（ou）簡（xin）單（li）單（xue）的一陣折騰之后，基本實(shí)現(xiàn)了要求，最后更新currentAngle的代碼如下：

  /**
   * 更新當(dāng)前進(jìn)度對(duì)應(yīng)弧度
   *
   * @param x 按下x坐標(biāo)點(diǎn)
   * @param y 按下y坐標(biāo)點(diǎn)
   */
  private void updateCurrentAngle(float x, float y) {
    //根據(jù)坐標(biāo)轉(zhuǎn)換成對(duì)應(yīng)的角度
    float pointX = x - mCenterX;
    float pointY = y - mCenterY;
    float tan_x;//根據(jù)左邊點(diǎn)所在象限處理過后的x值
    float tan_y;//根據(jù)左邊點(diǎn)所在象限處理過后的y值
    double atan;//所在象限弧邊angle

    //01：第一象限-右上角區(qū)域
    //保證dragBitmap在峰值的時(shí)候不會(huì)因?yàn)榛竭@個(gè)象限更新currentAngle
    if (pointX >= 0 &amp;&amp; pointY <= 0) {
      if (((mLastQuadrant == 3 &amp;&amp; mLastAngle == 359.f)
          || (mLastQuadrant == 3 &amp;&amp; mLastAngle == 0.f))
          &amp;&amp; mTouchQuadrant != 1)
        return;

      tan_x = pointX;
      tan_y = pointY * (-1);
      atan = Math.atan(tan_x / tan_y);//求弧邊
      mCurrentAngle = (int) Math.toDegrees(atan) + 90.f + mProgressOffest;
      mLastQuadrant = 1;
    }

    //02：第二象限-左上角區(qū)域
    if (pointX <= 0 &amp;&amp; pointY <= 0) {
      if (((mLastQuadrant == 3 &amp;&amp; mLastAngle == 359.f)
          || (mLastQuadrant == 3 &amp;&amp; mLastAngle == 0.f))
          &amp;&amp; mTouchQuadrant != 2) {
        return;
      }

      tan_x = pointX * (-1);
      tan_y = pointY * (-1);
      atan = Math.atan(tan_y / tan_x);//求弧邊
      mCurrentAngle = (int) Math.toDegrees(atan) + mProgressOffest;
      mLastQuadrant = 2;
    }

    //03：第三象限-左下角區(qū)域
    if (pointX <= 0 &amp;&amp; pointY >= 0) {
      tan_x = pointX * (-1);
      tan_y = pointY;
      atan = Math.atan(tan_x / tan_y);//求弧邊
      if ((int) Math.toDegrees(atan) >= (90.f - mProgressOffest)) {
        mCurrentAngle = (int) Math.toDegrees(atan) - (90.f - mProgressOffest);
        if (mLastAngle >= 270.f) {
          mCurrentAngle = 359.f;
        }
      } else {
        mCurrentAngle = (int) Math.toDegrees(atan) + 270.f + mProgressOffest;
        if (mLastAngle <= 90.f) {
          mCurrentAngle = 0.f;
        }
      }
      mLastQuadrant = 3;
    }

    //04：第四象限-右下角區(qū)域
    //保證dragBitmap在峰值的時(shí)候不會(huì)因?yàn)榛竭@個(gè)象限更新currentAngle
    if (pointX >= 0 &amp;&amp; pointY >= 0) {
      if (((mLastQuadrant == 3 &amp;&amp; mLastAngle == 359.f)
          || (mLastQuadrant == 3 &amp;&amp; mLastAngle == 0.f))
          &amp;&amp; mTouchQuadrant != 4)
        return;

      tan_x = pointX;
      tan_y = pointY;
      atan = Math.atan(tan_y / tan_x);//求弧邊
      mCurrentAngle = (int) Math.toDegrees(atan) + 180.f + mProgressOffest;
      mLastQuadrant = 4;
    }
    mLastAngle = mCurrentAngle;
  }

其實(shí)做之前就真的覺得是挺簡單的一個(gè)自定義控件，結(jié)果萬萬沒想到因?yàn)樽詈筮@么一點(diǎn)代碼折騰了半天。雖然最后這坨代碼看著確實(shí)挺蛋疼的，但是暫時(shí)也想不到什么好的方法了，先這樣吧。

以上是“Android自定義控件之實(shí)現(xiàn)可拖動(dòng)控制的圓環(huán)控制條”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！