android 中自定義菜單

時間 2019-11-11

原文原文鏈接

要點：

一、隱藏和顯示菜單，我使用了一個線性佈局把菜單封裝起來。java

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_alignParentBottom="true"
    android:background="@drawable/menubackground"
    android:layout_width="fill_parent"
    android:layout_height="144px"
    android:orientation="vertical"
    android:gravity="center"
    android:visibility="gone"
          android:id="@+id/lines">
          <LinearLayout android:orientation="horizontal" 
          android:gravity="center" 
          android:layout_width="fill_parent"
    android:layout_height="72px"
          >
    <ImageButton
            android:layout_marginLeft="8dip" 
            android:id="@+id/menu_btn_index"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_index_selector"
            />
            
     <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_news_selector"
            android:id="@+id/menu_btn_news"
            />
            
     <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_lib_selector"
            android:id="@+id/menu_btn_lib"
            />
             <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_add_selector"
            android:id="@+id/menu_btn_add"
            />
            
    <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_set_selector"
            android:id="@+id/menu_btn_set"
            />
    
    </LinearLayout>
    
    <LinearLayout android:orientation="horizontal" android:gravity="center"
            android:layout_width="fill_parent"
            android:layout_height="72px">
    <ImageButton
            android:layout_marginLeft="8dip" 
            android:id="@+id/menu_btn_index"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_index_selector"
            />
            
     <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_news_selector"
            android:id="@+id/menu_btn_news"
            />
            
     <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_lib_selector"
            android:id="@+id/menu_btn_lib"
            />
            
     <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_add_selector"
            android:id="@+id/menu_btn_add"
            />
            
    <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_quit_selector"
            android:id="@+id/menu_btn_quit"
            />
    </LinearLayout>            
</LinearLayout>

二、模擬菜單的效果，增長動畫，佈局顯示的時候增長一個漸漸底部生氣的效果，隱藏的時候增長一個緩緩下落的效果，顯示菜單動畫文件：android

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
                android:fromXDelta="0"
                android:toXDelta="0"
                android:fromYDelta="00"
                android:toYDelta="140"
                android:duration="200" />
</set>

隱藏菜單動畫文件：web

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
                android:fromXDelta="0"
                android:toXDelta="0"
                android:fromYDelta="140"
                android:toYDelta="00"
                android:duration="200" />
</set>

動畫調用：express

 /**
     * 顯示菜單欄, 從新實現的Option menu.
     * */
    private void showAppMenu() {
            if (menuShowAnimation == null) {
                    menuShowAnimation = AnimationUtils
                                    .loadAnimation(mContext, R.anim.menuhide);
            }
            myLayout.startAnimation(menuShowAnimation);
            myLayout.setVisibility(View.VISIBLE);
    }
    /**
     * 隱藏菜單欄, 從新實現的Option menu.
     * */
    private void hideAppMenu() {
            myLayout.setVisibility(View.GONE);
            if (menuHideAnimation == null)
                    menuHideAnimation =AnimationUtils
                                    .loadAnimation(mContext, R.anim.menushow);
            myLayout.startAnimation(menuHideAnimation);
    }

三、控制菜單的隱藏和顯示，須要重寫三個方法public boolean onCreateOptionsMenu(Menu menu),apache

public boolean dispatchKeyEvent(KeyEvent event) 和public boolean dispatchTouchEvent(MotionEvent event)

@Override
        public boolean onCreateOptionsMenu(Menu menu) {
                if(mCustomMenu==null)
                        mCustomMenu=new CustomMenu(CustomMenuActivity.this,CustomMenuActivity.this);
                mCustomMenu.CreateMenu();
                return false;
        }
        
        @Override
        public boolean dispatchKeyEvent(KeyEvent event) {
                if(mCustomMenu!=null)
                        return mCustomMenu.dispatchKeyEvent(event,super.dispatchKeyEvent(event));
                return super.dispatchKeyEvent(event);
        }
        
        @Override
        public boolean dispatchTouchEvent(MotionEvent event) {
                if(mCustomMenu!=null)
                        return mCustomMenu.dispatchTouchEvent(event,super.dispatchTouchEvent(event));
                return super.dispatchTouchEvent(event);
        }

四、實現菜單點擊時候被點擊菜單狀態的般變化，這裏我使用了selector來實現，菜單我使用ImageButton將selector賦值給ImageButton 的background便可：
一個菜單項app

<ImageButton
            android:layout_marginLeft="8dip" 
            android:id="@+id/menu_btn_index"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/menu_index_selector"
            />

menu_index_selector 文件內容以下：
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2009 The Android Open Source Project
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
          http://www.apache.org/licenses/LICENSE-2.0
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false"
        android:drawable="@drawable/menu_index" />
    <item android:state_pressed="true"
        android:drawable="@drawable/menu_index1" />
    <item android:state_focused="true"
        android:drawable="@drawable/menu_index1" />
    <item
         android:drawable="@drawable/menu_index" />
</selector>

五、頁面的調用使用:<include>標籤來進行引用：less

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <include layout="@layout/menu_layout"/>
  </RelativeLayout>

這樣的話一個模擬的自定義菜單就基本完成了，菜單控制完整代碼java類：ide

package com.demo.utils;
import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import com.demo.HelloWorld.R;
/**
 * @author Administrator
 *         xsl  xushilin@kingtoneinfo.com
 * @version： 建立時間：2011-8-30 上午11:16:19
 * 說         明:
 * 修改歷史：
 */
