前几天收到这么一个需求，本来以为挺简单的，没想到最后发现实现起来还是有点小麻烦的，在这里小小的总结一下。
先看看下面这张需求的样图：
然后在看一下最终实现的效果图，可能是gif录制软件的问题，有一些浮影，忽略就好了：
首先要分析一下最核心的地方，如何获取到滑动距离对应的弧长，看图：
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，因此不可能简单的限定上下限。没有做任何判断的话，在起点处是可以随意滑动的，如下图所示：
很明显这样是不行的，然后就是一阵鸡飞狗跳，简（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自定义控件之可拖动控制的圆环控制条实例代码，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
android:screenOrientation=“portrait“ 一直警告报红
Codeforces C. A Cookie for You (模拟 / 分类 / 贪心) (Round #654 Div.2)
DialogFragment弹窗（带黑色透明背景和不带黑色透明背景）
网友评论