android星级菜单

前天跟着慕课网学习了星级菜单的功能的做法，具体效果如下图所示：

星级菜单.gif

1.这个星级菜单的位置在控件的四个角：左上，左下，右上，右下。
2.绘制主按钮，星级菜单按钮的位置
3.点击主按钮会旋转，切换星级菜单的打开关闭状态
4.当前星级菜单是关闭状态:需要做如下操作
      (1)星级菜单的动画是，从主菜单的位置移动到最终的位置
      (2)移动的过程会有旋转的动画
      (3)切换状态为打开的状态
   当前状态是打开状态:需要如下操作
      (1)星级菜单的动画是，从要显示的最终位置移动到主菜单的位置
      (2)移动的过程会有旋转的动画
      (3)切换状态为关闭的状态
5当点击星级菜单的时候，被点击的星级菜单会放大变透明，其余的星级菜单是缩小到透明
注意：星级菜单其实一直都在那个最终的位置,我们只是根据开关状态让其是否显示而已

接下来就一步一步的操作
1.星级菜单的位置有四种可能，所以需要控制其位置，星级菜单的半径
自定义view ArcMenu继承ViewGroup
配置控件需要的参数：在value目录下创建attrs文件

2.写布局

3.在ArcMenu的文件中获取自定义的属性的值：

 mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics());

        //获取自定义属性的值
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ArcMenu, defStyleAttr, 0);

        int pos = a.getInt(R.styleable.ArcMenu_position, POS_RIGHT_BOTTOM);
        switch (pos) {
            case POS_LEFT_TOP:
                mPosition = Position.LEFT_TOP;
                break;
            case POS_LEFT_BOTTOM:
                mPosition = Position.LEFT_BOTTOM;
                break;
            case POS_RIGHT_TOP:
                mPosition = Position.RIGHT_TOP;
                break;
            case POS_RIGHT_BOTTOM:
                mPosition = Position.RIGHT_BOTOTM;
                break;
        }

        mRadius = (int) a.getDimension(R.styleable.ArcMenu_radius, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 100, getResources().getDisplayMetrics()));
        Log.e("TAG", "position=" + mPosition + ",radius=" + mRadius);
        a.recycle();

4.因为ArcMenu继承ViewGroup，在其里面可以添加按钮，第一个一般是主按钮，后面的是星级菜单的按钮
5.重写onMeasue方法，测量子控件的大小

int count = getChildCount();         
for (int i = 0; i < count; i++) {    
     //测量内部的大小  
     measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);  
}   

6.重写onLayout方法，测量子控件的位置
主button的位置

    if (changed) {
       layoutCButton();
    }

    /**
     * 测量主Button
     */
    private void layoutCButton() {
        mCButton = getChildAt(0);
        mCButton.setOnClickListener(this);

        int l = 0;
        int t = 0;
        int width = mCButton.getMeasuredWidth();
        int height = mCButton.getMeasuredHeight();
        switch (mPosition) {
            case LEFT_TOP:
                l = 0;
                t = 0;
                break;
            case LEFT_BOTTOM:
                l = 0;
                t = getMeasuredHeight() - height;
                break;
            case RIGHT_TOP:
                l = getMeasuredWidth() - width;
                t = 0;
                break;
            case RIGHT_BOTOTM:
                l = getMeasuredWidth() - width;
                t = getMeasuredHeight() - height;
                break;
        }

        mCButton.layout(l, t, l + width, t + height);
    }

星级菜单的位置就要用数学知识

星级菜单位置确定.png

根据这样就是知道cl ，ct了，但是并不是真正的坐标，因为
这整个星级菜单可能在左上，左下，右上，右下，

通过观察，我们发现，
左上，左下的横坐标 x一样；右上，右下的横坐标x一样
左上右上的纵坐标y一样；左下，右下的纵坐标y一样

    /**
     * 测量item的位置
     */
    private void layoutIButton() {
        int count = getChildCount();
        for (int i = 0; i < count - 1; i++) {
            View child = getChildAt(i + 1);

            int cWidth = child.getMeasuredWidth();
            int cHeight = child.getMeasuredHeight();

            int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
            int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));

            if (mPosition == Position.LEFT_BOTTOM || mPosition == Position.RIGHT_BOTOTM) {
                ct = getMeasuredHeight() - ct - cHeight;
            }

            if (mPosition == Position.RIGHT_BOTOTM || mPosition == Position.RIGHT_TOP) {
                cl = getMeasuredWidth() - cl - cWidth;
            }

            child.layout(cl, ct, cl + cWidth, ct + cHeight);
        }
    }

这样星级菜单的位置就确定了，我们前面说过星级菜单的位置一直在那里，我们通过开关状态，判断是否显示星级菜单，默认是关闭的，所以要加上隐藏

 child.setVisibility(GONE);