public class CustomMenu {
        private LinearLayout myLayout;
        private  Context mContext;
        private Activity mActivity;
        private Animation menuShowAnimation = null;
        private Animation menuHideAnimation = null;
        private Resources res;
        public int screen_height;
        private ImageButton imgIndex,imgSet,imgNews,imgAdd,imgQuit,imgLib;        
        public CustomMenu(Context context,Activity activity){
                
                mContext=context;        
                mActivity=activity;
                res = mContext.getResources();
                screen_height = res.getDisplayMetrics().heightPixels;
                myLayout=(LinearLayout)activity.findViewById(R.id.lines);
                
                imgIndex=(ImageButton)activity.findViewById(R.id.menu_btn_index);        
                imgSet=(ImageButton)activity.findViewById(R.id.menu_btn_set);
                imgNews=(ImageButton)activity.findViewById(R.id.menu_btn_news);
                imgAdd=(ImageButton)activity.findViewById(R.id.menu_btn_add);
                imgQuit=(ImageButton)activity.findViewById(R.id.menu_btn_quit);
                imgLib=(ImageButton)activity.findViewById(R.id.menu_btn_lib);
                //返回首頁
                imgIndex.setOnClickListener(new OnClickListener(){
                        public void onClick(View v) {
                                //TODO do somthing
                        }                        
                });
                //設置
                imgSet.setOnClickListener(new OnClickListener(){
                        public void onClick(View v) {
                                //TODO do somthing
                        }                        
                });
                //查詢
                imgNews.setOnClickListener(new OnClickListener(){
                        public void onClick(View v) {
                                //TODO do somthing
                        }                        
                });
                //編輯
                imgAdd.setOnClickListener(new OnClickListener(){
                        public void onClick(View v) {
                                //TODO do somthing
                        }                        
                });
                //退出系統
                imgQuit.setOnClickListener(new OnClickListener(){
                        public void onClick(View v) {
                                //TODO do somthing
                        }                        
                });
                //素材庫
                imgLib.setOnClickListener(new OnClickListener(){
                        public void onClick(View v) {
                                //TODO do somthing
                        }                        
                });
        }
        public  void  CreateMenu(){                
                if(myLayout.getVisibility()==View.GONE)
                        showAppMenu();
                        //myLayout.setVisibility(View.VISIBLE);                
                else
                        hideAppMenu();
                        //myLayout.setVisibility(View.GONE);
        }
          /**
     * 顯示菜單欄, 從新實現的Option menu.
     * */
    private void showAppMenu() {
            if (menuShowAnimation == null) {
                    menuShowAnimation = AnimationUtils
                                    .loadAnimation(mContext, R.anim.menuhide);
            }
            myLayout.startAnimation(menuShowAnimation);
            myLayout.setVisibility(View.VISIBLE);
    }
    /**
     * 隱藏菜單欄, 從新實現的Option menu.
     * */
    private void hideAppMenu() {
            myLayout.setVisibility(View.GONE);
            if (menuHideAnimation == null)
                    menuHideAnimation =AnimationUtils
                                    .loadAnimation(mContext, R.anim.menushow);
            myLayout.startAnimation(menuHideAnimation);
    }
    
    
    public boolean dispatchTouchEvent(MotionEvent event,boolean b) {
                if (myLayout.getVisibility() == View.VISIBLE) {
                        int y = (int) event.getRawY();
                        if (y < screen_height - myLayout.getHeight()) {
                                hideAppMenu();
                                return true;
                        }
                }            
                return b;
    }
    
    public boolean dispatchKeyEvent(KeyEvent event,boolean b) {
            int act = event.getAction();
            int code = event.getKeyCode();                
            // app menu like option menu
            if (code == KeyEvent.KEYCODE_MENU){
                    if (act == KeyEvent.ACTION_DOWN){
                            if (myLayout.getVisibility() == View.VISIBLE) {
                                    hideAppMenu();
                            } else {
                                    showAppMenu();
                            }
                            return true;
                    }
            }else if (code == KeyEvent.KEYCODE_BACK){
                    if (myLayout.getVisibility() == View.VISIBLE) {
                            hideAppMenu();
                            return true;
                    }
            }
            return b;        
    }
}

activity調用菜單完整代碼：佈局

package com.demo.ui;
import com.demo.HelloWorld.R;
import com.demo.utils.CustomMenu;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MotionEvent;
/**
 * @author XSL
 *         xsl  xushilin@kingtoneinfo.com
 * @version： 建立時間：2011-8-30 上午11:13:14
 * 說         明:
 * 修改歷史：
 */
public class CustomMenuActivity extends Activity {
        private CustomMenu mCustomMenu=null;
        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.custom_menu);                
        }
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                if(mCustomMenu==null)
                        mCustomMenu=new CustomMenu(CustomMenuActivity.this,CustomMenuActivity.this);
                mCustomMenu.CreateMenu();
                return false;
        }
        
        @Override
        public boolean dispatchKeyEvent(KeyEvent event) {
                if(mCustomMenu!=null)
                        return mCustomMenu.dispatchKeyEvent(event,super.dispatchKeyEvent(event));
                return super.dispatchKeyEvent(event);
        }
        
        @Override
        public boolean dispatchTouchEvent(MotionEvent event) {
                if(mCustomMenu!=null)
                        return mCustomMenu.dispatchTouchEvent(event,super.dispatchTouchEvent(event));
                return super.dispatchTouchEvent(event);
        }
        
        
}

實現的效果以下：
動畫