实现的效果图:
逻辑并不是很难,主要有三点:
1.他的布局
2.动画的原理
3.onkeydown监听menu按键的事件
第一个:
<span style="font-size:12px;"><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="${relativePackage}.${activityClass}" >
<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="10dp"
android:background="@drawable/icon_search" />
<ImageView
android:id="@+id/icon_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
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="10dp"
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_marginLeft="10dp"
android:layout_marginBottom="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_marginLeft="20dp"
android:layout_marginBottom="6dp"
android:background="@drawable/channel2" />
<!-- android:layout_alignLeft="@id/channel1" 和channel1控件左边对齐-->
<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_marginLeft="30dp"
android:layout_marginBottom="6dp"
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/channel5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/channel6"
android:layout_alignRight="@+id/channel6"
android:layout_marginRight="30dp"
android:layout_marginBottom="6dp"
android:background="@drawable/channel5" />
<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_marginRight="20dp"
android:layout_marginBottom="6dp"
android:background="@drawable/channel6" />
<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_marginRight="10dp"
android:layout_marginBottom="10dp"
android:background="@drawable/channel7" />
</RelativeLayout>
</RelativeLayout></span>
第二个:
<span style="font-size:12px;font-weight: normal;">package com.dystu.youkudemo;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;
public class MyUtils {
/**
*
* 旋转离开的动画
*
* @param view
*/
public static void startAnimationOut(RelativeLayout view) {
/**
*
* 默认圆心为View的左上角
*
* 水平向右:0度 顺时针旋转度数增加
*
*
*/
RotateAnimation animation = new RotateAnimation(0, 180,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
//动画执行完以后,保持最后的状态
animation.setFillAfter(true);
view.startAnimation(animation);
}
/**
*
* 旋转进入的动画
*
* @param view
*/
public static void startAnimationIn(RelativeLayout view) {
RotateAnimation animation = new RotateAnimation(180, 360,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
animation.setFillAfter(true);
view.startAnimation(animation);
}
/**
*
* 让指定view延时执行旋转离开的方法
*
* @param level3
* @param i 延时的时间
*/
public static void startAnimationOut(RelativeLayout view, long offset) {
/**
*
* 默认圆心为View的左上角
*
* 水平向右:0度 顺时针旋转度数增加
*
*
*/
RotateAnimation animation = new RotateAnimation(0, 180,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
//动画执行完以后,保持最后的状态
animation.setFillAfter(true);
//设置延时执行的动画
animation.setStartOffset(offset);
view.startAnimation(animation);
}
}
</span>
3.
<span style="font-size:12px;font-weight: normal;">package com.dystu.youkudemo;
import android.view.animation.RotateAnimation;
import android.widget.RelativeLayout;
public class MyUtils {
/**
*
* 旋转离开的动画
*
* @param view
*/
public static void startAnimationOut(RelativeLayout view) {
/**
*
* 默认圆心为View的左上角
*
* 水平向右:0度 顺时针旋转度数增加
*
*
*/
RotateAnimation animation = new RotateAnimation(0, 180,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
//动画执行完以后,保持最后的状态
animation.setFillAfter(true);
view.startAnimation(animation);
}
/**
*
* 旋转进入的动画
*
* @param view
*/
public static void startAnimationIn(RelativeLayout view) {
RotateAnimation animation = new RotateAnimation(180, 360,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
animation.setFillAfter(true);
view.startAnimation(animation);
}
/**
*
* 让指定view延时执行旋转离开的方法
*
* @param level3
* @param i 延时的时间
*/
public static void startAnimationOut(RelativeLayout view, long offset) {
/**
*
* 默认圆心为View的左上角
*
* 水平向右:0度 顺时针旋转度数增加
*
*
*/
RotateAnimation animation = new RotateAnimation(0, 180,
view.getWidth() / 2, view.getHeight());
animation.setDuration(500);
//动画执行完以后,保持最后的状态
animation.setFillAfter(true);
//设置延时执行的动画
animation.setStartOffset(offset);
view.startAnimation(animation);
}
}
</span>
package com.dystu.youkudemo;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends Activity implements OnClickListener {
private ImageView icon_menu, icon_home;
private RelativeLayout level1;
private RelativeLayout level2;
private RelativeLayout level3;
// 用于判断第三级菜单是否显示 默认是显示的(true)
private boolean isLevel3Show = true;
private boolean isLevel2Show = true;
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);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.icon_menu:
// 如果第三级菜单是显示状态,则隐藏,反之,则显示;
if (isLevel3Show) {
// 隐藏第三级菜单
MyUtils.startAnimationOut(level3);
} else {
// 显示
MyUtils.startAnimationIn(level3);
}
isLevel3Show = !isLevel3Show;
break;
case R.id.icon_home:
// 如果二级菜单是显示状态,那么就隐藏2,3级菜单;
// 如果二级菜单是隐藏状态,那么就显示2级菜单。
if (isLevel2Show) {
MyUtils.startAnimationOut(level2);
isLevel2Show = false;
if (isLevel3Show) {
// 如果第三级菜单也显示,那也将其隐藏
MyUtils.startAnimationOut(level3);
isLevel3Show = false;
}
} else {
MyUtils.startAnimationIn(level2);
isLevel2Show = true;
}
break;
default:
break;
}
}
/**
*
* 监听menu按键的事件
*
*/
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
changeLevel1State();
}
return super.onKeyDown(keyCode, event);
}
/**
*
*
* 改变第一级菜单的状态
*
*/
private void changeLevel1State() {
// 如果第一级菜单是显示状态 那么隐藏1,2,3级菜单
// 如果第一级菜单是隐藏状态,那么显示1,2级菜单
if (isLevel1Show) {
MyUtils.startAnimationOut(level1);
isLevel1Show = false;
if (isLevel2Show) {
MyUtils.startAnimationOut(level2);
isLevel2Show = false;
if (isLevel3Show) {
MyUtils.startAnimationOut(level3);
isLevel3Show = false;
}
}
} else {
MyUtils.startAnimationIn(level1);
isLevel1Show = true;
MyUtils.startAnimationIn(level2);
isLevel2Show = true;
}
}
}