自定义控件-扇形菜单
2020-04-19 本文已影响0人
天敦敦
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;
}