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程序员最基本的开发常识和规范，我在这里只是为了方便直接写在了类和布局文件中。

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-11-03 01:31:59

Android之——史上最简单旋转菜单实现效果的相关文章

Android之——史上最简单最酷炫的3D图片浏览效果的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48052709 如今,Android开发已经成为移动互联开发领域中一支不可或缺的力量,那么Android中要实现3D的效果那也就是合情合理的事情了.那么,如何在Android中实现像IOS中那样的3D图片浏览效果呢?下面,鄙人将重磅推出今天的重点博文,和大家一起在Android中实现酷炫的3D图片浏览效果. 一.原理 老规矩,还是要来啰嗦下原理的东西. 整体实现是以手机屏幕的正中间

Android之——史上最简单图片轮播广告效果实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48049913 如今的Android开发需求越来越来多,实现效果越来越酷炫,很多Android APP都要实现PC网站上那样的图片轮播效果,那么,这些图片的轮播效果是如何实现的呢?下面,我就跟大家一起来实现这些酷炫的功能. 一.原理 首先,将这些要轮播的图片和一些文本分别放置在不同的数据集合中,程序启动的时候默认显示一组图片和文本数据,然后启动一个定时器,每隔一段时间便替换掉显示的

【Android】史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS

本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/53157090 本文出自:[张旭童的博客](http://blog.csdn.net/zxt0601) 代码传送门:喜欢的话,随手点个star.多谢 https://github.com/mcxtzhang/SwipeDelMenuLayout 重要的话 开头说,not for the RecyclerView or L

Android之——史上最简单自定义开关按钮的实现

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/48102871 很多时候,我们在很多无论是Android还是IOS的APP中都会遇到这样的一种效果,有一个按钮,我们点击一下,便会滑动一下,一会显示"开",一会显示"关",这便是开关按钮了,比如:很多Android手机的设置功能里,就有很多功能是用开关按钮实现的,那么这些开关按钮时如何实现的呢?下面,就让我们一起来实现这个功能吧. 一.原理 我们在界面

Android 自定义控件打造史上最简单的侧滑菜单

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39185641 ,本文出自[张鸿洋的博客] 侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最

Android滑动菜单特效实现，仿人人客户端侧滑效果，史上最简单的侧滑实现

本文首发于CSDN博客,转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/8714621 人人客户端有一个特效还是挺吸引人的,在主界面手指向右滑动,就可以将菜单展示出来,而主界面会被隐藏大部分,但是仍有左侧的一小部分同菜单一起展示. 据说人人客户端的这个特效是从facebook客户端模仿来的,至于facebook是不是又从其它地方模仿来的就不得而知了.好,今天我们就一起来实现这个效果,总之我第一次看到这个特效是在人人客户端看到的,我

开源框架】Android之史上最全最简单最有用的第三方开源库收集整理，有助于快速开发

[原][开源框架]Android之史上最全最简单最有用的第三方开源库收集整理,有助于快速开发,欢迎各位... 时间 2015-01-05 10:08:18 我是程序猿,我为自己代言 原文  http://blog.csdn.net/caoyouxing/article/details/42418591 主题 开源 安卓开发 http://www.tuicool.com/articles/jyA3MrU Android开源库 自己一直很喜欢Android开发,就如博客签名一样, 我是程序猿,我为自

史上最简单，一步集成侧滑(删除)菜单，高仿QQ、IOS。

重要的话 开头说,not for the RecyclerView or ListView, for the Any ViewGroup. 本控件不依赖任何父布局,不是针对 RecyclerView.ListView,而是任意的ViewGroup里的childView都可以使用侧滑(删除)菜单.支持任意ViewGroup.0耦合.史上最简单. 概述 本控件从撸出来在项目使用至今已经过去7个月,距离第一次将它push至github上,也已经2月+.(之前,我发表过一篇文章.传送门:http://b

史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战>就是一本写给没钱没身份没资历的创业小白看的APP书,看完这本书你可以拥有自己的一个APP,不用花钱就能移植到其他移动平台,支持iOS,Android,Windows Phone!!!!!!!!找个最便宜的来练手吧!  小白APP交流Q群:  348632872 清华大学出版社推出的<构建跨平台APP:j