Android自定义ViewGroup实现RayMenu

先来看一下实现的效果

RayMenu.gif

github上也有大神写的项目：ArcMenu

我这个思路来源于鸿洋大神的blog，感谢！
http://blog.csdn.net/lmj623565791/article/details/37567907

实现思路

标题已经说了是自定义ViewGroup，ViewGroup中的第一个子View作为Menu开启的按钮，之后的6个子View作为Item

• 动画效果实现

这里我用TranslateAnimation实现，对动画有了解的同学应该知道，TranslateAnimation本质是不会改变按钮的位置，而我们的按钮在动画结束后是要点击的。做法：默认让子菜单就已经在目标位置，然后GONE，当点击加号时，让按钮VISIBLE，开始动画，把起始位置设为定点，终点位置就是我们隐藏的区域。当然，也可以用属性动画实现这个效果。

• 确定位置

屏幕快照 2016-05-04 21.42.03.png

如上图，我们可以计算出1-3号item的位置，同理也可以计算出4-6号item的位置，而6号item的位置就是menu开启按钮的位置，当menu打开时，menu开启按钮隐藏，反之显示。

接下来看具体实现

1. onMeasure()

方法比较简单，计算子View的大小，获取ViewGroup的宽度、高度、paddingLeft和paddingRight，计算我们自定义ViewGroup实际显示的宽度

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        // 当前ViewGroup的宽度和高度
        mMeasuredWidth = getMeasuredWidth();
        mMeasuredHeight = getMeasuredHeight();

        mPaddingLeft = getPaddingLeft();
        mPaddingRight = getPaddingRight();

        // ViewGroup实际可显示的宽，减去左右的padding
        mActualWidth = mMeasuredWidth - mPaddingLeft - mPaddingRight;

        for (int i = 0; i < getChildCount(); i++) {
            getChildAt(i).measure(MeasureSpec.UNSPECIFIED, MeasureSpec.UNSPECIFIED);
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

2. onLayout()

确定子View的位置。首先在layoutFirstChildView()中对menu开关按钮（就是ViewGroup中的第一个子View）进行设置，以及初始化点击事件；然后从第二个子View开始为菜单项，分别设置其位置，计算的原理就是上面的草图，把子View事先设置在要显示的位置，然后GONE。

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        // changed参数，当前ViewGroup的尺寸或者位置是否发生了改变
        if (!changed) {
            return;
        }

        // 第一个子View，作为menu的开关button
        View firstChildView = getChildAt(0);

        // 所有子View的宽高都一致
        mCWidth = firstChildView.getMeasuredWidth();
        mCHeight = firstChildView.getMeasuredHeight();

        // 水平间隔
        mHorizontalSpace = (mActualWidth - 3 * mCWidth) / 2;
        // 垂直间隔
        mVerticalSpace = dip2px(mContext, 40);

        // 绘制第一个子View
        layoutFirstChildView(firstChildView);

        int childCount = getChildCount();

        // 子View的行数
        mLine = (int) Math.ceil(childCount / 3.0f);

        for (int i = 1; i < childCount; i++) {
            View childView = getChildAt(i);
            childView.setVisibility(GONE);

            // 标记当前子View的所在行
            int lineTag = (i - 1) / mLine;

            // 水平偏移量
            int horizontalOffset = (i - 1 - lineTag * 3) * (mHorizontalSpace + mCWidth);
            // 垂直偏移量
            int verticalOffset = (2 - lineTag) * mVerticalSpace;

            int left = horizontalOffset + mPaddingLeft;
            int top = mMeasuredHeight - (2 - lineTag) * mCHeight - verticalOffset;
            int right = left + mCWidth;
            int bottom = mMeasuredHeight - (1 - lineTag) * mCHeight - verticalOffset;

            childView.layout(left, top, right, bottom);
        }
    }

3. 设置menu开启事件和子View点击事件

