（三）实现菜单点击动画

      在上一篇中，我们已经处理好了菜单的折叠和展开。如果你还没读过，可以点击下面的链接：
http://www.cnblogs.com/fuly550871915/p/4930654.html

       贴出上一篇文章的效果图吧，如下：

      折叠和展开还不错。所写的代码也越来越简单，主要就是动画的添加而已。下面我们为每一个菜单添加点击动画。即，点击的时候，，让被点击的菜单放大消失，其他菜单缩小消失。

     我们还是直接看代码，然后在做解释吧。还是修改ArcMenu中的代码，如下：

package com.example.menu;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AlphaAnimation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.view.ViewGroup;

public class ArcMenu extends ViewGroup implements OnClickListener{
    /**
     * 菜单按钮
     */
    private View mCBMenu;
    /**
     * 菜单的位置，为枚举类型
     * @author fuly1314
     *
     */
    private enum Position
    {
        LEFT_TOP,LEFT_BOTTOM,RIGHT_TOP,RIGHT_BOTTOM
    }
    /**
     * 菜单的状态
     * @author fuly1314
     *
     */
    private enum Status
    {
        OPEN,CLOSE
    }
    /**
     * 菜单为当前位置，默认为RIGHT_BOTTOM，在后面我们可以获取到
     */
    private Position mPosition = Position.RIGHT_BOTTOM;
    /**
     * 菜单的当前状态,默认为关闭
     */
    private Status mCurStatus = Status.CLOSE;
    
