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>