Screenshot_1587223993.png

简介：简单实现一个扇形菜单，及点击事件绑定。

1、创建SectorMenuView 继承自 View 主要实现 两个 方法 onMeasure，onDraw

1.1 、onMeasure(int widthMeasureSpec, int heightMeasureSpec)

widthMeasureSpec，heightMeasureSpec 用来表示一个组件的大小，这个int变量里面不仅有组件的尺寸大小，还有大小的模式。

系统采用int类型32位中最高的2位表示组件的三种大小模式：

1.1.1、精确模式（MeasureSpec.EXACTLY）

在这种模式下，尺寸的值是多少，那么这个组件的长或宽就是多少。

1.1.2、最大模式（MeasureSpec.AT_MOST）

这个也就是父组件，能够给出的最大的空间，当前组件的长或宽最大只能为这么大，当然也可以比这个小。

1.1.3、未指定模式（MeasureSpec.UNSPECIFIED）

这个就是说，当前组件，可以随便用空间，不受限制。

1.1.4 使用

可以通过 MeasureSpec.getMode() 获取模式类型，MeasureSpec.getSize()获取值。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    saveSize(measureWH(widthMeasureSpec), measureWH(heightMeasureSpec));
}

private int measureWH(int measureSpec) {

    int result;
    int specMode = MeasureSpec.getMode(measureSpec);
    int specSize = MeasureSpec.getSize(measureSpec);
    if (specMode == MeasureSpec.EXACTLY) {
        result = specSize;
    } else {
        result = MIN_W_OR_H;
        if (specMode == MeasureSpec.AT_MOST) {
            result = Math.min(specSize, result);
        }
    }
    return result;
}

1.2 onDraw(Canvas canvas)

用来绘制需要显示的图形，此处绘制扇形。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    float startAngle = START_ANGLE;

    for (SectorItem item : mSectorItemList) {
        float sweepAngle = item.getPercentage() * 360 / 100f;
        mPaint.setColor(item.getColor());
        if (item.isSelected) {
            mPaint.setAlpha(100);
        }
        canvas.drawArc(mRectF, startAngle, sweepAngle, true, mPaint);
        startAngle += sweepAngle;
        item.angle = startAngle - START_ANGLE;
        Log.e("ww==", "startAngle == " + item.angle);
    }
}

1.2.1 canvas.drawArc(mRectF, startAngle, sweepAngle, true, mPaint);

mRectF：表示绘制图形所在的矩形区域
startAngle：起始角度，3点钟方向为0度
sweepAngle：弧所对应的角度
useCenter：是否显示圆心
mPaint：画笔

1.2.2 RectF 表示绘制图形所在的矩形区域

image.png

事件绑定，点击区域计算

原理：用户当前控件绘制的是圆形中的扇形，相当于分割圆形，所以点击事件必然会在圆，即

Math.pow(event.getX() - mCentral.x, 2) + Math.pow(event.getY() - mCentral.y, 2) < Math.pow(mRadius, 2).

然后通过计算当前点击点与起始扇形的第一条边的夹角，用来逐个与绘制扇形对应夹角进行匹配，判断点击范围。

@Override
public boolean onTouch(View v, MotionEvent event) {

    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        boolean result = clickCheck(event);
        if (result) {
            invalidate();
        }
        return result;
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        if (clickPosition != -1) {
            mSectorItemList.get(clickPosition).isSelected = false;
            clickPosition = -1;
            invalidate();
        }
        return true;
    }
    return true;
}

private boolean clickCheck(MotionEvent event) {
    double distancePow = Math.pow(event.getX() - mCentral.x, 2) + Math.pow(event.getY() - mCentral.y, 2);
    if (distancePow < Math.pow(mRadius, 2)) {
        int x = (int) (event.getX() - mCentral.x);
        int y = (int) (event.getY() - mCentral.y);
        double compAngle = 0;
        if (x >= 0 && y >= 0) {
            compAngle = 0;
        } else if (x < 0) {
            compAngle = 180;
        } else {
            compAngle = 360;
        }
        double degree = Math.atan((event.getY() - mCentral.y) / (event.getX() - mCentral.x)) / (Math.PI/180) + compAngle - START_ANGLE;
        if (degree < 0) {
            degree += 360;
        }
        for(SectorItem item : mSectorItemList) {
            if (item.angle > degree) {
                clickPosition = mSectorItemList.indexOf(item);
                item.isSelected = true;
                break;
            }
        }
        return true;
    }
    return false;
}