Android編程實現(xiàn)仿優(yōu)酷圓盤旋轉(zhuǎn)菜單效果的方法詳解【附demo源碼下載】
本文實例講述了Android編程實現(xiàn)仿優(yōu)酷圓盤旋轉(zhuǎn)菜單效果的方法。分享給大家供大家參考,具體如下:
目前,用戶對安卓應(yīng)用程序的UI設(shè)計要求越來越高,因此,掌握一些新穎的設(shè)計很有必要.
比如菜單,傳統(tǒng)的菜單已經(jīng)不能滿足用戶的需求. 其中優(yōu)酷中圓盤旋轉(zhuǎn)菜單的實現(xiàn)就比較優(yōu)秀,這里我提供下我的思路及實現(xiàn),僅供參考.
該菜單共分里外三層導(dǎo)航菜單.可以依次從外向里關(guān)閉三層菜單,也可以反向打開,并且伴有圓盤旋轉(zhuǎn)的動畫效果
首先,看下效果:
以下是具體的代碼及解釋:
1. 菜單布局文件:
大家看到主要有三個RalativeLayout,就是大家看到的三層,但是關(guān)于圖片的傾斜 是怎樣實現(xiàn)的呢?實際上是個假象,圖片是正放的,里面圖像是傾斜的
<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級導(dǎo)航菜單 MyAnimation.startAnimationOUT(level3, 500, 0); }else { //顯示3級導(dǎo)航菜單 MyAnimation.startAnimationIN(level3, 500); } isLevel3Show = !isLevel3Show; } }); home.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if(!isLevel2Show){ //顯示2級導(dǎo)航菜單 MyAnimation.startAnimationIN(level2, 500); } else { if(isLevel3Show){ //隱藏3級導(dǎo)航菜單 MyAnimation.startAnimationOUT(level3, 500, 0); //隱藏2級導(dǎo)航菜單 MyAnimation.startAnimationOUT(level2, 500, 500); isLevel3Show = !isLevel3Show; } else { //隱藏2級導(dǎo)航菜單 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);//設(shè)置顯示 viewGroup.getChildAt(i).setFocusable(true);//獲得焦點 viewGroup.getChildAt(i).setClickable(true);//可以點擊 } Animation animation; /** * 旋轉(zhuǎn)動畫 * RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue) * fromDegrees 開始旋轉(zhuǎn)角度 * toDegrees 旋轉(zhuǎn)到的角度 * pivotXType X軸 參照物 * pivotXValue x軸 旋轉(zhuǎn)的參考點 * pivotYType Y軸 參照物 * pivotYValue Y軸 旋轉(zhuǎn)的參考點 */ animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f); animation.setFillAfter(true);//停留在動畫結(jié)束位置 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);//停留在動畫結(jié)束位置 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);//設(shè)置顯示 viewGroup.getChildAt(i).setFocusable(false);//獲得焦點 viewGroup.getChildAt(i).setClickable(false);//可以點擊 } } }); viewGroup.startAnimation(animation); } }
這樣,一個高仿優(yōu)酷三級導(dǎo)航圓盤旋轉(zhuǎn)菜單就完成了.,以后完全可以借鑒這些優(yōu)秀的UI設(shè)計,甚至根據(jù)新的需求,可以做出更好的UI.
附:完整實例代碼點擊此處本站下載。
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Android布局layout技巧總結(jié)》、《Android開發(fā)入門與進(jìn)階教程》、《Android調(diào)試技巧與常見問題解決方法匯總》、《Android基本組件用法總結(jié)》、《Android視圖View技巧總結(jié)》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計有所幫助。
- Android 自定義組件衛(wèi)星菜單的實現(xiàn)
- Android衛(wèi)星菜單效果的實現(xiàn)方法
- Android自定義VIew實現(xiàn)衛(wèi)星菜單效果淺析
- Android實現(xiàn)自定義的衛(wèi)星式菜單(弧形菜單)詳解
- Android學(xué)習(xí)教程之圓形Menu菜單制作方法(1)
- Android自定義view實現(xiàn)圓形與半圓形菜單
- Android圓形旋轉(zhuǎn)菜單開發(fā)實例
- Android自定義ViewGroup實現(xiàn)帶箭頭的圓角矩形菜單
- Android仿優(yōu)酷圓形菜單學(xué)習(xí)筆記分享
- Adapter模式實戰(zhàn)之重構(gòu)鴻洋集團(tuán)的Android圓形菜單建行
- Android實現(xiàn)衛(wèi)星菜單效果
相關(guān)文章
Android 判斷SIM卡是中國移動\中國聯(lián)通\中國電信(移動運營商)
本文給帶來兩種方法來判斷sim卡是屬于哪個運營商的,要實現(xiàn)此功能我們需要先獲取手機的imsi碼然后在判斷,對此功能感興趣的朋友一起通過本文學(xué)習(xí)吧2016-09-09Android onTouchEvent事件中onTouch方法返回值(介紹)
下面小編就為大家?guī)硪黄狝ndroid onTouchEvent事件中onTouch方法返回值(介紹)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-04-04Flutter開發(fā)技巧RadialGradient中radius計算詳解
這篇文章主要為大家介紹了Flutter小技巧RadialGradient?中?radius?的計算詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01Android編程實現(xiàn)基于BitMap獲得圖片像素數(shù)據(jù)的方法
這篇文章主要介紹了Android編程實現(xiàn)基于BitMap獲得圖片像素數(shù)據(jù)的方法,對比分析了兩種獲取圖片像素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11OpenGL Shader實例分析(3)等待標(biāo)識效果
這篇文章主要介紹了OpenGL Shader實例分析第3篇,等待標(biāo)識效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-02-02