优酷自定义菜单功能学习

优酷代码：

XML布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

      <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3" >
        
           <ImageView 
            android:id="@+id/channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel1"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="10dp"
            android:layout_marginBottom="10dp"
            />
           
           <ImageView 
            android:id="@+id/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/channel2"
            android:layout_above="@id/channel1"
             android:layout_alignLeft="@id/channel1"
             android:layout_marginLeft="20dp"
             android:layout_marginBottom="10dp"
            />
           
           <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_above="@+id/channel2"
               android:layout_alignLeft="@+id/channel2"
               android:layout_marginBottom="8dp"
               android:layout_marginLeft="35dp"
               android:background="@drawable/channel3" />
           
           <ImageView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_centerHorizontal="true"
               android:background="@drawable/channel4" 
               android:layout_marginTop="6dp"/>
           
           <ImageView
               android:id="@+id/channel7"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:background="@drawable/channel7" 
               android:layout_alignParentBottom="true"
               android:layout_alignParentRight="true"
               android:layout_marginRight="10dp"
               android:layout_marginBottom="10dp"
               />
           
           <ImageView
               android:id="@+id/channel6"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_above="@id/channel7"
               android:layout_alignRight="@id/channel7"
               android:layout_marginBottom="10dp"
               android:layout_marginRight="20dp"
               android:background="@drawable/channel6" />
           
           <ImageView
               android:id="@+id/channel5"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_above="@id/channel6"
               android:layout_alignRight="@id/channel6"
               android:layout_marginBottom="8dp"
               android:layout_marginRight="35dp"
               android:background="@drawable/channel5" />
          
    </RelativeLayout>
 
    
    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" >
        
           <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_search"
            android:layout_margin="10dp"
            android:layout_alignParentBottom="true"
            />
           
           <ImageView
               android:id="@+id/icon_menu"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_centerHorizontal="true"
               android:layout_marginTop="5dp"
               android:background="@drawable/icon_menu" />
           
           <ImageView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_myyouku"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp"
            />
        
    </RelativeLayout>
    
     
    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level1" >

        <ImageView
            android:id="@+id/icon_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/icon_home" />

    </RelativeLayout>

</RelativeLayout>

package com.youku.youkumenu;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.RelativeLayout;

public class MainActivity extends Activity implements OnClickListener {

    private RelativeLayout level1;
    private RelativeLayout level2;
    private RelativeLayout level3;

    private ImageView icon_home;
    private ImageView icon_menu;
    
    
    /**
     * 判断第三级菜单 是否显示。
     * true 为显示
     * false 为隐藏
     */
    private boolean isLevel3Show = true;//用于判断三级菜单是否显示出来了，，默认为true

    /**
     * 判断第二级菜单 是否显示。
     * true 为显示
     * false 为隐藏
     */
    private boolean isLevel2Show = true;
    /**
     * 判断第一级菜单 是否显示。
     * true 为显示
     * false 为隐藏
     */
    private boolean isLevel1Show = true;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        level1 = (RelativeLayout) findViewById(R.id.level1);
        level2 = (RelativeLayout) findViewById(R.id.level2);
        level3 = (RelativeLayout) findViewById(R.id.level3);

        icon_home =(ImageView) findViewById(R.id.icon_home);
        icon_menu =(ImageView) findViewById(R.id.icon_menu);
        
        icon_home.setOnClickListener(this);
        icon_menu.setOnClickListener(this);
    }

    

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.icon_menu:
            //响应emnu图标的点击事件
            if(isLevel3Show){
                //隐藏第三级菜单
                Tools.hideView(level3);
                isLevel3Show = false;
            }else {
                //显示第三级菜单
                Tools.showView(level3);
                isLevel3Show = true;
            }
            
            break;
        case R.id.icon_home:
            //响应home图标的点击事件
            if(!isLevel2Show){
                //如果二级菜单 是隐藏状态，那么，显示二级菜单
                Tools.showView(level2);
                isLevel2Show = true;
            }else{
                //如果二级菜单 是显示状态，那么隐藏二级菜单
                Tools.hideView(level2);
                isLevel2Show = false;
                //同时判断，三级菜单的状态，如果是显示，同样也隐藏三级菜单
                if(isLevel3Show){
                    Tools.hideView(level3,200);
                    isLevel3Show=false;
                }
            }
            break;
        }
        
    }
    
    @Override
    /**
     * 当点击手机按键的时候，触发该发法
     * keyCode 点击按击代表的值
     * event 按键事件
     */
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        super.onKeyDown(keyCode, event);
        
        //判断是否点击menu按钮
        if(keyCode == KeyEvent.KEYCODE_MENU){
            //判断一级菜单
            //如果是隐藏状态，那么就显示 一级菜单 ，和二级菜单
            if(!isLevel1Show){
                Tools.showView(level1);
                isLevel1Show = true;
                //同时显示二级菜单
                Tools.showView(level2, 200);
                isLevel2Show = true;
            }else{
                //如果一级菜单 是显示状态,
                //隐藏一级菜单 ，，同时，判断，隐藏，二，三，级菜单 
                Tools.hideView(level1);
                isLevel1Show = false;
                
                if(isLevel2Show){
                    Tools.hideView(level2,200);
                    isLevel2Show = false;
                    
                    if(isLevel3Show){
                        Tools.hideView(level3, 300);
                        isLevel3Show=false;
                    }
                }
            }
            
        }
        return true;
    }
    
    


}

