快捷導(dǎo)航

Android編程實(shí)現(xiàn)仿優(yōu)酷旋轉(zhuǎn)菜單效果(附demo源碼)

更新時(shí)間：2015年12月12日 13:03:48 作者：傲慢的上校

這篇文章主要介紹了Android編程實(shí)現(xiàn)仿優(yōu)酷旋轉(zhuǎn)菜單效果的方法,較為詳細(xì)的分析了Android實(shí)現(xiàn)旋轉(zhuǎn)菜單的布局與功能實(shí)現(xiàn)技巧,并附帶完整的demo源碼供讀者下載參考,需要的朋友可以參考下

本文實(shí)例講述了Android編程實(shí)現(xiàn)仿優(yōu)酷旋轉(zhuǎn)菜單效果。分享給大家供大家參考，具體如下：

首先，看下效果：

不好意思，不會(huì)制作動(dòng)態(tài)圖片，只好上傳靜態(tài)的了，如果誰會(huì)，請教教我吧。

首先，看下xml文件：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:background="#c9c9c9" > 
  <RelativeLayout 
    android:id="@+id/relate_level3" 
    android:layout_width="280dp" 
    android:layout_height="140dp" 
    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="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="8dip" 
     android:layout_marginLeft="6dip" 
     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="8dip" 
     android:layout_marginRight="6dip" 
     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_alignParentRight="true" 
     android:layout_marginBottom="12dip" 
     android:layout_marginRight="28dip" 
     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_alignParentRight="true" 
     android:layout_marginBottom="6dip" 
     android:layout_marginRight="12dip" 
     android:background="@drawable/channel7" /> 
  </RelativeLayout> 
  <RelativeLayout 
    android:id="@+id/relate_level2" 
    android:layout_width="180dp" 
    android:layout_height="90dp" 
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true" 
    android:background="@drawable/level2" > 
    <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/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/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:id="@+id/relate_level1" 
    android:layout_width="100dp" 
    android:layout_height="50dp" 
    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_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginBottom="10dp" 
     android:background="@drawable/icon_home" /> 
  </RelativeLayout> 
</RelativeLayout>

大家看到主要有三個(gè)RalativeLayout，就是大家看到的三層，但是關(guān)于圖片的傾斜是怎樣實(shí)現(xiàn)的呢？實(shí)際上是個(gè)假象，圖片是正放的，里面圖像是傾斜的。如下圖：

這樣大概能明白，下面就是開始動(dòng)畫效果了，先看下主Activity：

public class TestYoukuActivity extends Activity { 
  /** Called when the activity is first created. */ 
  private boolean areLevel2Showing = true, areLevel3Showing = true; 
  private RelativeLayout relate_level2, relate_level3; 
  private ImageButton home, menu; 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
    findViews(); 
    setListener();  
  } 
  private void findViews() { 
    relate_level2 = (RelativeLayout) findViewById(R.id.relate_level2); 
    relate_level3 = (RelativeLayout) findViewById(R.id.relate_level3); 
    home = (ImageButton) findViewById(R.id.home); 
    menu = (ImageButton) findViewById(R.id.menu); 
  } 
  private void setListener() { 
    // 給大按鈕設(shè)置點(diǎn)擊事件 
    home.setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
       if (!areLevel2Showing) { 
        MyAnimation.startAnimationsIn(relate_level2, 500); 
       } else { 
        if (areLevel3Showing) { 
          MyAnimation.startAnimationsOut(relate_level2, 500, 500); 
          MyAnimation.startAnimationsOut(relate_level3, 500, 0); 
          areLevel3Showing = !areLevel3Showing; 
        } else { 
          MyAnimation.startAnimationsOut(relate_level2, 500, 0); 
        } 
       } 
       areLevel2Showing = !areLevel2Showing; 
     } 
    }); 
    menu.setOnClickListener(new OnClickListener() { 
     @Override 
     public void onClick(View v) { 
       if (!areLevel3Showing) { 
        MyAnimation.startAnimationsIn(relate_level3, 500); 
       } else { 
        MyAnimation.startAnimationsOut(relate_level3, 500, 0); 
       } 
       areLevel3Showing = !areLevel3Showing; 
     } 
    }); 
  } 
}

應(yīng)該注意到了：

復(fù)制代碼代碼如下:

MyAnimation.startAnimationsIn(relate_level2, 500);

看一下這個(gè)靜態(tài)方法的實(shí)現(xiàn)：

