Android编程实现仿优酷圆盘旋转菜单效果的方法详解【附demo源码下载】

本文实例讲述了android编程实现仿优酷圆盘旋转菜单效果的方法。分享给大家供大家参考，具体如下：

目前，用户对安卓应用程序的ui设计要求越来越高,因此，掌握一些新颖的设计很有必要.

比如菜单，传统的菜单已经不能满足用户的需求. 其中优酷中圆盘旋转菜单的实现就比较优秀，这里我提供下我的思路及实现，仅供参考.

该菜单共分里外三层导航菜单.可以依次从外向里关闭三层菜单，也可以反向打开，并且伴有圆盘旋转的动画效果

首先，看下效果：

以下是具体的代码及解释:

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;

import android.os.bundle;
import android.app.activity;
import android.view.menu;
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:

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相关内容感兴趣的读者可查看本站专题：《android布局layout技巧总结》、《android开发入门与进阶教程》、《android调试技巧与常见问题解决方法汇总》、《android基本组件用法总结》、《android视图view技巧总结》及《android控件用法总结》

希望本文所述对大家android程序设计有所帮助。