自定义控件（视图）2期笔记02：自定义控件之使用系统控件（优酷案例之环形菜单布局）

1.首先我们看看效果图：

这是优酷布局效果图：

 

2. 下面是我们最终编写的程序的效果图：

 

3. 下面就是详细演示这个效果的实现过程

（1）新建一个Android工程，命名为"优酷菜单"，如下：

 

（2）这里的图片资源都是美工开发好的给我们的，如下：

 

我们把这些图片拷贝到res/drawable（工程图片资源文件），如下：

 

（3）三级菜单实现的效果如下，布局activity_main.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="com.himi.youkumenu.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

    <ImageView
        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/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level2" />
    
     <ImageView
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/level3" />
</RelativeLayout>

布局效果如下：

 

这样设计确实可以实现三级菜单的效果，但是后面每一级菜单上面都会有很多小图标，这里设置ImageView不利于后面菜单摆放图标，必须修改。

这里activity_main.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="com.himi.youkumenu.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

    <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" /> 

    <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" />
    
     <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" />
</RelativeLayout>

把之前的ImageView改成RelativeLayout布局，方便之后每级菜单摆放小图标。

 

（4）接下来实现三级菜单的图标摆放，如下：

activity_main.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="com.himi.youkumenu.MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/hello_world" />

    <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
        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:id="@+id/icon_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_margin="8dp"
            android:background="@drawable/icon_search" />

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

        <ImageView
            android:id="@+id/icon_myyouku"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="8dp"
            android:background="@drawable/icon_myyouku" />
    </RelativeLayout>

    <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:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/channel1" />

        <ImageView
            android:id="@+id/channel2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel1"
            android:layout_alignLeft="@id/channel1"
            android:layout_marginBottom="6dp"
            android:layout_marginLeft="20dp"
            android:background="@drawable/channel2" />

        <ImageView
            android:id="@+id/channel3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/channel2"
            android:layout_alignLeft="@id/channel2"
            android:layout_marginBottom="6dp"
            android:layout_marginLeft="30dp"
            android:background="@drawable/channel3" />

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

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

        <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="6dp"
            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="6dp"
            android:layout_marginRight="30dp"
            android:background="@drawable/channel5" />
    </RelativeLayout>

</RelativeLayout>

布局效果如下：

 

 

这里第1级菜单 和 第2级菜单实现没什么好讲的，关键是第3级菜单，分析思路如下：

 

第3级菜单左右分为一半，同时channel4为中间一个。

左半部分：channel1为左半部分定位基准

•channel1为左边第一个，让它和父容器的底部对齐（默认是靠左），为了美观好看一点我们添加属性：android:layout_marginBottom="10dp"  和 android:layout_marginLeft="10dp"

•channel2是以channel1为基准进行对齐的，channel2在channel1右上角，但是只要实现channel2在channel1上面的属性：android:layout_above="@id/channel1"，没有实现直接属性实现channel2在channel1的右边，该怎么办呢? 这里我们可以先让channel2和channel1进行左对齐，然后设置靠左的边距适当即可：android:layout_alignLeft="@id/channel1"（channel2和channel1左对齐），android:layout_marginLeft="20dp"（设置靠左边距）

•同样道理channel3是以channel2为基准进行对齐的，思路和上面一样。

 

右半部分：思路和上面过程是一致的，这个时候是以channel7为右半部分定位基准

•channel7为右半部分定位基准，而且channel7和channel1是对称的，这样的话，也就是channel7和channel1布局是一致只不过，左右位置调换，如下：

      

 

•其余也是对称设置，channel2 和channel6   ，channel3 和channel5

 

（5）下面就要实现代码部分，利用Animation旋转出现、消失菜单。

首先我们必须知道旋转的坐标系，如下：

 

（6）来到MainActivity，搭建实现逻辑框架，如下：

