Android简单转盘的实现

一、简介
在Android的菜鸟路上，学习自定义控件，掌握了一点东西就想实践一下，这时候刚好有个需求需要实现一个简单转盘的效果，那就动手去尝试一下，封装就…,只当做是自己的练习吧。效果图如下（点击可以让箭头旋转）：

二、思路和主要代码
1、圆环部分的实现。先画一个蓝色的大圆，再画一个白色的小圆，前提是要设置相同的圆心，半径部分就可以自己去定义。主要代码：

// 从canvas层面去除绘制时锯齿
        canvas.setDrawFilter(drawFilter);
        // 画圆环
        paint.setColor(blue2);
        canvas.drawCircle(width / 2, height / 2, big_width, paint);
        paint.setColor(pure_white);
        canvas.drawCircle(width / 2, height / 2, small_width, paint);

画圆环
2、两条相交的直线。先让画布以圆心为中心点旋转45度，然后再画两条互相垂直的直线即可。代码如下：

       // 画两条直线
        canvas.rotate(45, width / 2, height / 2);
        paint.setColor(pure_white);
        paint.setStrokeWidth(dip2px(getContext(), 1));
        canvas.drawLine(width / 2 - big_width, big_width,
                width / 2 + big_width, big_width, paint);
        canvas.drawLine(width / 2, height / 2 - big_width, width / 2, height/ 2 + big_width, paint);
        canvas.restore();
        drawMyText(canvas, paint);
        drawTriagle(canvas, paint);

3、画三角形即图中的箭头。因为这三角形是需要转动，所以需要设置canvas的旋转的角度，再去画三角形。一开始设置三角形是在左边的，因此先确定三角形的三个顶点，然后在用Path类来画出三角形，至于旋转其实就是利用canvas.rotate(degree, width / 2, height / 2);要注意的是旋转的中心点是圆心，就可以让三角形围绕白色圆形转动了。不然就看不到旋转的三角形了。代码如下：

    Path path = new Path();
    // path.setFillType(FillType.WINDING);
    paint.setColor(pure_white);
    // 三角形的三个顶点
    int x1, y1, x2, y2, x3, y3;
    canvas.save();
    //旋转
    canvas.rotate(degree, width / 2, height / 2);
    isRoating = false;
    x1 = width / 2 - (small_width + triagle_length);
    y1 = height / 2;
    x2 = x1 + (triagle_length + 10);
    y2 = height / 2 - (triagle_length + 10);
    x3 = x2;
    y3 = height / 2 + (triagle_length + 10);
    path.moveTo(x1, y1);
    path.lineTo(x2, y2);
    path.lineTo(x3, y3);
    path.close(); // 使这些点构成封闭的多边形
    canvas.drawPath(path, paint);
    canvas.restore();

画三角形
4、画文本。x坐标的是很容易确定的，y坐标我取的是文本的底部，所以需要使用以下方法来获取文本的范围。

paint.setColor(pure_white);
paint.setTextSize(fourTextSize);// 以像素为单位
Rect rbound = new Rect();
//左边的文字
paint.getTextBounds(leftText, 0, leftText.length(), rbound);
canvas.drawText(leftText, width / 2 - big_width + textPadding,
height / 2+rbound.height()/2, paint);

获取文本的大小
之后就是画出具体的内容了，其它的文本也是类似。

5、设置控件的点击事件。
（1）判断点击是否落在圆环上。其实就是点到圆心的距离要大于小园的半径同时小于大圆的半径，这时候就能看出之前采用两个圆组合成圆环的好处了。

private boolean isInCircle(float x, float y) {
float distance = (float) Math.sqrt((x-width/2)(x-width/2)+(y-height/2)(y-height/2));
if(distance>small_width&&distance

（2）判断点落在哪一个区域。首先要计算出两条直线的表达式，要注意的是Android里面的坐标系竖直向下方向才是y轴的正方向。然后根据它在哪一条直线的上方和哪一条直线的下方等方向来判断。比如最左边的区域其实就是在倾斜角为45度直线的上方和另外一条直线的下方，这时候只需要判断y值就可以了。
private int whichEdge(float x, float y) {
        int flag = -1;
        // 倾斜角为45度，右边那条直线y=-x+width/2+height/2;
        // 左边的直线为：y=x-(width/2-height/2),都转为andorid 坐标系了
        float y2 = -x + width / 2 + height / 2;
        float y3 = x - (width / 2 - height / 2);
//      Log.e("点范围", "y2=" + y2 + " y3=" + y3 + " y=" + y);
        if (y > y3 && y < y2)
            flag = 0;// 在左侧范围
        if (y < y3 && y < y2)
            flag = 1;// 上边范围
        if (y < y3 && y > y2)
            flag = 2;// 右边范围
        if (y > y3 && y > y2)
            flag = 3;// 底部范围
        return flag;
    }


（3）计算三角形要旋转的角度，这个就用暴力法来做，直接判断当前的位置和要旋转到的位置来设置它们的角度。暂时没想到其它的算法就只好将就了。

（4）使用属性动画让三角形转起来。两个参数分别是三角形当前的角度和要旋转到的角度，然后在onAnimationUpdate回调方法里获取到当前的值，最后调用postInvalidate()方法重新绘图。

private void startAnim(){
ValueAnimator anim = ValueAnimator.ofInt(degree,degree2);
if(Math.abs(degree2-degree)==90){//旋转90度
anim.setDuration(rotateTime2);
}else{
//旋转180度
anim.setDuration(rotateTime);
}
anim.addUpdateListener(new AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            degree = (int) animation.getAnimatedValue();
            postInvalidate();
        }
    });
    anim.start();
}

“`

开始旋转
（5）重写onTouchEvent方法。
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if(isRoating)return true;
float downX = event.getX();
float downY = event.getY();
if (isInCircle(downX, downY)) {
int flag = whichEdge(downX, downY);
if (flag > -1) {
// 箭头指向
changeAngle(flag);
return true;
}
} else {
// 不在圆上
return false;
}
}
return true;
}

三、总结。
这是我学习了自定义控件的基础知识之后的实践，算是入门了，当然肯定会有很多不足的地方，慢慢来吧。我觉得遇到没做过的东西，主要就是要有自己的想法，虽然有可能不完美，但是至少是自己的东西。
源码下载