Android UI-底部旋轉功能表列

標籤：android   style   blog   http   io   ar   os   sp   java   

以前都是說每逢佳節倍思親，現在的工作狀態是每到周末倍親切，年底真的是加班加的沒完沒了的，也沒時間寫部落格，也沒時間學習，周末閑來無事看到一個比較有意思的旋轉菜單，沒事自己實戰了一下感覺還不錯，代碼倒是沒什麼，主要是有兩個技術點，一個就是布局檔案，第二個就是動畫旋轉，關於布局檔案是仁者見仁智者見智，只能自己研究，動畫的話之前寫過這方面的文章有興趣的可以看下本人之前的部落格，開始正題吧:

基礎布局

先看下要實現的效果吧:

 

下面的主要是三個圖片，一個半圓，兩個版圓環，最外面的是三級菜單，中間的是二級菜單；

一級菜單布局:

   <RelativeLayout        android:id="@+id/menuFirst"        android:layout_width="100dp"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/menu1" >        <ImageView            android:id="@+id/icon_home"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/icon_home" />    </RelativeLayout>

二級菜單布局:

    <RelativeLayout        android:id="@+id/menuSecond"        android:layout_width="170dp"        android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/menu2" >        <ImageView            android:id="@+id/icon_search"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_margin="8dp"            android:background="@drawable/icon_search" />        <ImageView            android:id="@+id/icon_menu"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/icon_menu" />        <ImageView            android:id="@+id/icon_center"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_margin="8dp"            android:background="@drawable/icon_center" />    </RelativeLayout>

三級菜單布局，這個布局的時候需要注意的是左邊的三個圖片設定完之後，設定的是對稱方向的最底部的一個圖片，以此為依據搞定其他兩個表徵圖:

  <RelativeLayout        android:id="@+id/menuThird"        android:layout_width="270dp"        android:layout_height="140dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/menu3" >        <ImageView            android:id="@+id/channel1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_marginBottom="8dp"            android:layout_marginLeft="8dp"            android:background="@drawable/channel1" />        <ImageView            android:id="@+id/channel2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/channel1"            android:layout_alignLeft="@id/channel1"            android:layout_marginBottom="8dp"            android:layout_marginLeft="16dp"            android:background="@drawable/channel2" />        <ImageView            android:id="@+id/channel3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/channel2"            android:layout_alignLeft="@id/channel2"            android:layout_marginBottom="8dp"            android:layout_marginLeft="30dp"            android:background="@drawable/channel3" />        <ImageView            android:id="@+id/channel4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerHorizontal="true"            android:layout_marginTop="5dp"            android:background="@drawable/channel4" />        <ImageView            android:id="@+id/channel7"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="8dp"            android:layout_marginRight="8dp"            android:background="@drawable/channel7" />        <ImageView            android:id="@+id/channel6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/channel7"            android:layout_alignRight="@id/channel7"            android:layout_marginBottom="8dp"            android:layout_marginRight="20dp"            android:background="@drawable/channel6" />        <ImageView            android:id="@+id/channel5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_above="@id/channel6"            android:layout_alignRight="@id/channel6"            android:layout_marginBottom="8dp"            android:layout_marginRight="30dp"            android:background="@drawable/channel5" />    </RelativeLayout>

實現Demo

主要實現的主要就是兩個按鈕，一個按鈕式最底層的按鈕，一個是二級菜單的按鈕:

homeView = (ImageView) findViewById(R.id.icon_home);menuView = (ImageView) findViewById(R.id.icon_menu);menuFirst = (RelativeLayout) findViewById(R.id.menuFirst);menuSecond = (RelativeLayout) findViewById(R.id.menuSecond);menuThird = (RelativeLayout) findViewById(R.id.menuThird);homeView.setOnClickListener(this);menuView.setOnClickListener(this);

兩個按鈕的點擊事件:

@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.icon_home:if (isSecond) {MyHelper.StartAninationOut(menuSecond,500,200);if (isThird) {MyHelper.StartAninationOut(menuThird,500,300);isThird=false;} }else {MyHelper.StartAninationIn(menuSecond,500,300);}isSecond=!isSecond;break;case R.id.icon_menu:if (isThird) {MyHelper.StartAninationOut(menuThird,500,200);isThird=false;}else {MyHelper.StartAninationIn(menuThird,500,200);isThird=true;}break;default:break;}}

　兩個按鈕都有點擊點擊事件，封裝一個可以主要就是淡入和淡出的效果:

public class MyHelper {public static void StartAninationIn(RelativeLayout layout,long duratoin,long offset) {// TODO Auto-generated method stubRotateAnimation rotateAnimation=new RotateAnimation(180, 360, layout.getWidth()/2, layout.getHeight());        rotateAnimation.setDuration(duratoin);        rotateAnimation.setFillAfter(true);//保持旋轉之後的狀態        rotateAnimation.setStartOffset(offset);//消極式載入時間        layout.startAnimation(rotateAnimation);}public static void StartAninationOut(RelativeLayout layout,long duratoin,long offset) {// TODO Auto-generated method stubRotateAnimation rotateAnimation=new RotateAnimation(0, 180, layout.getWidth()/2, layout.getHeight());        rotateAnimation.setDuration(duratoin);        rotateAnimation.setFillAfter(true);        rotateAnimation.setStartOffset(offset);        layout.startAnimation(rotateAnimation);}}

　最後看下:

 

個人小Demo，如果需要可聯絡我，可私信，可評論~

Android UI-底部旋轉功能表列