自定义View

XML文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    >
    <!--第一层-->
    <RelativeLayout
        android:id="@+id/level1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@mipmap/level1"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        >
        <ImageView
            android:id="@+id/image_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_home"
            android:layout_centerInParent="true"
            />
    </RelativeLayout>
    <!--第二层-->
    <RelativeLayout
        android:id="@+id/level2"
        android:layout_width="180dp"
        android:layout_height="90dp"
        android:background="@mipmap/level2"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_search"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_myyouku"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            />
        <ImageView
            android:id="@+id/image_menu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/icon_menu"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dp"
            />
    </RelativeLayout>
    <!--第三层-->
    <RelativeLayout
        android:id="@+id/level3"
        android:layout_width="280dp"
        android:layout_height="140dp"
        android:background="@mipmap/level3"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        >
        <ImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel4"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            />
        <ImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel3"
            android:layout_alignRight="@id/image4"
            android:layout_marginRight="60dp"
            android:layout_marginTop="30dp"
            />
        <ImageView
            android:id="@+id/image5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel5"
            android:layout_alignLeft="@id/image4"
            android:layout_marginLeft="60dp"
            android:layout_marginTop="30dp"
            />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel2"
            android:layout_below="@id/image3"
            android:layout_alignRight="@id/image3"
            android:layout_marginRight="30dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel6"
            android:layout_below="@id/image5"
            android:layout_alignLeft="@id/image5"
            android:layout_marginLeft="30dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel1"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/channel7"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:layout_alignParentRight="true"
            />
    </RelativeLayout>

</RelativeLayout>
package com.example.administrator.app2;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;

/**
 * Created by Administrator on 2016/6/17 0017.
 * <p/>
 * 继承相对布局,把XML文件加载过来
 */
public class YouKuView extends RelativeLayout implements ImageView.OnClickListener {

    private RelativeLayout level1, level2, level3;
    private ImageView imageHome, imageMenu;

    public YouKuView(Context context) {
        super(context);
        init();
    }

    public YouKuView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        LayoutInflater inflater = LayoutInflater.from(getContext());
        View view = inflater.inflate(R.layout.layout_youku, this, true);
        level1 = (RelativeLayout) view.findViewById(R.id.level1);
        level2 = (RelativeLayout) view.findViewById(R.id.level2);
        level3 = (RelativeLayout) view.findViewById(R.id.level3);

        imageHome = (ImageView) view.findViewById(R.id.image_home);
        imageMenu = (ImageView) view.findViewById(R.id.image_menu);

        //添加点击事件
        imageHome.setOnClickListener(this);
        imageMenu.setOnClickListener(this);

    }


    private boolean level1_flag = true;
    private boolean level2_flag = true;
    private boolean level3_flag = true;

    @Override
    public void onClick(View v) {//监听点击事件
        switch (v.getId()) {
            case R.id.image_home:
                System.out.print("--------------点击了第一层的按钮.........");

                if (level3_flag) {//如果是true就隐藏
                    AnimatUtils.showInt(level3, 0);//隐藏
                    AnimatUtils.showInt(level2, 30);
                    level3_flag = false;
                    level2_flag = false;

                } else {

                    if (level2_flag) {
                        AnimatUtils.showInt(level2, 0);//隐藏
                    } else {
                        AnimatUtils.showOut(level2, 0);//显示
                    }
                    level2_flag = !level2_flag;

                }

                break;

            case R.id.image_menu:

                System.out.print("--------------点击了第二层的按钮.........");
                if(level3_flag){
                    AnimatUtils.showInt(level3,0);//隐藏
                }else{
                    AnimatUtils.showOut(level3,0);//显示
                }
                level3_flag=!level3_flag;

                break;
        }
    }
}

布局动画的工具类

package com.example.administrator.app2;

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

/**
 * Created by Administrator on 2016/6/17 0017.
 *
 * 动画的工具类
 * 补间动画
 */
public class AnimatUtils {

    //显示图片的动画
    public static void showOut(RelativeLayout target,long offset){

        RotateAnimation animation=new RotateAnimation(
           -180,0,RotateAnimation.RELATIVE_TO_SELF,0.5f,
                RotateAnimation.RELATIVE_TO_SELF,1.0f);

        animation.setDuration(100);
        animation.setFillAfter(true);
        animation.setStartOffset(offset);
        target.startAnimation(animation);



    }


      //隐藏效果的动画
    public static void showInt(RelativeLayout target,long offset){

        RotateAnimation animation=new RotateAnimation(
           0,-180,RotateAnimation.RELATIVE_TO_SELF,0.5f,
                RotateAnimation.RELATIVE_TO_SELF,1.0f);

        animation.setDuration(100);
        animation.setFillAfter(true);
        animation.setStartOffset(offset);
        target.startAnimation(animation);

    }











}

在UI主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"
    tools:context="com.example.administrator.app2.MainActivity">

    <com.example.administrator.app2.YouKuView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</RelativeLayout>