　　TOOLS工具代码：

package com.youku.youkumenu;

import android.view.View;
import android.view.ViewGroup;
import android.view.animation.RotateAnimation;

public class Tools {

    /**
     * 隐藏指定的view
     * @param level3
     */
    public static void hideView(ViewGroup view) {        
        hideView(view,0);
    }

    /**
     * 显示 指定的view
     * @param view
     */
    public static void showView(ViewGroup view) {        
        showView(view, 0);
    }
    
    /**
     * 延时显示 指定的view
     * @param view
     * @param offset 延时的时间 
     */
    public static void showView(ViewGroup view,int offset) {
        
        //显示当前的view
        view.setVisibility(View.VISIBLE);
        
        RotateAnimation rotateAnimation = new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());
        
        rotateAnimation.setDuration(500);//设置动画的运行时间
        
        rotateAnimation.setFillAfter(true);//动画执行完后，保持现有的状态
    
        rotateAnimation.setStartOffset(offset);    //设置延时的时间
        
        //让view执行动画
        view.startAnimation(rotateAnimation);
        
        //解析看不到，还能点击的bug
        /*
         * ViewGroup 中的方法介绍：
         * 
         * getChildCount() 返回子view的数量
         * getChildAt(i) 获得指定下标的子view
         * 
         */
        for(int i=0;i<view.getChildCount();i++){
            View child = view.getChildAt(i);
//            child.setEnabled(true);
            child.setVisibility(View.VISIBLE);
        }
        
        
    }

    /**
     * 延时隐藏指定的 view 
     * @param view
     * @param i 延时的时间 音位是毫秒
     */
    public static void hideView(ViewGroup view, int offset) {
        
        /**
         * RotateAnimation 中的四个参数：
         * fromDegrees 从多少度
         * toDegrees 到多少度
         * pivotX 中心点的x 坐标
         * pivotY 中心点的Y坐标
         */
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
        
        rotateAnimation.setDuration(500);//设置动画的运行时间        
        rotateAnimation.setFillAfter(true);    //动画执行完后，保持现有的状态    
        rotateAnimation.setStartOffset(offset);    //设置动画执行的延时时间    
        view.startAnimation(rotateAnimation);    //让view执行动画    
        //解析看不到，还能点击的bug
        /*
         * ViewGroup 中的方法介绍： 
         * getChildCount() 返回子view的数量
         * getChildAt(i) 获得指定下标的子view
         */
        for(int i=0;i<view.getChildCount();i++){
            View child = view.getChildAt(i);
            child.setVisibility(View.GONE);
        }        
    }

}

动画效果分析：

/**
     * 延时隐藏指定的 view 
     * @param view
     * @param i 延时的时间 音位是毫秒
     */
    public static void hideView(ViewGroup view, int offset) {
        
        /**
         * RotateAnimation 中的四个参数：
         * fromDegrees 从多少度
         * toDegrees 到多少度
         * pivotX 中心点的x 坐标
         * pivotY 中心点的Y坐标
         */
        RotateAnimation rotateAnimation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
        
        rotateAnimation.setDuration(500);//设置动画的运行时间        
        rotateAnimation.setFillAfter(true);    //动画执行完后，保持现有的状态    
        rotateAnimation.setStartOffset(offset);    //设置动画执行的延时时间    
        view.startAnimation(rotateAnimation);    //让view执行动画    
        //解析看不到，还能点击的bug
        /*
         * ViewGroup 中的方法介绍： 
         * getChildCount() 返回子view的数量
         * getChildAt(i) 获得指定下标的子view
         */
        for(int i=0;i<view.getChildCount();i++){
            View child = view.getChildAt(i);
            child.setVisibility(View.GONE);
        }        
    }

源代码：