android 自定义菜单

系统 1620 0

 

在android开发的过程中系统自带的菜单往往满足不了开发中的一些需求,比如说一排最多只能放置三个菜单,坐多只能放置6个,再多的话就会折叠起来,如果我们想再一排显示4个或5个菜单那么就要自己想办法处理。

这里我用布局的隐藏并加上动画来模拟菜单的效果。

要点:

1、隐藏和显示菜单,我使用了一个线性布局把菜单封装起来。

          <?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>


        

2、模拟菜单的效果,增加动画,布局显示的时候增加一个渐渐底部生气的效果,隐藏的时候增加一个缓缓下落的效果,显示菜单动画文件:

          
            <?
          
          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
          
          
            >
          
        

 

隐藏菜单动画文件:

 

          
            <?
          
          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
          
          
            >
          
        


动画调用:

 

 

          
            /**
     * 显示菜单栏, 重新实现的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);
    }
        


3、控制菜单的隐藏和显示,需要重写三个方法public boolean onCreateOptionsMenu(Menu menu),

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);
	}
        


4、实现菜单点击时候被点击菜单状态的般变化,这里我使用了selector来实现,菜单我使用ImageButton将selector赋值给ImageButton 的background即可:

一个菜单项

          
            <
          
          
            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
          
          
            >
          
        

         
      

5、页面的调用使用:<include>标签来进行引用:

 

          
            <?
          
          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类:

        
          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);
	}
	
	
}
      

实现的效果如下:

image image


作者: 蓝之风  
出处: http://www.cnblogs.com/vaiyanzi/  
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

android 自定义菜单


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论