Android 高仿【優酷】圓盤旋轉菜單的實現

jopen 11年前發布 | 17K 次閱讀 Android Android開發 移動開發

目前，用戶對安卓應用程序的UI設計要求越來越高,因此，掌握一些新穎的設計很有必要.

比如菜單，傳統的菜單已經不能滿足用戶的需求. 其中優酷中圓盤旋轉菜單的實現就比較優秀，這里我提供下我的思路及實現，僅供參考.


不過在這里個人認為點擊home圖標關閉菜單的時候先關第三層，接著第二層，效果比較好看點，只需在關閉第二層的時候加個延遲便可。


該菜單共分里外三層導航菜單.可以依次從外向里關閉三層菜單，也可以反向打開，并且伴有圓盤旋轉的動畫效果

首先，看下效果：

1345560978_8709.jpg

以下是具體的代碼及解釋:

1. 菜單布局文件:

大家看到主要有三個RalativeLayout，就是大家看到的三層，但是關于圖片的傾斜 是怎樣實現的呢？實際上是個假象，圖片是正放的，里面圖像是傾斜的


[java] view plaincopy
</div> </div>

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      

  2.     xmlns:tools="http://schemas.android.com/tools"      

  3.     android:layout_width="fill_parent"      

  4.     android:layout_height="fill_parent" >      

  5.       

  6.     <RelativeLayout      

  7.         android:layout_width="100dip"      

  8.         android:layout_height="50dip"      

  9.         android:layout_alignParentBottom="true"      

  10.         android:layout_centerHorizontal="true"      

  11.         android:background="@drawable/level1" >      

  12.       

  13.         <ImageButton      

  14.             android:id="@+id/home"      

  15.             android:layout_width="wrap_content"      

  16.             android:layout_height="wrap_content"      

  17.             android:layout_centerInParent="true"      

  18.             android:background="@drawable/icon_home" />      

  19.     </RelativeLayout>      

  20.       

  21.     <RelativeLayout      

  22.         android:layout_width="180dip"      

  23.         android:layout_height="90dip"      

  24.         android:layout_alignParentBottom="true"      

  25.         android:layout_centerHorizontal="true"      

  26.         android:id="@+id/level2"      

  27.         android:background="@drawable/level2" >      

  28.       

  29.         <ImageButton      

  30.             android:id="@+id/search"      

  31.             android:layout_width="wrap_content"      

  32.             android:layout_height="wrap_content"      

  33.             android:layout_alignParentBottom="true"      

  34.             android:layout_margin="10dip"      

  35.             android:background="@drawable/icon_search" />      

  36.       

  37.         <ImageButton      

  38.             android:id="@+id/menu"      

  39.             android:layout_width="wrap_content"      

  40.             android:layout_height="wrap_content"      

  41.             android:layout_centerHorizontal="true"      

  42.             android:layout_margin="6dip"      

  43.             android:background="@drawable/icon_menu" />      

  44.       

  45.         <ImageButton      

  46.             android:id="@+id/myyouku"      

  47.             android:layout_width="wrap_content"      

  48.             android:layout_height="wrap_content"      

  49.             android:layout_alignParentBottom="true"      

  50.             android:layout_alignParentRight="true"      

  51.             android:layout_margin="10dip"      

  52.             android:background="@drawable/icon_myyouku" />      

  53.     </RelativeLayout>      

  54.       

  55.     <RelativeLayout      

  56.         android:layout_width="280dip"      

  57.         android:layout_height="140dip"      

  58.         android:layout_alignParentBottom="true"      

  59.         android:layout_centerHorizontal="true"      

  60.         android:id="@+id/level3"      

  61.         android:background="@drawable/level3" >      

  62.       

  63.         <ImageButton      

  64.             android:id="@+id/c1"      

  65.             android:layout_width="wrap_content"      

  66.             android:layout_height="wrap_content"      

  67.             android:layout_alignParentBottom="true"      

  68.             android:layout_marginBottom="6dip"      

  69.             android:layout_marginLeft="12dip"      

  70.             android:background="@drawable/channel1" />      

  71.       

  72.         <ImageButton      

  73.             android:id="@+id/c2"      

  74.             android:layout_width="wrap_content"      

  75.             android:layout_height="wrap_content"      

  76.             android:layout_above="@id/c1"      

  77.             android:layout_marginBottom="12dip"      

  78.             android:layout_marginLeft="28dip"      

  79.             android:background="@drawable/channel2" />      

  80.       

  81.         <ImageButton      

  82.             android:id="@+id/c3"      

  83.             android:layout_width="wrap_content"      

  84.             android:layout_height="wrap_content"      

  85.             android:layout_above="@id/c2"      

  86.             android:layout_marginBottom="6dip"      

  87.             android:layout_marginLeft="8dip"      

  88.             android:layout_toRightOf="@id/c2"      

  89.             android:background="@drawable/channel3" />      

  90.       

  91.         <ImageButton      

  92.             android:id="@+id/c4"      

  93.             android:layout_width="wrap_content"      

  94.             android:layout_height="wrap_content"      

  95.             android:layout_centerHorizontal="true"      

  96.             android:layout_margin="6dip"      

  97.             android:background="@drawable/channel4" />      

  98.               

  99.                 <ImageButton      

  100.             android:id="@+id/c5"      

  101.             android:layout_width="wrap_content"      

  102.             android:layout_height="wrap_content"      

  103.             android:layout_above="@+id/c6"      

  104.             android:layout_marginBottom="6dip"      

  105.             android:layout_marginRight="8dip"      

  106.             android:layout_toLeftOf="@+id/c6"      

  107.             android:background="@drawable/channel5" />      

  108.               

  109.                 <ImageButton      

  110.             android:id="@+id/c6"      

  111.             android:layout_width="wrap_content"      

  112.             android:layout_height="wrap_content"      

  113.             android:layout_above="@+id/c7"      

  114.             android:layout_marginBottom="12dip"      

  115.             android:layout_marginRight="28dip"      

  116.             android:layout_alignParentRight="true"      

  117.             android:background="@drawable/channel6" />      

  118.               

  119.               

  120.                 <ImageButton      

  121.             android:id="@+id/c7"      

  122.             android:layout_width="wrap_content"      

  123.             android:layout_height="wrap_content"      

  124.             android:layout_alignParentBottom="true"      

  125.             android:layout_marginBottom="6dip"      

  126.             android:layout_marginRight="12dip"      

  127.             android:layout_alignParentRight="true"      

  128.             android:background="@drawable/channel7" />      

  129.     </RelativeLayout>      

  130.       

  131. </RelativeLayout>      
    132. </ol> </div>
    2. MainActivity：

    [java] view plaincopy
    </div> </div>

    1. import android.os.Bundle;      

    2. import android.app.Activity;      

    3. import android.view.Menu;      

    4. import android.view.View;      

    5. import android.view.View.OnClickListener;      

    6. import android.widget.ImageButton;      

    7. import android.widget.RelativeLayout;      

    8.       

    9. public class MainActivity extends Activity {      

    10.       

    11.     private ImageButton home;      

    12.     private ImageButton menu;      

    13.     private RelativeLayout level2;      

    14.     private RelativeLayout level3;      

    15.           

    16.     private boolean isLevel2Show = true;      

    17.     private boolean isLevel3Show = true;      

    18.       

    19.     @Override      

    20.     public void onCreate(Bundle savedInstanceState) {      

    21.         super.onCreate(savedInstanceState);      

    22.         setContentView(R.layout.activity_main);      

    23.       

    24.         home = (ImageButton) findViewById(R.id.home);      

    25.         menu = (ImageButton) findViewById(R.id.menu);      

    26.       

    27.         level2 = (RelativeLayout) findViewById(R.id.level2);      

    28.         level3 = (RelativeLayout) findViewById(R.id.level3);      

    29.       

    30.         menu.setOnClickListener(new OnClickListener() {      

    31.       

    32.             @Override      

    33.             public void onClick(View v) {      

    34.                 if(isLevel3Show){      

    35.                     //隱藏3級導航菜單      

    36.                     MyAnimation.startAnimationOUT(level3, 500, 0);      

    37.                 }else {      

    38.                     //顯示3級導航菜單      

    39.                     MyAnimation.startAnimationIN(level3, 500);      

    40.                 }      

    41.                       

    42.                 isLevel3Show = !isLevel3Show;      

    43.             }      

    44.         });      

    45.       

    46.         home.setOnClickListener(new OnClickListener() {      

    47.       

    48.             @Override      

    49.             public void onClick(View v) {      

    50.                 if(!isLevel2Show){      

    51.                     //顯示2級導航菜單      

    52.                     MyAnimation.startAnimationIN(level2, 500);      

    53.                 } else {      

    54.                     if(isLevel3Show){      

    55.                         //隱藏3級導航菜單      

    56.                         MyAnimation.startAnimationOUT(level3, 500, 0);      

    57.                         //隱藏2級導航菜單      

    58.                         MyAnimation.startAnimationOUT(level2, 500, 500);      

    59.                         isLevel3Show = !isLevel3Show;      

    60.                     }      

    61.                     else {      

    62.                         //隱藏2級導航菜單      

    63.                         MyAnimation.startAnimationOUT(level2, 500, 0);      

    64.                     }      

    65.                 }      

    66.                 isLevel2Show = !isLevel2Show;      

    67.             }      

    68.         });      

    69.       

    70.     }      

    71.       

    72. }      
      73. </ol> </div>
      3. 自定義動畫類MyAnimation:

      [java] view plaincopy
      </div> </div>

      1. import android.view.View;      

      2. import android.view.ViewGroup;      

      3. import android.view.animation.Animation;      

      4. import android.view.animation.Animation.AnimationListener;      

      5. import android.view.animation.RotateAnimation;      

      6.       

      7. public class MyAnimation {      

      8.     //入動畫      

      9.     public static void startAnimationIN(ViewGroup viewGroup, int duration){      

      10.         for(int i = 0; i < viewGroup.getChildCount(); i++ ){      

      11.             viewGroup.getChildAt(i).setVisibility(View.VISIBLE);//設置顯示      

      12.             viewGroup.getChildAt(i).setFocusable(true);//獲得焦點      

      13.             viewGroup.getChildAt(i).setClickable(true);//可以點擊      

      14.         }      

      15.               

      16.         Animation animation;      

      17.         /**   

      18.          * 旋轉動畫   

      19.          * RotateAnimation(fromDegrees, toDegrees, pivotXType, pivotXValue, pivotYType, pivotYValue)   

      20.          * fromDegrees 開始旋轉角度   

      21.          * toDegrees 旋轉到的角度   

      22.          * pivotXType X軸 參照物   

      23.          * pivotXValue x軸 旋轉的參考點   

      24.          * pivotYType Y軸 參照物   

      25.          * pivotYValue Y軸 旋轉的參考點   

      26.          */      

      27.         animation = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);      

      28.         animation.setFillAfter(true);//停留在動畫結束位置      

      29.         animation.setDuration(duration);      

      30.               

      31.         viewGroup.startAnimation(animation);      

      32.               

      33.     }      

      34.           

      35.     //出動畫      

      36.     public static void startAnimationOUT(final ViewGroup viewGroup, int duration , int startOffSet){      

      37.         Animation animation;      

      38.         animation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 1.0f);      

      39.         animation.setFillAfter(true);//停留在動畫結束位置      

      40.         animation.setDuration(duration);      

      41.         animation.setStartOffset(startOffSet);      

      42.         animation.setAnimationListener(new AnimationListener() {      

      43.                   

      44.             @Override      

      45.             public void onAnimationStart(Animation animation) {      

      46.                 // TODO Auto-generated method stub      

      47.                       

      48.             }      

      49.                   

      50.             @Override      

      51.             public void onAnimationRepeat(Animation animation) {      

      52.                 // TODO Auto-generated method stub      

      53.                       

      54.             }      

      55.                   

      56.             @Override      

      57.             public void onAnimationEnd(Animation animation) {      

      58.                 for(int i = 0; i < viewGroup.getChildCount(); i++ ){      

      59.                     viewGroup.getChildAt(i).setVisibility(View.GONE);//設置顯示      

      60.                     viewGroup.getChildAt(i).setFocusable(false);//獲得焦點      

      61.                     viewGroup.getChildAt(i).setClickable(false);//可以點擊      

      62.                 }      

      63.                       

      64.             }      

      65.         });      

      66.               

      67.         viewGroup.startAnimation(animation);      

      68.     }      

      69. }      
        70. </ol> </div>
        這樣，一個高仿優酷三級導航圓盤旋轉菜單就完成了.，以后完全可以借鑒這些優秀的UI設計，甚至根據新的需求,可以做出更好的UI.

       本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
       轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
       本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

      相關經驗

      相關資訊

      相關文檔