01.通过组合已有控件实现特殊效果----优酷菜单

效果图：

youku.gif

代码：
MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ImageView icon_home;
    private ImageView icon_menu;
    private RelativeLayout level1;
    private RelativeLayout level2;
    private RelativeLayout level3;

    /**
     * 是否显示level1
     * true 显示
     * false 隐藏
     */
    private boolean isShowLevel1 = true;

    /**
     * 是否显示level2
     * true 显示
     * false 隐藏
     */
    private boolean isShowLevel2 = true;

    /**
     * 是否显示level3
     * true 显示
     * false 隐藏
     */
    private boolean isShowLevel3 = true;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

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

        //设置点击事件
        MyOnClickListener listener = new MyOnClickListener();
        icon_home.setOnClickListener(listener);
        icon_menu.setOnClickListener(listener);


    }

    class MyOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View v) {
            switch (v.getId()){
                case R.id.icon_home:
                    if (isShowLevel3 && isShowLevel2){
                        Tools.hideView(level3,300);
                        Tools.hideView(level2);
                        isShowLevel3 = false;
                        isShowLevel2 = false;
                    }else{
                        Tools.showView(level2);
                        isShowLevel2 = true;
                    }
                    break;

                case R.id.icon_menu:
                    if (isShowLevel3){
                        //隐藏
                        Tools.hideView(level3);
                        isShowLevel3 = false;
                    }else{
                        //显示
                        Tools.showView(level3);
                        isShowLevel3 = true;
                    }
                    break;
            }
        }
    }
}

布局文件
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/level3"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:background="@drawable/level3"
            android:layout_width="280dp"
            android:layout_height="140dp">

            <ImageView
                android:id="@+id/channel1"
                android:layout_marginLeft="8dp"
                android:layout_marginBottom="8dp"
                android:layout_alignParentBottom="true"
                android:src="@drawable/channel1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_above="@id/channel1"
                android:id="@+id/channel2"
                android:layout_marginLeft="24dp"
                android:src="@drawable/channel2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_above="@id/channel2"
                android:id="@+id/channel3"
                android:layout_marginLeft="48dp"
                android:src="@drawable/channel3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_marginTop="7dp"
                android:layout_centerHorizontal="true"
                android:id="@+id/channel4"
                android:src="@drawable/channel4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_alignParentRight="true"
                android:id="@+id/channel7"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="8dp"
                android:layout_alignParentBottom="true"
                android:src="@drawable/channel7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_marginRight="24dp"
                android:layout_alignParentRight="true"
                android:layout_above="@id/channel7"
                android:id="@+id/channel6"
                android:src="@drawable/channel6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_marginRight="48dp"
                android:layout_alignParentRight="true"
                android:layout_above="@id/channel6"
                android:id="@+id/channel5"
                android:src="@drawable/channel5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/level2"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:background="@drawable/level2"
            android:layout_width="180dp"
            android:layout_height="90dp">

            <ImageView
                android:layout_marginLeft="8dp"
                android:layout_marginBottom="8dp"
                android:layout_alignParentBottom="true"
                android:src="@drawable/icon_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:id="@+id/icon_menu"
                android:layout_marginTop="5dp"
                android:layout_centerHorizontal="true"
                android:src="@drawable/icon_menu"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <ImageView
                android:layout_alignParentRight="true"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="8dp"
                android:layout_alignParentBottom="true"
                android:src="@drawable/icon_myyouku"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>



        <RelativeLayout
            android:id="@+id/level1"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            android:background="@drawable/level1"
            android:layout_width="100dp"
            android:layout_height="50dp">

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

    </RelativeLayout>


</android.support.constraint.ConstraintLayout>