自定义控件：旋转菜单

效果图

项目概述

首先，我们学习如何自定义一个组合控件，其中，优酷菜单是一个典型的自定义组合控件，它的效果图如图1-1 所示：

图中由中间往外，分别是一级菜单、二级菜单、三级菜单。其基本用法是:点击一级菜单后加载二级菜单，再点击二级菜单加载三级菜单，如图1-2（c）—(d)—（e）—（f），再点击一级菜单分别隐藏三级、二级菜单
1-2（a）—（b）。并且点击手机菜单键，让菜单根据状态来显示和隐藏，演示效果图如图1-2 所示。

优酷菜单UI

优酷菜单的整体布局采用RelativeLayout，每一级菜单都是一个RelativeLayout。优酷菜单的布局文件activity_main.xml，具体的代码如文件【1-1】所示：
【文件1-1】activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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">
    <!--三级菜单-->
    <RelativeLayout
        android:id="@+id/rl_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/iv_channel1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="10dp"
            android:src="@drawable/channel1"/>

        <ImageView
            android:id="@+id/iv_channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel1"
            android:layout_alignLeft="@id/iv_channel1"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="25dp"
            android:src="@drawable/channel2"/>

        <ImageView
            android:id="@+id/iv_channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel2"
            android:layout_alignLeft="@id/iv_channel2"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="35dp"
            android:src="@drawable/channel3"/>

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

        <ImageView
            android:id="@+id/iv_channel7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp"
            android:src="@drawable/channel7"/>

        <ImageView
            android:id="@+id/iv_channel6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel7"
            android:layout_alignRight="@id/iv_channel7"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="25dp"
            android:src="@drawable/channel6"/>

        <ImageView
            android:id="@+id/iv_channel5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/iv_channel6"
            android:layout_alignRight="@id/iv_channel6"
            android:layout_marginBottom="5dp"
            android:layout_marginRight="35dp"
            android:src="@drawable/channel5"/>
    </RelativeLayout>

    <!--二级菜单-->
    <RelativeLayout
        android:id="@+id/rl_level2"
        android:layout_width=