public static void startAnimationsIn(ViewGroup viewgroup, int durationMillis) {
    viewgroup.setVisibility(0); 
    for (int i = 0; i < viewgroup.getChildCount(); i++) { 
     viewgroup.getChildAt(i).setVisibility(0); 
     viewgroup.getChildAt(i).setClickable(true); 
     viewgroup.getChildAt(i).setFocusable(true); 
    } 
    Animation animation; 
    animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 
       0.5f, Animation.RELATIVE_TO_SELF, 1.0f); 
    animation.setFillAfter(true); 
    animation.setDuration(durationMillis); 
    viewgroup.startAnimation(animation); 
}

RotateAnimation是畫面轉(zhuǎn)移旋轉(zhuǎn)動(dòng)畫效果，看一下它的構(gòu)造方法：

RotateAnimation(Context context, AttributeSet attrs)
Constructor used when a RotateAnimation is loaded from a resource.
RotateAnimation(float fromDegrees, float toDegrees)
Constructor to use when building a RotateAnimation from code.
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
Constructor to use when building a RotateAnimation from code
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
Constructor to use when building a RotateAnimation from code

在這里使用的是第四個(gè)構(gòu)造方法：

fromDegrees：旋轉(zhuǎn)的開始角度。
toDegrees：旋轉(zhuǎn)的結(jié)束角度。
pivotXType：X軸的伸縮模式，可以取值為ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。
pivotXValue：X坐標(biāo)的伸縮值。
pivotYType：Y軸的伸縮模式，可以取值為ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。
pivotYValue：Y坐標(biāo)的伸縮值。

關(guān)于角度問題：

當(dāng)角度為負(fù)數(shù)——表示逆時(shí)針旋轉(zhuǎn)
當(dāng)角度為正數(shù)——表示順時(shí)針旋轉(zhuǎn)
(負(fù)數(shù)from——to正數(shù):順時(shí)針旋轉(zhuǎn))
(負(fù)數(shù)from——to負(fù)數(shù):逆時(shí)針旋轉(zhuǎn))
(正數(shù)from——to正數(shù):順時(shí)針旋轉(zhuǎn))
(正數(shù)from——to負(fù)數(shù):逆時(shí)針旋轉(zhuǎn))

關(guān)于pivotXValue：這一點(diǎn)的X坐標(biāo)的對象被旋轉(zhuǎn),在指定的絕對數(shù)字0是左邊邊緣。如果pivotXType數(shù)是絕對的這個(gè)值可以是一個(gè)絕對,另外也可以是百分比(在1.0為100%)。50%是x中點(diǎn)，100%為右邊緣。
同理，pivotYValue：這一點(diǎn)的Y坐標(biāo)的對象被旋轉(zhuǎn),在指定的絕對數(shù)字0是頂部邊緣。如果pivotYType數(shù)是絕對的這個(gè)值可以是一個(gè)絕對,另外也可以是百分比(在1.0為100%)。50%是Y中點(diǎn)，100%為下邊緣。

然后再看下調(diào)用的其他的方法：

setFillAfter：
If fillAfter is true, the transformation that this animation performed will persist when it is finished. Defaults to false if not set. Note that this applies when using an AnimationSet to chain animations. The transformation is not applied before the AnimationSet itself starts.

如果fillAfter為真,transformation 動(dòng)畫將一直運(yùn)行直到它完成。默認(rèn)設(shè)置為假。注意:這適用于當(dāng)使用一個(gè)AnimationSet連鎖動(dòng)畫。transformation 是不適用AnimationSet本身之前開始。

setDuration：設(shè)置動(dòng)畫時(shí)間。

再看一下退出：

// 圖標(biāo)的動(dòng)畫(出動(dòng)畫) 
public static void startAnimationsOut(final ViewGroup viewgroup, 
     int durationMillis, 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(durationMillis); 
    animation.setStartOffset(startOffset); 
    animation.setAnimationListener(new Animation.AnimationListener() { 
     @Override 
     public void onAnimationStart(Animation arg0) {} 
     @Override 
     public void onAnimationRepeat(Animation arg0) {} 
     @Override 
     public void onAnimationEnd(Animation arg0) { 
       viewgroup.setVisibility(8); 
       for (int i = 0; i < viewgroup.getChildCount(); i++) { 
        viewgroup.getChildAt(i).setVisibility(8); 
        viewgroup.getChildAt(i).setClickable(false); 
        viewgroup.getChildAt(i).setFocusable(false); 
       } 
     } 
    }); 
    viewgroup.startAnimation(animation); 
}

有一個(gè)animation.setStartOffset(startOffset);是設(shè)置animation多長時(shí)間以后執(zhí)行。

最后：代碼下載地址：

此處本站下載。

希望本文所述對大家Android程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: