Android編程實現(xiàn)仿優(yōu)酷旋轉(zhuǎn)菜單效果(附demo源碼)
本文實例講述了Android編程實現(xiàn)仿優(yōu)酷旋轉(zhuǎn)菜單效果。分享給大家供大家參考，具體如下：
首先，看下效果：
不好意思，不會制作動態(tài)圖片，只好上傳靜態(tài)的了，如果誰會，請教教我吧。
首先，看下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>
大家看到主要有三個RalativeLayout，就是大家看到的三層，但是關(guān)于圖片的傾斜 是怎樣實現(xiàn)的呢？實際上是個假象，圖片是正放的，里面圖像是傾斜的。如下圖：
這樣大概能明白，下面就是開始動畫效果了，先看下主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è)置點擊事件
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;
}
});
}
}
應該注意到了：
看一下這個靜態(tài)方法的實現(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)動畫效果，看一下它的構(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òu)造方法：
fromDegrees：旋轉(zhuǎn)的開始角度。
toDegrees：旋轉(zhuǎn)的結(jié)束角度。
pivotXType：X軸的伸縮模式，可以取值為ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。
pivotXValue：X坐標的伸縮值。
pivotYType：Y軸的伸縮模式，可以取值為ABSOLUTE、RELATIVE_TO_SELF、RELATIVE_TO_PARENT。
pivotYValue：Y坐標的伸縮值。
關(guān)于角度問題：
當角度為負數(shù)——表示逆時針旋轉(zhuǎn)
當角度為正數(shù)——表示順時針旋轉(zhuǎn)
(負數(shù)from——to正數(shù):順時針旋轉(zhuǎn))
(負數(shù)from——to負數(shù):逆時針旋轉(zhuǎn))
(正數(shù)from——to正數(shù):順時針旋轉(zhuǎn))
(正數(shù)from——to負數(shù):逆時針旋轉(zhuǎn))
關(guān)于pivotXValue：這一點的X坐標的對象被旋轉(zhuǎn),在指定的絕對數(shù)字0是左邊邊緣。如果pivotXType數(shù)是絕對的這個值可以是一個絕對,另外也可以是百分比(在1.0為100%)。50%是x中點，100%為右邊緣。
同理，pivotYValue：這一點的Y坐標的對象被旋轉(zhuǎn),在指定的絕對數(shù)字0是頂部邊緣。如果pivotYType數(shù)是絕對的這個值可以是一個絕對,另外也可以是百分比(在1.0為100%)。50%是Y中點，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 動畫將一直運行直到它完成。默認設(shè)置為假。注意:這適用于當使用一個AnimationSet連鎖動畫。transformation 是不適用AnimationSet本身之前開始。
setDuration：設(shè)置動畫時間。
再看一下退出：
// 圖標的動畫(出動畫)
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);
}
有一個animation.setStartOffset(startOffset);是設(shè)置animation多長時間以后執(zhí)行。
最后：代碼下載地址：
此處本站下載。
希望本文所述對大家Android程序設(shè)計有所幫助。
相關(guān)文章
Android中的Toast是一種簡易的消息提示框，toast提示框不能被用戶點擊，toast會根據(jù)用戶設(shè)置的顯示時間后自動消失。本文將介紹Toast的自定義使用，下面一起來看看吧。2016-08-08
Android編程實現(xiàn)AlertDialog自定義彈出對話框的方法示例
這篇文章主要介紹了Android編程實現(xiàn)AlertDialog自定義彈出對話框的方法,結(jié)合實例形式分析了Android AlertDialog自定義彈出對話框的基本功能與事件監(jiān)聽實現(xiàn)技巧,需要的朋友可以參考下2017-07-07
Android Studio設(shè)置主題與字體大小圖文教程
這篇文章通過圖文詳細的給大家介紹了Android Studio中如何設(shè)置主題與字體大小，文章介紹的非常詳細，相信對大家學習使用Android Studio具有一定的參考借鑒價值，有需要的朋友們下面來一起看看吧。2016-10-10
使用Android實現(xiàn)一個懸浮在軟鍵盤上的輸入欄
app開發(fā)中經(jīng)常會遇到一些輸入框要懸浮到軟鍵盤上方的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Android實現(xiàn)一個懸浮在軟鍵盤上的輸入欄的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
Android日期選擇器實現(xiàn)年月日三級聯(lián)動
這篇文章主要為大家詳細介紹了Android日期選擇器實現(xiàn)年月日三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-01-01
Kotlin中l(wèi)et()with()run()apply()also()函數(shù)的使用方法與區(qū)別
在Kotlin中的源碼標準庫(Standard.kt)中提供了一些Kotlin擴展的內(nèi)置函數(shù)可以優(yōu)化kotlin的編碼,今天為大家聊聊let,with,run,apply,also幾個函數(shù)的用法與區(qū)別2018-03-03
詳解Android中的ActivityThread和APP啟動過程
ActivityThread就是我們常說的主線程或UI線程，ActivityThread的main方法是整個APP的入口，本篇深入學習下ActivityThread，順便了解下APP和Activity的啟動過程。2021-06-06
Android調(diào)用系統(tǒng)的發(fā)郵件功能的小例子
這篇文章介紹了Android調(diào)用系統(tǒng)的發(fā)郵件功能的小例子，有需要的朋友可以參考一下2013-08-08
仿iPhone風格對話框(附件包含例子/jar包/jar包源碼)
這個對框完全繼承、仿照AlertDialog，只是實現(xiàn)了自定義效果;另外，沒有實現(xiàn)setIcon，因為iphone中的對話框多數(shù)都沒有圖標;附件包含例子、jar包、jar包源碼2013-01-01
這篇文章主要介紹了Android仿微信輸入框效果的實現(xiàn)代碼，需要的朋友參考下吧2017-05-05