目前,用戶對安卓應用程序的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);
- }
- }