给之前绘制的图形菜单增加随触摸360度旋转效果

上次实现了圆形菜单的绘制【http://www.cnblogs.com/webor2006/p/7525979.html】，这次对它加上触摸旋转效果，实际上就是建行手银APP里面的一个效果，先贴上最终效果：

整理思路：

那如何才能够实现上面这种效果呢？先来分析下上一次的代码：

public class CircleMenu extends ViewGroup {
    /* 代表是子视图所在圆的直径,由 */
    private int d = 480;
    private int startAngle;

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

    public CircleMenu(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {

    }

    public void setData(int[] resIds, String[] texts) {
        for (int i = 0; i < resIds.length; i++) {
            View view = View.inflate(getContext(), R.layout.circle_item, null);
            ImageView image_icon = (ImageView) view.findViewById(R.id.image_icon);
            image_icon.setImageResource(resIds[i]);
            TextView tv_label = (TextView) view.findViewById(R.id.tv_label);
            tv_label.setText(texts[i]);

            addView(view);
        }
    }

    //处理控件及其子控件的测量
    //在自定义ViewGroup中，系统默认只处理当前控件的测量，不对子视图进行测量，需要重写onMeasure对其子视图进行测量
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //处理用户不管宽高传多大值都要正常能显示的问题
//        super.onMeasure(widthMeasureSpec, heightMeasureSpec);//默认的处理已经满足不了我们的需求了
        int measuredWidth;
        int measuredHeight;
        //判断模式:主要是处理两种：1、确切的；2、至多
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        if (mode != MeasureSpec.EXACTLY) {
            //则宽应该是WRAP_CONTENT或未指定
            // FAQ：1、如果用户没指定大小，那如何显示呢？这里需求是：背景有多大控件就有多大；2、如果木有背景，则用默认宽度作为控件宽度
            int suggestedMinimumWidth = getSuggestedMinimumWidth();//获取背景的宽度
            if (suggestedMinimumWidth == 0) {
                //无背景
                measuredWidth = measuredHeight = getDefaultWidth();
            } else {
                //有背景
                measuredWidth = measuredHeight = Math.min(suggestedMinimumWidth, getDefaultWidth());
            }
        } else {
            //说明用户指定了确切的宽高，则判断传入的宽度和屏幕宽度取较小值
            measuredWidth = measuredHeight = Math.min(size, getDefaultWidth());
        }
        d = measuredWidth;//当测量值确定之后，则将直径也动态改变一下既可
        Log.d("cexo", "measuredWidth:" + measuredWidth + ";measuredHeight:" + measuredHeight);
        setMeasuredDimension(measuredWidth, measuredHeight);
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            //默认系统是可以通过onMeasure给予MeasureSpec参数的，而对于inflate进来的子视图是没有MeasureSpec参数的
            //而子视图都是通过inflate过来的，所以：需要我们自己设计MeasureSpec
            int makeMeasureSpec = MeasureSpec.makeMeasureSpec(/*200*/d / 3, MeasureSpec.EXACTLY);
            child.measure(makeMeasureSpec, makeMeasureSpec);
        }
    }

    //获取屏幕宽高的最小值
    private int getDefaultWidth() {
        //获取屏幕宽高
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        int screenWidth = displayMetrics.widthPixels;
        int screenHeight = displayMetrics.heightPixels;
        //获取宽高的较小值
        int result = Math.min(screenWidth, screenHeight);
        return result;
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            //temp:相当于自定义控件所在圆的圆心到子视图所在矩形的几何中心的距离
            float temp = d / 3.0f;
            int childWidth = child.getMeasuredWidth();
            int left = (int) (d / 2 + Math.round(temp * Math.cos(Math.toRadians(startAngle))) - childWidth / 2);
            int right = left + childWidth;
            int top = (int) (d / 2 + Math.round(temp * Math.sin(Math.toRadians(startAngle))) - childWidth / 2);
            int bottom = top + childWidth;
            child.layout(left, top, right, bottom);
            startAngle += 360 / getChildCount();//每次角度进行累加
        }
    }
}

其中标红了一个字段"startAngle"：绘制圆形菜单的起始角度，默认是从0度开始绘制的：

那看好了，接下来我们将startAngle的初始角度改变一下：

这时看此时的效果：

于是乎实现思路产生了：就是通过用户的触摸点来得到角度相对于当前角度的差值，然后再将startAngle去加上这个差值，最终再通知整体布局重绘则就能实现如上的效果，接下来就按这种思路去一一实现！

具体实现：

很显然需要给当前的ViewGroup处理onTouchEvent事件，所以：

下面运行看下打印情况：

呃，为啥只产生了down事件呢，明明move了呀，这是为啥呢，直接给出处理代码：

再次看输出：

完美解决，至于这样写的背后的原因这里先不用管，因为涉及到之后要学习的事件传递机制，之后会系统全面的从源码角度彻底来理解android的事件传递机制，到那时对于这一块的代码就能完全理解啦~

【注】：由于我GIF截屏软件的原因，效果上跟实际显示的有些差异，将就着看，主要是能表达清楚意思既可~~

接着就可以写我们的触摸逻辑了，首先先记录down时的x,y坐标：

接下来就是怎么通过触摸点的坐标跟圆的半径来计算出角度了，这里先以计算当前点击的坐标的角度为例：

如果对于为啥要对坐标进行转换不太清楚的，可以参考这篇博客，里面对其原理有详细的说明：【http://www.cnblogs.com/webor2006/p/7687320.html】，有了坐标点之后，如何来计算出它的角度呢，下面来复习一下数学公式：

∵ 角度=180/π * 弧度
∴ 这时只要求得弧度，那角度也就迎刃而解了,如何求弧度呢？

这里可以采用Math.asin()反正弦函数来获得：

所以接下来得求角度的sin，而它的求解可以先看下图：

而目前斜边z是未知的，而对于已知真角边(x,y)求直角函数的斜边可以通过Math.hypot(x，y)获取：z = Math.hypot(x，y)

所以其角度公式为：(弧度 * 180 / Math.PI) = (Math.asin(角度的正弦值) * 180 / Math.PI) = (Math.asin(y / z) * 180 / Math.PI) = (Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI)

所以可以通过这个公式来获取角度值啦：