以前都是說每逢佳節倍思親，現在的工作狀態是每到周末倍親切，年底真的是加班加的沒完沒了的，也沒時間寫博客，也沒時間學習，周末閑來無事看到一個比較有意思的旋轉菜單，沒事自己實戰了一下感覺還不錯，代碼倒是沒什么，主要是有兩個技術點，一個就是布局文件，第二個就是動畫旋轉，關於布局文件是仁者見仁智者見智，只能自己研究，動畫的話之前寫過這方面的文章有興趣的可以看下本人之前的博客，開始正題吧:
基礎布局
先看下要實現的效果吧:
下面的主要是三個圖片，一個半圓，兩個版圓環，最外面的是三級菜單，中間的是二級菜單；
一級菜單布局:
<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);
兩個按鈕的點擊事件:
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (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 stub
RotateAnimation 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 stub
RotateAnimation rotateAnimation=new RotateAnimation(0, 180, layout.getWidth()/2, layout.getHeight());
rotateAnimation.setDuration(duratoin);
rotateAnimation.setFillAfter(true);
rotateAnimation.setStartOffset(offset);
layout.startAnimation(rotateAnimation);
}
}
最后看下效果圖:
鏈接: http://pan.baidu.com/s/1jGh3Qse 密碼: wilw