高仿优酷菜单的效果

最新推荐文章于 2021-05-26 13:20:14 发布
最新推荐文章于 2021-05-26 13:20:14 发布
阅读量571 收藏
点赞数
分类专栏： UI界面效果总集 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LGGisKing/article/details/45484153
版权 



<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>
LuoCliper
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android 高仿优酷圆盘菜单
09-12
自定义组件，仿优酷圆盘菜单。动画类的编写，修正各种小BUG，提升用户体验。欢迎下载交流学习！
Android 高仿优酷旋转菜单
08-18
Android高仿优酷旋转菜单，实现menu键监听
android 双层旋转菜单,Android 高仿【优酷】圆盘旋转菜单的实现
weixin_36044301的博客
05-26 217
目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要.比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果首先，看下效果：以下是具体的代码及解释:1. 菜单布局文件:大家看到主要有三个Ralative...
Android 高仿【优酷】圆盘旋转菜单的实现
专注Android开发
06-17 668
目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要. 比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考. 该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果 首先，看下效果：
Android 高仿【优酷】圆盘旋转菜单 的实现
既是过河之卒，惟有奋力向前。
08-29 170
目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要. 比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.   该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果 首先，看下效果：       以下是具体的代码及解释: 1...
【Android基础】Android 高仿【优酷】圆盘旋转菜单的实现
dodod2012的专栏
04-27 884
参考地址：http://blog.csdn.net/t12x3456/article/details/7893478 目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要. 比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考. 该菜单共分里外三层导航菜单.可
android 高仿【优酷】圆盘旋转菜单 的实现
jingwenjingwen的专栏
07-26 153
MyAnimation.java Java代码 package com.ljp.youku; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.RotateAnimation; publi...
android特效集锦系列之五 仿优酷菜单
jov123的专栏
10-12 1392
1. 仿优酷菜单，优酷菜单，嗯，就这样吧 效果：       源码地址
Android 高仿【优酷】圆盘旋转菜单 的实现(转)
Hi, Sun
08-24 144
  Android 高仿【优酷】圆盘旋转菜单 的实现 分类： android2012-08-22 08:16 1393人阅读 评论(9) 收藏 举报 目前，用户对安卓应用程序的UI设计要求越来越高,因此，掌握一些新颖的设计很有必要. 比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.   该菜单...
Android 高仿优酷圆盘旋转菜单
03-16
摘要:Java源码,Android,旋转菜单,Android源码　Android高仿【优酷】圆盘旋转菜单的源码下载，Android的调试环境现还没有配置起来，暂时无法抓图，代码也没有测试，大家自己下载测试吧，当初是花了高分下载来的。
高仿【优酷】旋转菜单
09-03
高仿【优酷】旋转菜单，实现转盘式菜单显示和隐藏，非常炫的一款菜单
高仿优酷圆盘旋转菜单 的实现.zip
最新发布
04-24
高仿【优酷】圆盘旋转菜单 的实现
将图片存储到Sqlite和取出
热门推荐
LGGisKing的专栏
07-29 1万+
//第一步，将Drawable对象转化为Bitmap对象 Bitmap bmp = (((BitmapDrawable)tmp.image).getBitmap()); //第二步，声明并创建一个输出字节流对象 ByteArrayOutputStream os = new ByteArrayOutputStream(); //第三步，调用compress将Bitmap对象压
Unsupported major.minor version 52.0那点坑
LGGisKing的专栏
07-11 8030
先吐槽一下，eclipse虽然看起来简洁，但是对于android开发者来说在很多方面还是极为的的不利 先说说这个问题的来源，由于更新了最新的SDK，导致出现了 Unsupported major.minor version 52.0 就是JDK7无法编译JDK8的新特性的.class文件 解决方案：     更新到JDK8 就可以了，jdk8 对应版本52.0
retrofit合理的处理response
LGGisKing的专栏
11-23 4591
OKHttp + retrofit 有时候使用起来确实会受到一些局限比如： 处理response的加解密 处理response的返回的字段与本地封装的不一样（又不能改本地的字段，所以需要对返回的JSON进一步处理（别名的方式）） 处理response的JSON 比如： [ {""},
当前屏幕保存为图片文件的类(getWindow().getDecorView())-----截屏
LGGisKing的专栏
06-06 3257
想要做图片的分享功能，首先就需要抓屏，将当前屏幕保存为一个图片文件   让我们一起来做做截屏    package com.gaolei.framework.android.util;      import java.io.File;   import java.io.FileNotFoundException;   import jav
uniapp高仿高德
09-16
通过使用Uniapp的H5页面技术，我们可以将地图展示功能嵌入到Web页面中，让用户可以通过浏览器直接访问，并实现高仿的效果。 其次，Uniapp框架支持原生插件的集成，我们可以通过引入高德地图的原生SDK，并与Uniapp...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值