Android優酷菜單組件自訂

標籤：android   優酷   布局   

主要做的就是模仿優酷手機用戶端的底部菜單控制項的實現。先來幾張圖片，點擊中間的home，顯示二級菜單，點擊二級菜單的menu，顯示三級菜單。

這是實現起來最簡單的一個布局，但是從中學會了自訂動畫和一些布局的基本知識，從中還是收穫很大的。

首先是定義布局檔案，三個菜單條其實就是三個relativelayout，level1，level2，level3，然後每個菜單條中的小標題就加到對應的相對布局中。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.test.youku.MainActivity$PlaceholderFragment" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" />   <RelativeLayout         android:id="@+id/level1"        android:layout_width="100dp"    android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level1">               <ImageView            android:id="@+id/icon_home"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_alignParentBottom="true"           android:layout_centerHorizontal="true"           android:background="@drawable/icon_home"/>    </RelativeLayout>        <RelativeLayout         android:id="@+id/level2"        android:layout_width="180dp"    android:layout_height="90dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level2">               <ImageView            android:id="@+id/icon_search"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_alignParentBottom="true"           android:layout_margin="10dp"           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:background="@drawable/icon_menu"/>                <ImageView            android:id="@+id/icon_myyouku"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_alignParentBottom="true"           android:layout_margin="10dp"           android:layout_alignParentRight="true"           android:background="@drawable/icon_myyouku"/>    </RelativeLayout>        <RelativeLayout         android:id="@+id/level3"        android:layout_width="280dp"    android:layout_height="145dp"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:background="@drawable/level3">                <ImageView            android:id="@+id/channel1"           android:layout_width="wrap_content"           android:layout_height="wrap_content"           android:layout_alignParentBottom="true"           android:layout_marginLeft="10dp"           android:layout_marginBottom="10dp"           android:background="@drawable/channel1"/>        <ImageView            android:id="@+id/channel2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerVertical="true"            android:layout_above="@id/channel1"            android:layout_alignLeft="@id/channel1"            android:layout_marginBottom="6dp"            android:layout_marginLeft="20dp"            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="6dp"            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:background="@drawable/channel7"            android:layout_alignParentBottom="true"            android:layout_alignParentRight="true"            android:layout_marginBottom="10dp"            android:layout_marginRight="10dp"            />                       <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="6dp"            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="6dp"            android:layout_marginRight="30dp"            android:background="@drawable/channel5" />    </RelativeLayout></RelativeLayout>

然後就是進入進齣動畫的定義：

因為是旋轉進入，所有 要定義一個RotateAnimation，並進行配置：

import android.view.animation.RotateAnimation;import android.widget.RelativeLayout;public class MyUtils {/** * 讓指定的view 執行 旋轉離開的動畫 * @param view */public static void startAnimOut(RelativeLayout view) {startAnimOut(view, 0);}/** * 讓指定view 延時 執行旋轉離開的動畫， * @param level3 * @param offset延時的時間 */public static void startAnimOut(RelativeLayout view, long offset) {/* * 預設圓為 為view的左上方， * 水平向右 為 0度 * 順時針旋轉度數增加 */RotateAnimation animation  =new RotateAnimation(0, 180, view.getWidth()/2, view.getHeight());animation.setDuration(500);//設定啟動並執行時間animation.setFillAfter(true);//動畫執行完以後，保持最後的狀態animation.setStartOffset(offset);// 設定延時執行的時間view.startAnimation(animation);}/** * 讓指定的view 執行 旋轉進入的動畫 * @param view */public static void startAnimIn(RelativeLayout view) {startAnimIn(view, 0);}/** * 讓指定的view 延時執行 旋轉進入的動畫 * @param level2 * @param i延時的時間 */public static void startAnimIn(RelativeLayout view, int i) {/* * 預設圓為 為view的左上方， * 水平向右 為 0度 * 順時針旋轉度數增加 */RotateAnimation animation  =new RotateAnimation(180, 360, view.getWidth()/2, view.getHeight());animation.setDuration(500);//設定啟動並執行時間animation.setFillAfter(true);//動畫執行完以後，保持最後的狀態animation.setStartOffset(i);//設定延時執行的時間view.startAnimation(animation);}}

最後就是空間顯示的主類了，這個類沒什麼難的，就是根據邏輯，調用上面寫得進入進出動作，要注意邏輯的清晰：

public class MainActivity extends Activity implements OnClickListener {private ImageView icon_menu;private ImageView icon_home;private RelativeLayout level1;private RelativeLayout level2;private RelativeLayout level3;/** * 判斷 第3級菜單是否顯示 * true 為顯示 */private boolean isLevel3Show = true;/** * 判斷 第2級菜單是否顯示 * true 為顯示 */private boolean isLevel2Show = true;/** * 判斷 第1級菜單是否顯示 * true 為顯示 */private boolean isLevel1show = true;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);icon_home = (ImageView) findViewById(R.id.icon_home);icon_menu = (ImageView) findViewById(R.id.icon_menu);level1 = (RelativeLayout) findViewById(R.id.level1);level2 = (RelativeLayout) findViewById(R.id.level2);level3 = (RelativeLayout) findViewById(R.id.level3);icon_home.setOnClickListener(this);icon_menu.setOnClickListener(this);}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.icon_menu://處理 menu 表徵圖的點擊事件// 如果第3級菜單是顯示狀態，那麼將其隱藏if(isLevel3Show){//隱藏 第3級菜單MyUtils.startAnimOut(level3);}else{// 如果第3級菜單是隱藏狀態，那麼將其顯示MyUtils.startAnimIn(level3);}isLevel3Show = !isLevel3Show;break;case R.id.icon_home://處理 home 表徵圖 的點擊事件// 如果第2級菜單是顯示狀態，那麼就隱藏，2，3級菜單if(isLevel2Show ){MyUtils.startAnimOut(level2);isLevel2Show = false;if(isLevel3Show){ // 如果此時，第3級菜單也顯示，那也將其隱藏MyUtils.startAnimOut(level3,200);isLevel3Show = false;}}else{// 如果第2級菜單是隱藏狀態，那麼就顯示2級菜單MyUtils.startAnimIn(level2);isLevel2Show = true;}break;}}/** * 改變第1級菜單的狀態 */private void changeLevel1State() {//如果第1級菜單是顯示狀態，那麼就隱藏 1，2，3級菜單 if(isLevel1show){MyUtils.startAnimOut(level1);isLevel1show = false;if(isLevel2Show){ // 判斷2級菜單是否顯示MyUtils.startAnimOut(level2,100);isLevel2Show = false;if(isLevel3Show){ // 判斷3級菜單是否顯示MyUtils.startAnimOut(level3,200);isLevel3Show = false;}}}else{//如果第1級菜單是隱藏狀態，那麼就顯示 1，2級菜單 MyUtils.startAnimIn(level1);isLevel1show = true;MyUtils.startAnimIn(level2,200);isLevel2Show = true;}}@Override/** * 響應按鍵的動作 */public boolean onKeyDown(int keyCode, KeyEvent event) {if(keyCode == KeyEvent.KEYCODE_MENU){ // 監聽 menu 按鍵changeLevel1State();}return super.onKeyDown(keyCode, event);}}

最後最後，感覺自訂群組件還是很強大很炫的，明天繼續學習總結這方面的知識。。睡覺。。

Android優酷菜單組件自訂