效果图
项目概述
首先,我们学习如何自定义一个组合控件,其中,优酷菜单是一个典型的自定义组合控件,它的效果图如图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=