卫星菜单

最近学习了怎么实现卫星菜单。现在来总结一下。
首先，核心思想是先把各个图片摆放到全部展开的位置，主按钮的作用就是隐藏和显示子按钮。
其次，展开的时候设计到动画效果，这里面处理的细节也很多。
最后，让我们来做一个卫星菜单吧。

• 首先

创建一个类继承ViewGroup。(因为要画的卫星菜单图里有不止一个view，所以要继承viewGroup),必须覆写它的onlayout()方法(在这个方法里确定每个子view 的位置)。
onMeasure()方法比较简单，就是挨个测量子view的大小，直接上代码。

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int cCount = getChildCount();
        for (int i = 0; i < cCount; i++) {
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

onlayout()方法确定各个子view的位置。首先要定义一个枚举类型的变量表示卫星菜单所放置的不同位置：左上角，左下角，右上角，右下角。然后再定义一个枚举类型表示菜单的开关状态。

     public enum Position {
        LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM;
    }
      public enum Stutas {
        OPEN, CLOSE;
    }
    private static final int POS_LEFT_TOP = 0;
    private static final int POS_LEFT_BOTTOM = 1;
    private static final int POS_RIGHT_TOP = 2;
    private static final int POS_RIGHT_BOTTOM = 3;

计算每个子view的位置需要一对坐标，请看一个不太专业的图

x= sinα;
y = cosα;
但是三角形的顶点在手机屏幕的不同位置，x,y也是不一样的，并且α的大小根据子view的个数决定  α = 90/（count-1);
只要确定了与左边和上边的距离一个点的位置就确定了，so

       //如果在左下或者是右下
                if (mPosition == Position.LEFT_BOTTOM ||   mPosition ==Position.RIGHT_BOTTOM) {
                    ct = getMeasuredHeight() - cheight - ct;
                }
                if (mPosition == Position.RIGHT_TOP || mPosition ==Position.RIGHT_BOTTOM) {
                    cl = getMeasuredWidth() - cwidth - cl;
                }


//这个是定位主按钮，这个好说
   private void layoutMainButton() {
        mViewButton = getChildAt(0);
        mViewButton.setOnClickListener(this);

        int l = 0;
        int t = 0;

        int width = mViewButton.getMeasuredWidth();
        int height = mViewButton.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_BOTTOM:
                l = getMeasuredWidth() - width;
                t = getMeasuredHeight() - height;
                break;
        }
        mViewButton.layout(l, t, l + width, t + height);
    }

//下面是定位子view
 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        if (changed) {
            layoutMainButton();
            int count = getChildCount();
            Log.d(TAG, "onLayout: count is" + count);
            for (int i = 0; i < count - 1; i++) {
                View child = getChildAt(i + 1);
                child.setVisibility(View.GONE);
                int cl = (int) (mRadius * Math.sin(Math.PI / 2 / (count - 2)
                        * i));
                int ct = (int) (mRadius * Math.cos(Math.PI / 2 / (count - 2)
                        * i));
                Log.d(TAG, "onLayout: cl is " + cl + " , ct is" + ct);
                int cwidth = child.getMeasuredWidth();
                int cheight = child.getMeasuredHeight();

                //如果在左下或者是右下
                if (mPosition == Position.LEFT_BOTTOM || mPosition ==
                        Position.RIGHT_BOTTOM) {
                    ct = getMeasuredHeight() - cheight - ct;
                }
                if (mPosition == Position.RIGHT_TOP || mPosition ==
                        Position.RIGHT_BOTTOM) {
                    cl = getMeasuredWidth() - cwidth - cl;
                }

                child.layout(cl, ct, cl + cwidth, ct + cheight);
            }

        }

    }

这样各个子view的位置就定好了.

• 其次

要实现点击主按钮的一些伸缩，旋转动画效果，这些就要需要一个动画集合来管理。

transAnima = new TranslateAnimation(0,xflag*cl,0,yflag*ct);
            transAnima.setFillAfter(true);
            transAnima.setDuration(duration);
            transAnima.setStartOffset((i * 100) / cCount);
RotateAnimation rotateAnimation = new RotateAnimation(0, 720,
                    Animation.RELATIVE_TO_SELF, 0.5f, Animation
                    .RELATIVE_TO_SELF, 0.5f);
            rotateAnimation.setFillAfter(true);
            rotateAnimation.setDuration(duration);

            animatorSet.addAnimation(rotateAnimation);
            animatorSet.addAnimation(transAnima);
            child.startAnimation(animatorSet);

• 最后实现点击子菜单的动画效果

   /**
     * 添加MenuIterm的点击动画
     * @param pos  要实现动画的位置
     */
        private void menuItermAnim(int pos) {
            for (int i = 0;i < getChildCount()-1;i++){
                View child  = getChildAt(i+1);

                if (i == pos){
                    child.startAnimation(scaleBigAnimation(300));
                }else {
                    child.startAnimation(scaleSmallAnimation(300));
                }
                child.setFocusable(false);
                child.setClickable(false);
            }

完整代码，请到github上下载 ：github地址

谢谢阅读。