目前，用户对安卓应用程序的UI设计要求越来越高，因此，掌握一些新颖的设计很有必要,比如菜单，传统的菜单已经不能满足用户的需求。其中圆盘旋转菜单的实现就比较好，该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果,首先，看下效果：
源码下载：http://download.csdn.net/detail/weidi1989/4588807
以下是具体的代码及解释:
1. 菜单布局文件:
大家看到主要有三个RalativeLayout，就是大家看到的三层，但是关于图片的倾斜 是怎样实现的呢？实际上是个假象，图片是正放的，里面图像是倾斜的。
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
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:layout_width="180dip"
android:layout_height="90dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="@+id/level2"
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_margin="10dip"
android:background="@drawable/icon_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_margin="10dip"
android:background="@drawable/icon_myyouku" />
</RelativeLayout>
<RelativeLayout
android:layout_width="280dip"
android:layout_height="140dip"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="@+id/level3"
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="28dip"
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_marginBottom="6dip"
android:layout_marginLeft="8dip"
android:layout_toRightOf="@id/c2"
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/c5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/c6"
android:layout_marginBottom="6dip"
android:layout_marginRight="8dip"
android:layout_toLeftOf="@+id/c6"
android:background="@drawable/channel5" />
<ImageButton
android:id="@+id/c6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/c7"
android:layout_marginBottom="12dip"
android:layout_marginRight="28dip"
android:layout_alignParentRight="true"
android:background="@drawable/channel6" />
<ImageButton
android:id="@+id/c7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="6dip"
android:layout_marginRight="12dip"
android:layout_alignParentRight="true"
android:background="@drawable/channel7" />
</RelativeLayout>
</RelativeLayout>2.MainActivity：
package cn.oce.youku;
import cn.itcast.youku.R;
import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
public class MainActivity extends Activity {
private ImageButton home;
private ImageButton menu;
private RelativeLayout level2;
private RelativeLayout level3;
private boolean isLevel2Show = true;
private boolean isLevel3Show = true;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
home = (ImageButton) findViewById(R.id.home);
menu = (ImageButton) findViewById(R.id.menu);
level2 = (RelativeLayout) findViewById(R.id.level2);
level3 = (RelativeLayout) findViewById(R.id.level3);
menu.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(isLevel3Show){
//隐藏3级导航菜单
MyAnimation.startAnimationOUT(level3, 500, 0);
}else {
//显示3级导航菜单
MyAnimation.startAnimationIN(level3, 500);
}
isLevel3Show = !isLevel3Show;
}
});
home.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
if(!isLevel2Show){
//显示2级导航菜单
MyAnimation.startAnimationIN(level2, 500);
} else {
if(isLevel3Show){
//隐藏3级导航菜单
MyAnimation.startAnimationOUT(level3, 500, 0);
//隐藏2级导航菜单
MyAnimation.startAnimationOUT(level2, 500, 500);
isLevel3Show = !isLevel3Show;
}
else {
//隐藏2级导航菜单
MyAnimation.startAnimationOUT(level2, 500, 0);
}
}
isLevel2Show = !isLevel2Show;
}
});
}
}
3.自定义动画类MyAnimation：
package cn.oce.youku;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.RotateAnimation;
public class MyAnimation {
//入动画
public static void startAnimationIN(ViewGroup viewGroup, int duration){
for(int i = 0; i < viewGroup.getChildCount(); i++ ){
viewGroup.getChildAt(i).setVisibility(View.VISIBLE);//设置显示
viewGroup.getChildAt(i).setFocusable(true);//获得焦点
viewGroup.getChildAt(i).setClickable(true);//可以点击
}
Animation animation;
/**
* 旋转动画
* RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)
* fromDegrees 开始旋转角度
* toDegrees 旋转到的角度
* pivotXType X轴 参照物
* pivotXValue x轴 旋转的参考点
* pivotYType Y轴 参照物
* pivotYValue Y轴 旋转的参考点
*/
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;
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 AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationRepeat(Animation animation) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation animation) {
for(int i = 0; i < viewGroup.getChildCount(); i++ ){
viewGroup.getChildAt(i).setVisibility(View.GONE);//设置显示
viewGroup.getChildAt(i).setFocusable(false);//获得焦点
viewGroup.getChildAt(i).setClickable(false);//可以点击
}
}
});
viewGroup.startAnimation(animation);
}
}
这样，一个三级导航圆盘旋转菜单就完成了，以后完全可以借鉴这些优秀的UI设计，甚至根据新的需求,可以做出更好的UI。
分享到：
相关推荐
Android中侧滑菜单效果实现（主界面和菜单界面实现平移、缩放、滚动动画），详细了解请移步：http://blog.csdn.net/zxc514257857/article/details/72602778
DrawerLayout，鸿洋前辈的博客中其实写的已经很不错了，但是在ViewHelper的动画设置上，鸿洋前辈并未有过多的描述，对笔者此类没接触过nineoldandroids动画的新手来讲真的有点余言未尽的感觉，于是笔者下载了前辈的...
Android_gif应用启动动画，动画播放完后跳往自定义的主菜单
Android 代码,实现path2.0 炫酷的旋转菜单效果,点击主按钮 会在按钮周围弹出一系列小按钮，点击小按钮 所有小按钮 缩回到主按钮位置，动画效果非常绚丽.
Android 实现卫星式菜单也叫弧形菜单，主要要做的工作如下： 1.动画的处理 2.自定义ViewGroup来实现卫星式菜单View （1）自定义属性 a. 在attrs.xml中定义属性 b. 在布局中使用自定义属性 c. 在自定义...
流畅动画：使用Android动画框架实现菜单滑动的平滑过渡效果，提升用户体验。 响应式设计：适应不同屏幕尺寸和分辨率的Android设备，确保在不同设备上都能获得良好的显示效果。 模块化结构：项目结构清晰，模块划分...
自己写的防360安全卫士的主菜单界面,实现滑动翻页,及动画旋转
快速滑动切换带拖影动画的图文导航菜单特效，同样引用了jquery来实现的动画菜单，这个菜单其实更像是一个tAB切换的效果，菜单可以分类，当点击分类后，主菜单的图标变为同一类商品，再点击菜单分类，这一组图片则...
Android菜单和主界面同时滑动效果源码项目介绍 1.视觉差侧滑菜单，即菜单和主界面都滑动，其实也比较常见。有开源项目SlidingMenu，但太复杂了，且在我使用过程中无法完美实现透明状态栏，中间会有一条分割线。看我...
点界面底部Launcher快捷栏的主菜单图标切换到主菜单界面。主菜单界面从下方弹出（注意过渡效果，弹出时间为300ms)。默认的页码为第1页。主菜单背景图以从哪个桌面进入就以哪个桌面的背景为背景图，并叠加一半透明...
Android 足球游戏：疯狂足球 源码含中文注释，...接收和捕获用户的键盘输入并做相应处理、SurfaceView类、定时刷新WelcomeView、欢迎动画播放，以及主菜单显示类等。了解这些类对于Android游戏整体的把控很有帮助哦。
第7章 Android动画机制与使用技巧 162 7.1 Android View动画框架 163 7.1.1 透明度动画 163 7.1.2 旋转动画 163 7.1.3 位移动画 164 7.1.4 缩放动画 164 7.1.5 动画集合 164 7.2 Android属性动画分析 165 ...
7.1 Android菜单 7.1.1 创建菜单 7.1.2 使用菜单组 7.2 响应菜单项 7.3 创建测试工具来测试菜单 7.4 使用其他菜单类型 7.4.1 展开的菜单 7.4.2 使用图标菜单 7.4.3 使用子菜单 7.4.4 ...
6.4 主菜单画面 6.5 helpscreen类 6.6 高分榜画面显示 6.6.1 渲染数字 6.6.2 画面的实现 6.7 抽象 6.7.1 抽象mr. nom的世界：模型、视图、控制器 6.7.2 gamescreen类 6.8 小结 第7章 opengl es...
而Android最令人心动之处，莫过于你可以为它编写软件，本书恰好可以为你提供这方面的帮助。 本书读者对象 阅读本书唯一的前提条件，是具备对Java编程或类似面向对象语言（比如说C＃）的基本理解，不需要拥有为...
7.1 Android菜单 7.1.1 创建菜单 7.1.2 使用菜单组 7.2 响应菜单项 7.3 创建测试工具来测试菜单 7.4 使用其他菜单类型 7.4.1 展开的菜单 7.4.2 使用图标菜单 7.4.3 使用子菜单 7.4.4 ...
6.4 主菜单画面 192 6.5 HelpScreen类 195 6.6 高分榜画面显示 197 6.6.1 渲染数字 198 6.6.2 画面的实现 199 6.7 抽象 201 6.7.1 抽象Mr. Nom的世界： 模型、视图、控制器 201 6.7.2 GameScreen...
第1章 新一代的王者——android概览 1 1.1 智能手机市场现状 1 1.1.1 五大智能手机操作系统 1 1.1.2 智能手机市场的新星 2 1.2 android平台的特点及未来的趋势 3 1.2.1 全新理念带来的体验风暴 3 ...
根据图片分析,要实现的有侧边栏DrawerLayout,ActionBar的颜色和菜单以及ActionBarDrawerToggle的动画效果. 在这之前,Theme要改成带有ActionBar的主题 android:theme=@android:style/Theme.Holo.Light 一:侧边栏-...