Android之——史上最简单旋转菜单实现效果

转载请注明出处:/article/8380863.html

由于身体原因，前几天没有给大家更新博客，那么，今天我们就来一起实现一个非常酷炫的旋转菜单效果吧。在很多APP中，不难发现，人家把菜单效果设计的那叫一个酷炫啊，其中一种设计就是将菜单设计成旋转的效果。好了，那么这么酷炫的菜单效果是如何实现的呢？下面，就让我们一起来实现这个酷炫的菜单效果吧。

一、原理

老规矩，还是先唠叨下原理级别的东西。

这个示例的实现原理很简单，利用Android中的相对布局在界面上实现嵌套的三层原型菜单，一级菜单在最内层，二级菜单次之，三级菜单在最外层。

1、一级菜单总会显示；

2、点击一级菜单，若菜单全部显示，则先旋转消失三级菜单，然后旋转消失二级菜单；若只显示二级菜单，则旋转消失二级菜单；若没有菜单显示，则旋转显示二级菜单；

3、点击二级菜单，若三级菜单显示，则旋转消失三级菜单；若三级菜单不显示，则旋转显示三级菜单。

原理啰嗦完了，是不是很简单呢？下面，我们就来一起实现这些效果吧。

二、实现

1、自定义动画类MyAnimation

这个类中主要有两个动画方法，一个是入动画方法startAnimationIn，一个是出动画方法startAnimationOut

1)入动画方法
这个动画效果以旋转效果实现，从-180到0

具体实现代码如下:

//入动画效果
public static void startAnimationIn(ViewGroup viewGroup, int duration){
for(int i = 0; i < viewGroup.getChildCount(); i++){
View view = viewGroup.getChildAt(i);
view.setVisibility(View.VISIBLE);
view.setClickable(true);
view.setFocusable(true);
}
Animation animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
animation.setFillAfter(true);
animation.setDuration(duration);
viewGroup.startAnimation(animation);
}

2)出动画方法
这个方法基本与入动画效果相同，唯一的不同是旋转是从0到-180，同时在旋转结束后设置控件的显示效果

具体实现代码如下:

//出动画效果
public static void startAnimationOut(final ViewGroup viewGroup, int duration, int startOffSet){
Animation animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
animation.setFillAfter(true);
animation.setDuration(duration);
animation.setStartOffset(startOffSet);
animation.setAnimationListener(new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {

}

@Override
public void onAnimationRepeat(Animation animation) {

}

@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
for(int i = 0; i < viewGroup.getChildCount(); i++){
View view = viewGroup.getChildAt(i);
view.setVisibility(View.GONE);
view.setClickable(false);
view.setFocusable(false);
}
viewGroup.setVisibility(View.GONE);
}
});
viewGroup.startAnimation(animation);
}

3)完整代码如下:

package com.lyz.youku_menu.activity;

import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;

/**
* 自定义动画效果
* @author liuyazhuang
*
*/
public class MyAnimation {

//入动画效果
public static void startAnimationIn(ViewGroup viewGroup, int duration){
for(int i = 0; i < viewGroup.getChildCount(); i++){
View view = viewGroup.getChildAt(i);
view.setVisibility(View.VISIBLE);
view.setClickable(true);
view.setFocusable(true);
}
Animation animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
animation.setFillAfter(true);
animation.setDuration(duration);
viewGroup.startAnimation(animation);
}

//出动画效果
public static void startAnimationOut(final ViewGroup viewGroup, int duration, int startOffSet){
Animation animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);
animation.setFillAfter(true);
animation.setDuration(duration);
animation.setStartOffset(startOffSet);
animation.setAnimationListener(new Animation.AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {

}

@Override
public void onAnimationRepeat(Animation animation) {

}

@Override
public void onAnimationEnd(Animation animation) {
// TODO Auto-generated method stub
for(int i = 0; i < viewGroup.getChildCount(); i++){
View view = viewGroup.getChildAt(i);
view.setVisibility(View.GONE);
view.setClickable(false);
view.setFocusable(false);
}
viewGroup.setVisibility(View.GONE);
}
});
viewGroup.startAnimation(animation);
}
}

2、MainActivity

所有的实现都是在MainActivity中实现的，在这个类中，首先我们找到界面上所有的控件，然后设置两个boolean类型的标识位，分别标识二级菜单和三级菜单是否显示，然后为home和menu两个菜单设置点击事件，在点击事件中完成菜单的动画效果。

具体实现代码如下:

package com.lyz.youku_menu.activity;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ImageButton;
import android.widget.RelativeLayout;

