欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义控件之可拖动控制的圆环控制条实例代码

程序员文章站 2022-06-14 17:43:45
前几天收到这么一个需求,本来以为挺简单的,没想到最后发现实现起来还是有点小麻烦的,在这里小小的总结一下。 先看看下面这张需求的样图: 然后在看一下最终实现的效果图,...

前几天收到这么一个需求,本来以为挺简单的,没想到最后发现实现起来还是有点小麻烦的,在这里小小的总结一下。

先看看下面这张需求的样图:

Android自定义控件之可拖动控制的圆环控制条实例代码

然后在看一下最终实现的效果图,可能是gif录制软件的问题,有一些浮影,忽略就好了:

Android自定义控件之可拖动控制的圆环控制条实例代码

首先要分析一下最核心的地方,如何获取到滑动距离对应的弧长,看图:

Android自定义控件之可拖动控制的圆环控制条实例代码

p1是手指按下的点,很明显要想知道当前进度弧边的值,就是要求出角d的值。
以p为圆心点,atan(b)=math.atan((-p.y)/(-p.x));

所以角d的值为:math.todegrees(atan);

那么角b的值就得出来了,b=math.todegrees(atan) + mprogressoffest;

图中的圆可以分为四个象限,同理可以得出四个象限中求得弧长的方法:

 /**
   * 更新当前进度对应弧度
   *
   * @param x 按下x坐标点
   * @param y 按下y坐标点
   */
  private void updatecurrentangle(float x, float y) {
    //根据坐标转换成对应的角度
    float pointx = x - mcenterx;
    float pointy = y - mcentery;
    float tan_x;//根据左边点所在象限处理过后的x值
    float tan_y;//根据左边点所在象限处理过后的y值
    double atan;//所在象限弧边angle

    //01:第一象限-右上角区域
    if (pointx >= 0 && 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:第二象限-左上角区域
    if (pointx <= 0 && pointy <= 0) {
      tan_x = pointx * (-1);
      tan_y = pointy * (-1);
      atan = math.atan(tan_y / tan_x);//求弧边
      mcurrentangle = (int) math.todegrees(atan) + mprogressoffest;
    }

    //03:第三象限-左下角区域
    if (pointx <= 0 && 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:第四象限-右下角区域
    if (pointx >= 0 && pointy >= 0) {
      tan_x = pointx;
      tan_y = pointy;
      atan = math.atan(tan_y / tan_x);//求弧边
      mcurrentangle = (int) math.todegrees(atan) + 180.f + mprogressoffest;
    }
  }

获取手指按下的区域,避免误判断:

 /**
   * 按下时判断按下的点是否按在圆环范围内
   *
   * @param x x坐标点
   * @param y y坐标点
   */
  private boolean istoucharc(float x, float y) {
    double d = gettouchradius(x, y);
    return d >= mminvalidatetoucharcradius && d <= mmaxvalidatetoucharcradius;
  }

  /**
   * 计算某点到圆点的距离
   *
   * @param x x坐标点
   * @param y y坐标点
   */
  private double gettouchradius(float x, float y) {
    float cx = x - getwidth() / 2;
    float cy = y - getheight() / 2;
    return math.hypot(cx, cy);
  }

绘制bitmap;

/**
   * 绘制小圆点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进行缩放,也可以通过限定rect来限定bitmap大小
    canvas.drawbitmap(mdragbitmap, left, top, mbitmappaint);
  }

重写ontouchevent事件;

@override
  public boolean ontouchevent(motionevent event) {
    //获取点击位置的坐标
    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;
  }

到这里基本这个自定义控件也就实现完了。但是!是不是!忘了点!什么?没错,就是让我蛋疼不已的圆环上下限值判断。

由于手指滑动的时候,当前的angle值的范围是0-360,因此不可能简单的限定上下限。没有做任何判断的话,在起点处是可以随意滑动的,如下图所示:

Android自定义控件之可拖动控制的圆环控制条实例代码

很明显这样是不行的,然后就是一阵鸡飞狗跳,简(ou)简(xin)单(li)单(xue)的一阵折腾之后,基本实现了要求,最后更新currentangle的代码如下:

  /**
   * 更新当前进度对应弧度
   *
   * @param x 按下x坐标点
   * @param y 按下y坐标点
   */
  private void updatecurrentangle(float x, float y) {
    //根据坐标转换成对应的角度
    float pointx = x - mcenterx;
    float pointy = y - mcentery;
    float tan_x;//根据左边点所在象限处理过后的x值
    float tan_y;//根据左边点所在象限处理过后的y值
    double atan;//所在象限弧边angle

    //01:第一象限-右上角区域
    //保证dragbitmap在峰值的时候不会因为滑到这个象限更新currentangle
    if (pointx >= 0 && pointy <= 0) {
      if (((mlastquadrant == 3 && mlastangle == 359.f)
          || (mlastquadrant == 3 && mlastangle == 0.f))
          && 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:第二象限-左上角区域
    if (pointx <= 0 && pointy <= 0) {
      if (((mlastquadrant == 3 && mlastangle == 359.f)
          || (mlastquadrant == 3 && mlastangle == 0.f))
          && 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:第三象限-左下角区域
    if (pointx <= 0 && 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:第四象限-右下角区域
    //保证dragbitmap在峰值的时候不会因为滑到这个象限更新currentangle
    if (pointx >= 0 && pointy >= 0) {
      if (((mlastquadrant == 3 && mlastangle == 359.f)
          || (mlastquadrant == 3 && mlastangle == 0.f))
          && 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;
  }

其实做之前就真的觉得是挺简单的一个自定义控件,结果万万没想到因为最后这么一点代码折腾了半天。虽然最后这坨代码看着确实挺蛋疼的,但是暂时也想不到什么好的方法了,先这样吧。

最后贴上完整代码:

https://github.com/horrarndoo...

总结

以上所述是小编给大家介绍的android自定义控件之可拖动控制的圆环控制条实例代码,希望对大家有所帮助