    /**
     * 菜单的半径，默认为120dp
     */
    private int mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150,
            getResources().getDisplayMetrics());

    
    
    public ArcMenu(Context context) {
        this(context,null);
    }
    public ArcMenu(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }
    public ArcMenu(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ArcMenu, defStyle, 0);
        //获取到菜单设置的位置
        int position = ta.getInt(R.styleable.ArcMenu_position, 3);
        
        switch(position){
        case 0:
            mPosition = Position.LEFT_TOP;
            break;
        case 1:
            mPosition = Position.LEFT_BOTTOM;
            break;
        case 2:
            mPosition = Position.RIGHT_TOP;
            break;
        case 3:
            mPosition = Position.RIGHT_BOTTOM;
            break;
        }
        
        //获取到菜单的半径
        mRadius = (int) ta.getDimension(R.styleable.ArcMenu_radius,
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120,
                        getResources().getDisplayMetrics()));            
        ta.recycle();
        
    }
    
    
    
    /**
     * 测量各个子View的大小
     */
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
    {
        int count = getChildCount();//获取子view的数量
        
        for(int i=0;i<count;i++)
        {
            //测量子view的大小
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 摆放各个子view的位置
     */
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
        if(changed)//如果发生了改变，就重新布局
        {
            layoutMainMenu();//菜单按钮的布局
            /**
             * 下面的代码为菜单的布局
             */
            int count = getChildCount();
            
            for(int i=0;i<count-1;i++)
            {
                View childView = getChildAt(i+1);//注意这里过滤掉菜单按钮，只要菜单选项view
                
                childView.setVisibility(GONE);//先让菜单消失
                
                int left = (int) (mRadius*Math.cos(Math.PI/2/(count-2)*i));
                int top = (int) (mRadius*Math.sin(Math.PI/2/(count-2)*i));

                
                
                switch(mPosition)
                {
                
                case LEFT_TOP:
                    break;
                case LEFT_BOTTOM:
                    top = getMeasuredHeight() - top-childView.getMeasuredHeight();
                    break;
                case RIGHT_TOP:
                    left = getMeasuredWidth() - left-childView.getMeasuredWidth();
                    break;
                case RIGHT_BOTTOM:
                    left = getMeasuredWidth() - left-childView.getMeasuredWidth();
                    top = getMeasuredHeight() - top-childView.getMeasuredHeight();
                    break;
                }
                
                childView.layout(left, top, left+childView.getMeasuredWidth(),
                        top+childView.getMeasuredHeight());
            }
        }

        
    }
    /**
     * 菜单按钮的布局
     */
    private void layoutMainMenu() {
        
         mCBMenu = getChildAt(0);//获得主菜单按钮
         
         mCBMenu.setOnClickListener(this);
        
        int left=0;
        int top=0;
        
        switch(mPosition)
        {
        case LEFT_TOP:
            left = 0;
            top = 0;
            break;
        case LEFT_BOTTOM:
            left = 0;
            top = getMeasuredHeight() - mCBMenu.getMeasuredHeight();
            break;
        case RIGHT_TOP:
            left = getMeasuredWidth() - mCBMenu.getMeasuredWidth();
            top = 0;
            break;
        case RIGHT_BOTTOM:
            left = getMeasuredWidth() - mCBMenu.getMeasuredWidth();
            top = getMeasuredHeight() - mCBMenu.getMeasuredHeight();
            break;
        }
        
        mCBMenu.layout(left, top, left+mCBMenu.getMeasuredWidth(), top+mCBMenu.getMeasuredHeight());
    }
    /**
     * 菜单按钮的点击事件
     * @param v
     */
    public void onClick(View v) {
        //为菜单按钮设置点击动画
        RotateAnimation rAnimation = new RotateAnimation(0f, 720f, Animation.RELATIVE_TO_SELF, 0.5f, 
                Animation.RELATIVE_TO_SELF, 0.5f);
        
        rAnimation.setDuration(300);
        
        rAnimation.setFillAfter(true);
        
        v.startAnimation(rAnimation);
        
        dealChildMenu(300);//处理菜单选项，比如折叠菜单或者展开菜单
        
    }
    /**
     * 处理菜单选项，比如折叠菜单或者展开菜单
     * @param duration 菜单选项的动画时间
     */
    private void dealChildMenu(int duration) 
    {
        
        //下面的代码为菜单选项设置动画
        
        int count = getChildCount();
        
        for(int i=0;i<count-1;i++)
        {
            final View childView = getChildAt(i+1);
            
            AnimationSet set = new AnimationSet(true);
            
            //1.首先是平移动画
            TranslateAnimation tAnimation = null;
            
            //平移的x方向和y方向的距离
            int x = (int) (mRadius*Math.cos(Math.PI/2/(count-2)*i));
            int y = (int) (mRadius*Math.sin(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.LEFT_TOP||mPosition == Position.RIGHT_TOP)
            {
                yflag = -1;
            }
            
            if(mCurStatus == Status.CLOSE)//如果当前状态为关闭则应该打开
            {
                 tAnimation = new TranslateAnimation(xflag*x, 0,
                        yflag*y, 0);
                tAnimation.setDuration(duration);
                tAnimation.setFillAfter(true);
                
                childView.setVisibility(VISIBLE);//设置菜单可见
                
                
            }else//否则为打开状态，就应该关闭
            {
                 tAnimation = new TranslateAnimation( 0,xflag*x,
                            0,yflag*y);
                    tAnimation.setDuration(duration);
                    tAnimation.setFillAfter(true);
                    //为打开状态，则菜单是可点击和获得焦点
                    childView.setClickable(true);
                    childView.setFocusable(true);
            }
            tAnimation.setStartOffset((i * 100) / count);
            tAnimation.setAnimationListener(new AnimationListener() {
                

                public void onAnimationStart(Animation animation) {
    
                    
                }
                

                public void onAnimationRepeat(Animation animation) {
        
                    
                }
                

                public void onAnimationEnd(Animation animation) {

                    if(mCurStatus == Status.CLOSE)
                    {
                        childView.setVisibility(GONE);
                        childView.setClickable(false);
                        childView.setFocusable(false);
                    }
                    
                }
            });
            
            //2.然后是旋转动画
            RotateAnimation rAnimation = new RotateAnimation(0f, 0, Animation.RELATIVE_TO_SELF, 0.5f, 
                    Animation.RELATIVE_TO_SELF, 0.5f);
            rAnimation.setDuration(duration);
            rAnimation.setFillAfter(true);//动画结束是画面停留在此动画的最后一帧
            
            
            set.addAnimation(rAnimation);//一定要注意顺序，先旋转动画，然后再平移
            set.addAnimation(tAnimation);
            
            childView.startAnimation(set);
            
            //为菜单项设置点击事件
313             final int cPos = i+1;
314             childView.setOnClickListener(new OnClickListener() {
315                 
316                 @Override
317                 public void onClick(View v) {
318                     
319                     clickAnimation(cPos);//点击动画
320                     changeStatus();
321                     
322                     
323                 }
324             });
            
            
        }
        
        changeStatus();//动画完成后，要改变状态
        
    }
    /**
     * 改变状态
     */
    private void changeStatus() {
        
        mCurStatus = (mCurStatus == Status.CLOSE?Status.OPEN:Status.CLOSE);
        
    }
    /**
341      * 菜单项的点击动画
342      * @param cPos  用来判断当前点击的是哪一个菜单
343      */
344     private void clickAnimation(int cPos) {
345         
346         for(int i=0;i<getChildCount()-1;i++)
347         {
348             View childView = getChildAt(i+1);
349             
350             if(i+1== cPos)
351             {
352                 AnimationSet set = new AnimationSet(true);
353                 ScaleAnimation sAnimation = new ScaleAnimation(1.0f, 3.0f, 1.0f, 3.0f,
354                         Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
355                 sAnimation.setFillAfter(true);
356                 AlphaAnimation alAnimation = new AlphaAnimation(1.0f, 0f);
357                 alAnimation.setFillAfter(true);
358                 
359                 set.addAnimation(sAnimation);
360                 set.addAnimation(alAnimation);
361                 
362                 set.setDuration(300);
363                 childView.startAnimation(set);
364                 
365             }else
366             {
367                 AnimationSet set = new AnimationSet(true);
368                 ScaleAnimation sAnimation = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f,
369                         Animation.RELATIVE_TO_SELF, 0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
370                 sAnimation.setFillAfter(true);
371                 AlphaAnimation alAnimation = new AlphaAnimation(1.0f, 0f);
372                 alAnimation.setFillAfter(true);
373                 
374                 set.addAnimation(sAnimation);
375                 set.addAnimation(alAnimation);
376                 
377                 set.setDuration(300);
378                 childView.startAnimation(set);
379             }
380             childView.setVisibility(GONE);
381         }
382         
    }

}

      红色部分是我们主要添加的代码。无非就是两个动画的添加，即缩放动画和透明度动画。没什么好说的，代码都写的很清晰了。然后要注意点击菜单后，要改变一下状态。因此点击菜单，所有的菜单都要消失。这个时候把状态改为关闭，是恰当的。然后我们运行一下效果，如下：

      好吧，模拟器上的效果还是不流畅。能在真机上实验要好一点。是不是越来越感觉代码写起来轻松了呢？确实是，主要的难点，也就是一个自定义的ViewGroup。下面我们实现点击按钮，弹出提示框吧。进入下一节。