/**
* 主页面实现
* @author liuyazhuang
*
*/
public class MainActivity extends Activity {

private ImageButton home;
private ImageButton search;
private ImageButton menu;
private ImageButton myyouku;
private ImageButton c1;
private ImageButton c2;
private ImageButton c3;
private ImageButton c4;
private ImageButton c7;
private ImageButton c6;
private ImageButton c5;
private RelativeLayout level1;
private RelativeLayout level2;
private RelativeLayout level3;

private boolean isLevel2Show = true;
private boolean isLevel3Show = true;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
home = (ImageButton) findViewById(R.id.home);
search = (ImageButton) findViewById(R.id.search);
menu = (ImageButton) findViewById(R.id.menu);
myyouku = (ImageButton) findViewById(R.id.myyouku);
c1 = (ImageButton) findViewById(R.id.c1);
c2 = (ImageButton) findViewById(R.id.c2);
c3 = (ImageButton) findViewById(R.id.c3);
c4 = (ImageButton) findViewById(R.id.c4);
c7 = (ImageButton) findViewById(R.id.c7);
c6 = (ImageButton) findViewById(R.id.c6);
c5 = (ImageButton) findViewById(R.id.c5);
level1 = (RelativeLayout) findViewById(R.id.level1);
level2 = (RelativeLayout) findViewById(R.id.level2);
level3 = (RelativeLayout) findViewById(R.id.level3);

menu.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(isLevel3Show){
MyAnimation.startAnimationOut(level3, 500, 0);
}else{
MyAnimation.startAnimationIn(level3, 500);
}
isLevel3Show = !isLevel3Show;
}
});

home.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(!isLevel2Show){
MyAnimation.startAnimationIn(level2, 500);
}else{
if(isLevel3Show){
MyAnimation.startAnimationOut(level3, 500, 0);
MyAnimation.startAnimationOut(level2, 500, 500);
isLevel3Show = !isLevel3Show;
}else{
MyAnimation.startAnimationOut(level2, 500, 0);
}
}
isLevel2Show = !isLevel2Show;
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<RelativeLayout
android:id="@+id/level1"
android:layout_width="100dip"
android:layout_height="50dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level1" >

<ImageButton
android:id="@+id/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="180dip"
android:layout_height="90dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level2" >

<ImageButton
android:id="@+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="6dip"
android:layout_marginLeft="12dip"
android:background="@drawable/ic_action_search" />

<ImageButton
android:id="@+id/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="6dip"
android:background="@drawable/icon_menu" />

<ImageButton
android:id="@+id/myyouku"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="6dip"
android:layout_marginRight="12dip"
android:background="@drawable/icon_myyouku" />
</RelativeLayout>

<RelativeLayout
android:id="@+id/level3"
android:layout_width="280dip"
android:layout_height="140dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="@drawable/level3" >

<ImageButton
android:id="@+id/c1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="6dip"
android:layout_marginLeft="12dip"
android:background="@drawable/channel1" />

<ImageButton
android:id="@+id/c2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/c1"
android:layout_marginBottom="12dip"
android:layout_marginLeft="30dip"
android:background="@drawable/channel2" />

<ImageButton
android:id="@+id/c3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/c2"
android:layout_toRightOf="@id/c2"
android:layout_marginBottom="12dip"
android:layout_marginLeft="8dip"
android:background="@drawable/channel3" />

<ImageButton
android:id="@+id/c4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_margin="6dip"
android:background="@drawable/channel4" />

<ImageButton
android:id="@+id/c7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="6dip"
android:layout_marginRight="12dip"
android:background="@drawable/channel7" />

<ImageButton
android:id="@+id/c6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/c7"
android:layout_alignParentRight="true"
android:layout_marginBottom="12dip"
android:layout_marginRight="30dip"
android:background="@drawable/channel6" />

<ImageButton
android:id="@+id/c5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/c6"
android:layout_toLeftOf="@id/c6"
android:layout_marginBottom="12dip"
android:layout_marginRight="8dip"
android:background="@drawable/channel5" />

</RelativeLayout>

</RelativeLayout>

4、AndroidManifest.xml

这个文件没有添加任何内容，都是Android自动生成的文件内容。

具体如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.lyz.youku_menu.activity"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="18" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.lyz.youku_menu.activity.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

三、运行效果

四、温馨提示

大家可以到链接http://download.csdn.net/detail/l1028386804/9057109下载完整的旋转菜单实现示例源代码

本实例中，为了方面，我把一些文字直接写在了布局文件中和相关的类中，大家在真实的项目中要把这些文字写在string.xml文件中，在外部引用这些资源，切记，这是作为一个Android程序员最基本的开发常识和规范，我在这里只是为了方便直接写在了类和布局文件中。