package com.himi.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 ImageView icon_menu;
    private ImageView icon_home;
    
    private RelativeLayout level1;
    private RelativeLayout level2;
    private RelativeLayout level3;
    /**
     * 判断第3级菜单是否显示
     * true 显示 (默认)
     * false 隐藏
     */
    private boolean isLevel3Show = true;
    /**
     * 判断2级菜单是否显示
     * true 显示 (默认)
     * false 隐藏
     */
    private boolean isLevel2Show = true;
    /**
     * 判断1级菜单是否显示
     * true 显示 (默认)
     * false 隐藏
     */
    private boolean isLevel1Show = 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);
        
        icon_home.setOnClickListener(this);
        icon_menu.setOnClickListener(this);
    }

    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.icon_menu:// 处理menu的点击的事件
            // 如果第3级菜单是显示状态，那么将其隐藏
            if (isLevel3Show) {
                MyUtils.startAnimOut(level3);
            } else {
                // 如果第3级菜单是隐藏状态，那么将其显示
                MyUtils.startAnimIn(level3);
            }

            isLevel3Show = !isLevel3Show;
            break;

        case R.id.icon_home:// 处理home的点击的事件
            // 如果第2级菜单是显示状态，那么就隐藏2,3级菜单
            if (isLevel2Show) {
                MyUtils.startAnimOut(level2);
                isLevel2Show = false;

                if (isLevel3Show) {// 如果此时第3级菜单是显示状态，那么将其隐藏

                    // 这里不能使用Thread.sleep延迟时间，因为这个办法会是整个线程处于休眠状态，上面的2级菜单也不会旋转离开
                    MyUtils.startAnimOut(level3, 200);
                    isLevel3Show = false;
                }

            } else {
                // 如果第2级菜单是隐藏状态，那么就显示2级菜单
                MyUtils.startAnimIn(level2);
                isLevel2Show = true;
            }

            break;
        }
    }
    
    /**
     * 监听按键的动作
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_MENU) {//监听menu按键
            changeLevelState();
        }
        return super.onKeyDown(keyCode, event);
    }

    /**
     * 改变第1级菜单的状态
     */
    private void changeLevelState() {
        //如果第1菜单是显示状态,隐藏1,2,3级菜单
        
        if(isLevel1Show) {
            MyUtils.startAnimOut(level1);
            isLevel1Show = false;
            
            if(isLevel2Show) {
                MyUtils.startAnimOut(level2,100);
                isLevel2Show = false;
                
                if(isLevel3Show) {
                    MyUtils.startAnimOut(level3,200);
                    isLevel3Show = false;
                }
            }    
            
        } else {
            //如果第1菜单是隐藏状态,显示1,2级菜单
            MyUtils.startAnimIn(level1);
            isLevel1Show = true;
            
            MyUtils.startAnimIn(level2,200);
            isLevel2Show = true;
        }
        
    }
    


    
}

其中要用到的工具类MyUtils（实现View旋转的方法工具），如下：

package com.himi.youkumenu;

import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;

public class MyUtils {
    
    /**
     * 菜单顺时针旋转离开
     * @param view
     */
    public static void startAnimOut(RelativeLayout view) {
        startAnimOut(view, 0);
    }

    
    /**
     * 菜单顺时针旋转进入
     * @param view
     */
    public static void startAnimIn(RelativeLayout view) {
        startAnimIn(view,0);
    }
    
    /**
     * 让指定的view延时执行旋转离开的画面
     * @param view
     * @param offset 延时时间
     */
    public static void startAnimOut(RelativeLayout view, long offset) {
        /**
         * 默认圆心为view的左上角
         * 水平向右为 0度
         * 顺时针旋转度数增加
         * 顺时针旋转离开度数变化是：0 ~ 180
         */
        RotateAnimation animation = new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());
        animation.setDuration(500);//设置运行的时间
        animation.setFillAfter(true);//动画执行完了之后，保持最后的状态
        animation.setStartOffset(offset);//设置延时执行的时间参数
        view.startAnimation(animation);//上面是设置动画效果参数,传入到view的方法startAnimation()方法.    
    }

    /**
     * 让指定的view延时执行旋转进入的画面
     * @param view
     * @param offset 延时时间
     */

    public static void startAnimIn(RelativeLayout view, long offset) {
        /**
         * 默认圆心为view的左上角
         * 水平向右为 0度
         * 顺时针旋转度数增加
         * 顺时针旋转离开度数变化是：180 ~ 360
         */
        RotateAnimation animation = new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());
        animation.setDuration(500);//设置运行的时间
        animation.setFillAfter(true);//动画执行完了之后，保持最后的状态
        animation.setStartOffset(offset);
        view.startAnimation(animation);
        
    }

}

 

（7）部署程序到模拟器上，如下：