卫星菜单

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

• 首先

创建一个类继承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地址

谢谢阅读。