此时子View已经在要显示的位置了，只是状态是不显示GONE，当我们点击开始按钮时，遍历子View先设置状态为显示VISIBLE，然后创建动画，开始位置为屏幕外某一点，结束位置就是子View实际的位置。最后就是绑定子View点击事件。

   /**
     * 开关menu
     */
    private void toggleMenu(int durationMillis) {
        int childCount = getChildCount();

        for (int i = 1; i < childCount; i++) {
            View childView = getChildAt(i);
            childView.setVisibility(VISIBLE);

            // 标记当前子View的所在行
            int lineTag = (i - 1) / mLine;
            // 垂直偏移量
            int verticalOffset = (2 - lineTag) * mVerticalSpace;
            int top = mMeasuredHeight - (2 - lineTag) * mCHeight - verticalOffset;

            // 创建并且绑定menu动画
            createBindMenuAnim(childView, childCount, i, top, durationMillis);

            childView.setTag(i);
            // 子View点击事件
            childView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    bindMenuItemAnim(v, (Integer) v.getTag());
                }
            });
        }
    }

4. 创建menu开关动画和子View点击动画

这里就比较简单了，根据menu打开还是关闭，设置不同的动画，子View的动画也是类似的，这里有一个时机问题，就是当点击子View的时候，要当动画结束的时候再做其他的操作（比如跳转界面）。

    /**
     * menu动画
     *
     * @param childView 子View
     * @param top fromYDelta、toYDelta
     * @param i 当前子View的位置
     * @param durationMillis 动画时间
     * @return
     */
    private void createBindMenuAnim(final View childView, int childCount, int i, int top, int durationMillis) {
        AnimationSet animset = new AnimationSet(true);
        Animation animation = null;

        if (!mIsOpen) {
            // 打开menu
            animset.setInterpolator(new OvershootInterpolator(1.5F));
            animation = new TranslateAnimation(0, 0, top, 0);
            childView.setClickable(true);
            childView.setFocusable(true);

        } else {
            // 关闭menu
            animation = new TranslateAnimation(0, 0, 0, top);
            childView.setClickable(false);
            childView.setFocusable(false);
        }

        // 当menu关闭时隐藏所有的子View
        animation.setAnimationListener(new Animation.AnimationListener() {
            public void onAnimationStart(Animation animation) {
            }

            public void onAnimationRepeat(Animation animation) {
            }

            public void onAnimationEnd(Animation animation) {
                if (!mIsOpen) {
                    childView.setVisibility(View.GONE);
                }
            }
        });

        animation.setFillAfter(true);
        animation.setDuration(durationMillis);
        // 设置动画开始的延迟时间
        animation.setStartOffset((i * 100) / (childCount - 1));
        animset.addAnimation(animation);
        childView.startAnimation(animset);
    }

    /**
     * 绑定子View动画
     */
    private void bindMenuItemAnim(View clickView, int pos) {
        mClickView = clickView;
        mPos = pos;
        Animation animation = null;
        for (int i = 1; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            if (pos == i) {
                // 当前点击的子View
                animation = createChildViewAnim(true, 300);
            } else {
                // 其他未被点击的字View
                animation = createChildViewAnim(false, 300);
            }

            childView.startAnimation(animation);
            childView.setClickable(false);
            childView.setFocusable(false);
        }

        mIsOpen = false;
        Animation anim = new ScaleAnimation(0f, 1.0f, 0, 1.0f,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        anim.setDuration(300);
        anim.setFillAfter(true);
        anim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                if (mListener != null) {
                    mListener.onClick(mClickView, mPos);
                }
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
        mToggleBtn.startAnimation(anim);
    }

5. menu状态改变

这里是设置menu的状态，还有设置开启按钮的动画效果

    /**
     * menu状态改变
     */
    private void changeStatus(boolean isOpen) {
        mIsOpen = isOpen;

        // menu开关按钮显示隐藏
        if (!mIsOpen) {
            Animation anim = new ScaleAnimation(0f, 1.0f, 0, 1.0f,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            anim.setDuration(300);
            anim.setFillAfter(true);
            mToggleBtn.startAnimation(anim);

        } else {
            mToggleBtn.startAnimation(createChildViewAnim(false, 300));
        }
    }

6. 设置点击背景关闭menu

这里我是要实现点击除了子View的其他位置也要能关闭menu，也就是背景。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        // 设置touch事件，点击背景关闭menu，只有当menu已经打开才有效
        if (mIsOpen && action == MotionEvent.ACTION_DOWN) {
            toggleMenu(300);

            changeStatus(false);
        }
        return super.onTouchEvent(event);
    }

这样一个自定义的ViewGroup就已经实现了，大家感觉怎么样？
代码可能写的不够优美，欢迎大家指出不足，也欢迎给我留言，共同进步，谢谢！

最后给出源码地址RayMenu