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;
}
