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

标签：android   动画   界面   菜单   旋转   

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48048323

由于身体原因，前几天没有给大家更新博客，那么，今天我们就来一起实现一个非常酷炫的旋转菜单效果吧。在很多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程序员最基本的开发常识和规范，我在这里只是为了方便直接写在了类和布局文件中。

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

标签：android   动画   界面   菜单   旋转   

原文地址：http://blog.csdn.net/l1028386804/article/details/48048323