<strong>效果如图,可以点击切换,执行动画</strong>
import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
public class MainActivity extends Activity implements OnClickListener {
private RelativeLayout rl_level1;
private RelativeLayout rl_level2;
private RelativeLayout rl_level3;
//记录每层的状态
private boolean islevel1visible = true;//是否显示
private boolean islevel2visible = true;
private boolean islevel3visible = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rl_level1 = (RelativeLayout) findViewById(R.id.rl_level1);
rl_level2 = (RelativeLayout) findViewById(R.id.rl_level2);
rl_level3 = (RelativeLayout) findViewById(R.id.rl_level3);
ImageButton ib_menu = (ImageButton) findViewById(R.id.ib_menu);
ImageButton ib_home = (ImageButton) findViewById(R.id.ib_home);
ib_menu.setOnClickListener(this);
ib_home.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ib_menu:
if(islevel3visible){
//执行隐藏操作
RotateAnimation animation = getHideRotateAnimation();
rl_level3.startAnimation(animation);
islevel3visible = false;
}else{
//执行显示操作
RotateAnimation animation = getShowRotateAnimation();
rl_level3.startAnimation(animation);
islevel3visible = true;
}
break;
case R.id.ib_home:
if(islevel3visible){
//隐藏第三层 第二层 先隐藏第三层 再隐藏第二层
RotateAnimation animation = getHideRotateAnimation();
rl_level3.startAnimation(animation);
islevel3visible = false;
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
//动作结束后隐藏第二层
RotateAnimation hideRotateAnimation = getHideRotateAnimation();
rl_level2.startAnimation(hideRotateAnimation);
islevel2visible = false;
}
});
}else if(islevel2visible){
//隐藏第二层
RotateAnimation hideRotateAnimation = getHideRotateAnimation();
rl_level2.startAnimation(hideRotateAnimation);
islevel2visible = false;
}else if(islevel1visible){
//显示第二层
RotateAnimation animation = getShowRotateAnimation();
rl_level2.startAnimation(animation);
islevel2visible = true;
}
break;
default:
break;
}
}
/**
* 获取隐藏动作
* @return
*/
public RotateAnimation getHideRotateAnimation(){
RotateAnimation animation = new RotateAnimation(
0, -180,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 1);
animation.setFillAfter(true);//保持动画后的效果
animation.setDuration(500);
return animation;
}
/**
* 获取显示动作
* @return
*/
public RotateAnimation getShowRotateAnimation(){
RotateAnimation animation = new RotateAnimation(
-180, 0,
Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 1);
animation.setFillAfter(true);//保持动画后的效果
animation.setDuration(500);
return animation;
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_MENU){
if(islevel1visible){//菜单是显示的
if(islevel3visible){//全部显示
//3 层都需要隐藏
operatorHide(rl_level3,rl_level2,rl_level1);
}else if(islevel2visible){//显示的第二层 第一层
//2层需要隐藏
operatorHide(rl_level2,rl_level1);
}else if(islevel1visible){//显示的是第一层
//1层需要隐藏
operatorHide(rl_level1);
}
//都是需要执行隐藏动画
}else{//菜单是隐藏的
//显示第一层
RotateAnimation animation = getShowRotateAnimation();
rl_level1.startAnimation(animation);
islevel1visible = true;
}
return true;
}
return super.onKeyDown(keyCode, event);
}
/**
* 执行隐藏操作
* @param views 可变参数 传递的参数一定要按顺序的
*/
public void operatorHide(final View ...views){
if(views.length == 1){//level1
RotateAnimation animation = getHideRotateAnimation();
views[0].startAnimation(animation);
islevel1visible = false;
}else if(views.length == 2){//level2 level1
RotateAnimation animation = getHideRotateAnimation();
views[0].startAnimation(animation);
islevel2visible = false;
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
RotateAnimation hideRotateAnimation = getHideRotateAnimation();
views[1].startAnimation(hideRotateAnimation);
islevel1visible = false;
}
});
}else if(views.length == 3){//level3 level2 level1
RotateAnimation animation = getHideRotateAnimation();
views[0].startAnimation(animation);
islevel3visible = false;
animation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
RotateAnimation hideRotateAnimation = getHideRotateAnimation();
views[1].startAnimation(hideRotateAnimation);
islevel2visible = false;
hideRotateAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
RotateAnimation rotateAnimation = getHideRotateAnimation();
views[2].startAnimation(rotateAnimation);
islevel1visible = false;
}
});
}
});
}
}
}
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"
android:background="@drawable/bg"
tools:context=".MainActivity" >
<!-- 菜单 :是由三部分组成-->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- 第三层 -->
<RelativeLayout
android:id="@+id/rl_level3"
android:layout_width="280dp"
android:layout_height="140dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="@drawable/level3">
<ImageButton
android:id="@+id/channel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel1"
android:layout_alignParentBottom="true"/>
<ImageButton
android:id="@+id/channel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel2"
android:layout_toRightOf="@id/channel1"
android:layout_marginTop="60dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel3"
android:layout_toRightOf="@id/channel2"
android:layout_marginLeft="5dp"
android:layout_marginTop="20dp"
/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel4"
android:layout_centerHorizontal="true"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel5"
android:layout_toLeftOf="@+id/channel6"
android:layout_marginTop="20dp"
android:layout_marginRight="5dp"/>
<ImageButton
android:id="@+id/channel6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel6"
android:layout_toLeftOf="@+id/channel7"
android:layout_marginTop="60dp"
/>
<ImageButton
android:id="@+id/channel7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/channel7"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
<!-- 第二层 -->
<RelativeLayout
android:id="@+id/rl_level2"
android:layout_width="180dp"
android:layout_height="90dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="@drawable/level2">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon_search"
android:layout_alignParentBottom="true"
/>
<ImageButton
android:id="@+id/ib_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon_menu"
android:layout_centerHorizontal="true"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/icon_myyouku"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
<!-- 第一层 -->
<RelativeLayout
android:id="@+id/rl_level1"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:background="@drawable/level1">
<ImageButton
android:id="@+id/ib_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/icon_home"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>