Android 自定义控件实现弹性旋转的圆形菜单

自定义控件实现弹性旋转的圆形菜单

写这个之前参考了一下其他类似的控件，自己实现了一下并做如下记录

使用到的包含“事件拦截”、“三角函数”、“View测量”、“View布局”

控件的效果图如下，旋转动画、弹性旋转、item点击

流程梳理

首先要实现一个圆形的菜单控件我们选择继承ViewGroup；

第一步考虑在onMeasure中对所有Child进行测量，测量完成后onLayout才可以获取到Child的测量宽高；

第二步考虑Child排版问题，也就是核心代码中onLayout的过程；

在这个过程中，定义了“当前旋转角度”、“旋转中心”、旋转半径；

获取容器内部Child个数，计算相邻Child角度间距；

在已知旋转中心、半径、当前旋转角度、相邻Child角度间距后就可以为Child排版啦；

这里根据角度及其所在象限，计算出该角度相对于每个象限的角度并计算其正切值；

在已知半径、正切值就可以通过三角函数tan(A)=a边/b边、勾股定理a²+b²=c²计算出a边长、b边长；

根据Child所在的象限，我们可以利用a边、b边计算出该Child中心点所在的坐标；

知道这样就可以对该Child进行布局了，即调用Child.onLayout(l,t,r,b)，布局时需要使用Child的测量宽高；

第三步考虑触摸事件的拦截，这里使用容器onInterceptTouchEvent 方法在滑动距离大于系统touchSlop时进行拦截；

一旦ViewGroup决定拦截该事件，那么后续的事件都会调用容器onTouchEvent；

我们在onTouchEvent 的Move时，计算前后2次事件的偏转角度来更改“当前选中角度”并要求容器重新布局 requestLayout(); 以此达到旋转的目的；

我们在onTouchEvent 的Up时计算本次旋转在1秒内旋转过的角度是否达到弹性旋转

如果需要弹性旋转则根据当前的速度，设定Runnable 进行弹性旋转；

代码块

控件的代码如下：

public class RotateView extends ViewGroup {
private static final String TAG = "RotateView";

/**
* 当前已旋转的角度 ，当改变该角度时，并重新布局则达到旋转的效果
*/
private float mCurAngle = 0f;
/**
* 记录每次旋转开始时的角度
*/
private float mStartRotateAngle;
/**
* 当前ViewGroup 旋转的中心点坐标
*/
private PointF mCenterPoint;
/**
* 围绕中心点旋转的半径
*/
private double mR;
/**
* 缓存每个Child 布局时所在的位置
*/
private PointF mChildPoint = new PointF();
/**
* 系统可检测的最小滑动距离
*/
private int touchSlop;
/**
* 记录每次MotionEvent 的坐标值
*/
private float mLastX;
private float mLastY;
/**
* 记录开始滑动的时间
*/
private long mStartRotateTime;
/**
* 触发弹性旋转的边界值
*/
private static final float ROTATE_RATE = 500;
/**
* 弹性旋转Runnable
*/
private RotateRunnable action;
/**
* 当前是否处于弹性旋转状态
*/
private boolean isFling;

public RotateView(Context context) {
this(context, null);
}

public RotateView(Context context, AttributeSet attrs) {
super(context, attrs);
mCenterPoint = new PointF();
touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//1、对每个Child进行测量 在测量之后才能获取到Child的 MeasureHeight 和MeasureWidth
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int width = getWidth();
int height = getHeight();
//2、初始化旋转的中心点
mCenterPoint.x = width / 2;
mCenterPoint.y = height / 2;
//3、初始化旋转的半径
mR = ((Math.min(width, height) / 2d) * 0.6d);
Log.i(TAG, "Angle=" + mCurAngle + " Cx=" + mCenterPoint.x + " Cy=" + mCenterPoint.y);
if (getChildCount() > 0) {
//4、每相邻的Child的角度间距
float mPerAngle = 360f / getChildCount();
//5、根据角度开启每个Child 排版过程
for (int i = 0; i < getChildCount(); i++) {
//6、计算当前Child角度 保证其在Child在 360>angle>=0
float angle = (mCurAngle + mPerAngle * i) % 360f;
if (angle < 0) { //比如Child当前角度为-30，那么它其实就是 360-30=330度是一样的
angle = 360f - Math.abs(angle) % 360f;
}
View child = getChildAt(i);
//7、计算当前Child位于哪个象限
int quadrant = getQuadrant(angle);
//8、计算该角度正切值 可能为0
double tanA = getTanA(quadrant, angle);
//9、根据正切值获取A边边长
double edgeA = getEdgeA(tanA);//A边
double edgeB = edgeA == 0 ? mR : edgeA / tanA;//B边
Log.i(TAG, "child=" + i + " 象限=" + quadrant);
//10、根据child所在象限 及 A边 B边 计算Child中心点位置坐标
computeChildLocation(quadrant, edgeA, edgeB);
//11、根据Child中心点坐标及Child大小 进行布局
layoutChild(child);
}
}
}

/**
* 根据Child中心点位置进行布局
*/
private void layoutChild(View child) {
int measuredHeight = child.getMeasuredHeight();
int measuredWidth = child.getMeasuredWidth();
int left = (int) (mChildPoint.x - measuredWidth / 2);
int top = (int) (mChildPoint.y - measuredHeight / 2);
int right = (int) (mChildPoint.x + measuredWidth / 2);
int bottom = (int) (mChildPoint.y + measuredHeight / 2);
child.layout(left, top, right, bottom);
}

/**
* 根据child所在象限  及A边 B边 计算其所在位置
*/
private void computeChildLocation(int quadrant, double edgeA, double edgeB) {
//1象限  tan A= y/x;  2象限 tan A =x/y ；3象限 y/x  ;4象限 x/y
switch (quadrant) {
case 1://第一象限
mChildPoint.x = (float) (mCenterPoint.x + edgeB);
mChildPoint.y = (float) (mCenterPoint.y - edgeA);
break;
case 2://第二象限
mChildPoint.x = (float) (mCenterPoint.x - edgeA);
mChildPoint.y = (float) (mCenterPoint.y - edgeB);
break;
case 3://第三象限
mChildPoint.x = (float) (mCenterPoint.x - edgeB);
mChildPoint.y = (float) (mCenterPoint.y + edgeA);
break;
default://第四象限
mChildPoint.x = (float) (mCenterPoint.x + edgeA);
mChildPoint.y = (float) (mCenterPoint.y + edgeB);
break;
}
}

/**
* 根据正切值获取A边长度
*/
private double getEdgeA(double tanA) {
if (tanA == 0) {//如果正切值=0 ，那边A边长度=0，B边长=半径
return 0;
} else {//否则根据直角三角函数 a²+b²=c² tan(A)= a/b
return Math.sqrt((mR * mR * tanA * tanA) / (1 + tanA * tanA));
}
}

/**
* 角度转弧度并获取正切值
*
* @param quadrant 象限
* @param angle    角度
* @return 正切值
*/
public double getTanA(int quadrant, float angle) {
float A;
switch (quadrant) {
case 1:
A = angle;
break;
case 2:
A = angle - 90;
break;
case 3:
A = angle - 180;
break;
default:
A = angle - 270;
break;
}
//角度转弧度  求正切值
return Math.tan(Math.toRadians(A));
}

/**
* 获取象限
*/
public int getQuadrant(float rAngle) {
if (rAngle >= 0 && rAngle < 90) {
return 1;
}
if (rAngle >= 90 && rAngle < 180) {
return 2;
}
if (rAngle >= 180 && rAngle < 270) {
return 3;
}
return 4;
}

public void setMCurAngle(float mCurAngle) {
this.mCurAngle = mCurAngle;
requestLayout();
}

public void startAnim() {
ObjectAnimator animator = ObjectAnimator.ofFloat(this, "MCurAngle", mCurAngle, mCurAngle + 720f);
animator.setDuration(5 * 1000);
animator.start();
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
float x = ev.getX();
float y = ev.getY();

boolean intercepted = false;
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
//Down首先判断当前是否处于弹性旋转状态
if (isFling) {//如果是则重置状态，并移除弹性旋转，也就是按下立刻停止旋转
isFling = false;
removeCallbacks(action);
return true;
}
break;
case MotionEvent.ACTION_MOVE: {
//判断滑动的距离 只有大于系统的可识别滑动距离则容器拦截事件
float diffX = Math.abs(x - mLastX);
float diffY = Math.abs(y - mLastY);
if (diffX >= touchSlop || diffY >= touchSlop) {
//记录开始旋转的角度
mStartRotateAngle = mCurAngle;
//记录开始旋转的时间
mStartRotateTime = System.currentTimeMillis();
intercepted = true;
}
}
break;
case MotionEvent.ACTION_UP:
break;
}
mLastX = x;
mLastY = y;

return intercepted;
}