7.主菜单设置点击事件，主菜单的变化

    rotateCButton(mCButton, 0, 360, 300);
    private void rotateCButton(View view, float start, float end, int duration) {
        RotateAnimation rotateAnimation = new RotateAnimation(start, end, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(duration);
        rotateAnimation.setFillAfter(true);
        view.startAnimation(rotateAnimation);
    }

星级菜单的变化

   toggleMenu(300);
    /**
     * 切换菜单
     *
     * @param duration
     */
    public void toggleMenu(int duration) {
        int count = getChildCount();
        for (int i = 0; i < count - 1; i++) {
            final View childView = getChildAt(i + 1);
            childView.setVisibility(VISIBLE);

            int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2) * i));
            int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2) * i));

            int xflag = 1;
            int yflag = 1;

            if (mPosition == Position.LEFT_TOP || mPosition == Position.LEFT_BOTTOM) {
                xflag = -1;
            }
            if (mPosition == Position.RIGHT_TOP || mPosition == Position.LEFT_TOP) {
                yflag = -1;
            }
            AnimationSet animationSet = new AnimationSet(true);
            TranslateAnimation translateAnimation = null;
            //打开
            if (mCurrentStatus == Status.CLOSE) {
                translateAnimation = new TranslateAnimation(cl * xflag, 0, ct * yflag, 0);
                childView.setFocusable(true);
                childView.setEnabled(true);
            } else {//关闭
                translateAnimation = new TranslateAnimation(0, cl * xflag, 0, ct * yflag);
                childView.setEnabled(false);
                childView.setFocusable(false);
            }

            translateAnimation.setDuration(duration);
            translateAnimation.setFillAfter(true);
            RotateAnimation rotateAnimation = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rotateAnimation.setDuration(duration);
            rotateAnimation.setFillAfter(true);
            animationSet.addAnimation(rotateAnimation);
            animationSet.addAnimation(translateAnimation);
            animationSet.setStartOffset(i * 100 / count);
            childView.startAnimation(animationSet);

            animationSet.setAnimationListener(new Animation.AnimationListener() {
                @Override
                public void onAnimationStart(Animation animation) {

                }

                @Override
                public void onAnimationEnd(Animation animation) {
                    if (mCurrentStatus == Status.CLOSE) {
                        childView.setVisibility(GONE);
                    }
                }

                @Override
                public void onAnimationRepeat(Animation animation) {

                }
            });
        changeIStatus();
    }

8.改变星级菜单的状态

    /**
     * 改变item打开状态
     */
    private void changeIStatus() {
        mCurrentStatus = (mCurrentStatus == Status.CLOSE) ? Status.OPEN : Status.CLOSE;
    }

9为星级菜单添加点击事件

            childView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (onMunuItemClickListener != null) {
                        onMunuItemClickListener.onClick(childView, pos);
                        onMenuItemAnimate(pos - 1);
                        changeIStatus();
                    }
                }
            });

判断被点击的星级菜单放大，其余的缩小

    private void onMenuItemAnimate(int pos) {
        for (int i = 0; i < getChildCount() - 1; i++) {
            View childView = getChildAt(i + 1);
            if (pos == i) {
                childView.startAnimation(onMenuBigAnimate(300));
            } else {
                childView.startAnimation(onMenuSmallAnimate(300));
            }
        }
    }
    /**
     * 放大的动画
     *
     * @param duration
     * @return
     */
    private Animation onMenuBigAnimate(int duration) {
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 4.0f, 1.0f, 4.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0f);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.setDuration(duration);
        animationSet.setFillAfter(true);
        return animationSet;
    }
    /**
     * 缩小的动画
     *
     * @param duration
     * @return
     */
    private Animation onMenuSmallAnimate(int duration) {
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0f, 1.0f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0f);
        animationSet.addAnimation(alphaAnimation);
        animationSet.addAnimation(scaleAnimation);
        animationSet.setDuration(duration);
        animationSet.setFillAfter(true);
        return animationSet;
    }

10.至此，星级菜单能够正常的打开，关闭，并且点击，但是当星级菜单在打开的状态时，点击星级菜单以外的控件就让其关闭，如效果图所示，点击button，关闭星级菜单
判断星级菜单是否打开

    /**
     * 打开状态的判定
     * @return
     */
    public boolean isOpen() {
        return mCurrentStatus == Status.OPEN;
    }

如果是打开状态，就调用改变星级菜单状态的方法

    if (arcMenu.isOpen()) {
          arcMenu.toggleMenu(600);
    }

给各位大佬奉上项目的地址：
https://github.com/diudiuhf/SatelliteMenu