@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();

switch (event.getAction()) {
case MotionEvent.ACTION_MOVE: {
//计算上一次事件所在的角度
float startAngle = getAngle(mLastX, mLastY);
//计算本次事件所在的角度
float endAngle = getAngle(x, y);
float changeAngle = startAngle - endAngle;
//获取当前事件所在的象限
int quadrant = getQuadrant(x, y);
float curAngle;
if (quadrant == 1 || quadrant == 4) {
curAngle = mCurAngle + changeAngle;
} else {
curAngle = mCurAngle - changeAngle;
}
//设置当前旋转角度并重新布局
setMCurAngle(curAngle);
}
break;
case MotionEvent.ACTION_UP: {
long rotateDuration = System.currentTimeMillis() - mStartRotateTime;
float sweepAngle = mCurAngle - mStartRotateAngle;
//计算每秒活动的角度
float speed = sweepAngle * 1000 / rotateDuration;
Log.i(TAG, "speed=" + speed);
if (Math.abs(speed) > ROTATE_RATE) {
action = new RotateRunnable(speed);
post(action);
}
}
break;
}
mLastX = x;
mLastY = y;
return true;
}

private float getAngle(float xTouch, float yTouch) {
double x = xTouch - mCenterPoint.x;
double y = yTouch - mCenterPoint.y;
return (float) (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI);
}

public int getQuadrant(float x, float y) {
if (x >= mCenterPoint.x) {
return y >= mCenterPoint.y ? 1 : 4;
} else {
return y < mCenterPoint.y ? 2 : 3;
}
}

public class RotateRunnable implements Runnable {
RotateRunnable(float speed) {
this.speed = speed;
}

float speed;

@Override
public void run() {
if (Math.abs(speed) < 20) {
isFling = false;
return;
}
float addAngle = mCurAngle + (speed / 30);
setMCurAngle(addAngle);
isFling = true;
speed /= 1.0666F;
postDelayed(this, 30);
}
}
}

代码在GitHub上：https://github.com/yushilei1218/MyApp2.git；

Br