Android侧滑菜单的实现

1.侧滑菜单概述

什么是侧滑菜单

侧滑菜单是在应用中非常常见的从侧边划出菜单的一个效果
在这里插入图片描述
在本文中,将讲解如何实现侧滑菜单。

实现侧滑菜单的两种主要方式

1.Slidingmenu开源库https://github.com/jfeinstein10/SlidingMenu
2.Drawerlayout

由于Drawerlayout包含在support包内,可直接拿来使用,更为方便,谷歌在v4包中添加了DrawerLayout之后我们通常使用Drawerlayout来实现侧滑菜单效果。本文将着重讲解如何通过Drawerlayout实现侧滑菜单的效果。

2.SlidingMenu开源库应用简介

SlidingMenu开源库
SlidingMenu 是GitHub上的一个开源项目,用来实现SlidingMenu的菜单效果。目前为止,它提供了侧滑菜单的最佳实现:定制灵活、各种阴影和渐变的滑动效果也很不错。SlidingMenu 是一个开源库,而不是一个完整的项目,要把它作为libary引入到你自己的工程里,简单配置一下就可以实现SlidingMenu的效果。

常用属性介绍

menu.setMode(SlidingMenu.LEFT);//设置左滑菜单
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的屏幕范围,该设置为全屏区域都可以滑动
menu.setShadowDrawable(R.drawable.shadow);//设置阴影图片
menu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
menu.setBehindWidth(400);//设置SlidingMenu菜单的宽度
menu.setFadeDegree(0.35f);//SlidingMenu滑动时的渐变程度
menu.attachToActivity(this,
SlidingMenu.SLIDING_CONTENT);//使SlidingMenu附加在Activity上
menu.setMenu(R.layout.menu_layout);//设置menu的布局文件
menu.toggle();//动态判断自动关闭或开启SlidingMenu menu.showMenu();//显示SlidingMenu
menu.showContent();//显示内容

监听slidingmenu打开

menu.setOnOpenListener(onOpenListener);//监听slidingmenu打开

关于关闭menu有两个监听,简单的来说,对于menu close事件,一个是when,一个是after

menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭时事件
menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭后事件

左右都可以划出SlidingMenu菜单只需要设置

menu.setMode(SlidingMenu.LEFT_RIGHT);属性,然后设置右侧菜单的布局文件
menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右侧菜单的阴影图片

设置SlidingMenu属性

sm = getSlidingMenu();//如果只显示左侧菜单就是用LEFT,右侧就RIGHT,左右都支持就LEFT_RIGHT
sm.setMode(SlidingMenu.LEFT_RIGHT);//设置菜单滑动模式,菜单是出现在左侧还是右侧,还是左右两侧都有
sm.setShadowDrawable(R.drawable.shadow);//设置阴影的图片资源
sm.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
sm.setBehindWidth(200);//设置菜单的宽
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的区域

支持右侧划出菜单

SlidingMenu可以同时支持划出左右两侧的菜单,互不冲突,而且动画优美,体验良好。

sm.setSecondaryMenu(R.layout.menu_frame2);//设置右侧菜单
sm.setSecondaryShadowDrawable(R.drawable.shadowright);//设置右侧菜单阴影的图片资源
//右侧SlidingMenu的Fragment
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame2,
new SampleListFragment()).commit();

slidingMenu = getSlidingMenu(); //设置是左滑还是右滑,还是左右都可以滑
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT); //设置阴影宽度
slidingMenu.setShadowWidth(getWindowManager().getDefaultDisplay().getWidth()
/ 40); //设置左菜单阴影图片 slidingMenu.setShadowDrawable(R.drawable.shadow);
//设置右菜单阴影图片
slidingMenu.setSecondaryShadowDrawable(R.drawable.right_shadow);
//设置菜单占屏幕的比例
slidingMenu.setBehindOffset(getWindowManager().getDefaultDisplay().getWidth()
/ 5); //设置滑动时菜单的是否淡入淡出 slidingMenu.setFadeEnabled(true); //设置淡入淡出的比例
slidingMenu.setFadeDegree(0.4f); //设置滑动时拖拽效果
slidingMenu.setBehindScrollScale(0); //设置要使菜单滑动,触碰屏幕的范围
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

3.DrawerLayout详细介绍

Drawerlayout概述

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件。drawerLayout分为侧边菜单和主内容区两部分,侧边菜单可以根据手势展开与隐藏(drawerLayout自身特性),主内容区的内容可以随着菜单的点击而变化(这需要使用者自己实现)。

使用Drawerlayout的要点

1)drawerLayout是一个布局控件

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout    
	xmlns:android="http://schemas.android.com/apk/res/android"    
	android:id="@+id/drawer_layout"    
	android:layout_width="match_parent"    
	android:layout_height="match_parent">    
	<!-- As the main content view, the view below consumes the entire         space available using match_parent in both dimensions. -->    
	<FrameLayout        
	    android:id="@+id/content_frame"        
	    android:layout_width="match_parent"        			
	    android:layout_height="match_parent" />    
	<!-- android:layout_gravity="start" tells DrawerLayout to treat         this as a sliding drawer on the left side for left-to-right         languages and on the right side for right-to-left languages.         The drawer is given a fixed width in dp and extends the full height of         the container. A solid background is used for contrast         with the content view. -->    
	<ListView    
	    android:id="@+id/left_drawer"
	    android:layout_width="240dp"        
	    android:layout_height="match_parent"        
	    android:layout_gravity="start"        
	    android:choiceMode="singleChoice"        
	    android:divider="@android:color/transparent"        
	    android:dividerHeight="0dp"        
	    android:background="#111"/>
 </android.support.v4.widget.DrawerLayout>

其中:
1.DrawerLayout最好为界面的根布局,官网是这样说的,否则可能会出现触摸事件被屏蔽的问题;
2.主内容区的布局代码要放在侧滑菜单布局的前面, 因为 XML 顺序意味着按 z 序(层叠顺序)排序,并且抽屉式导航栏必须位于内容顶部;
3.侧滑菜单部分的布局(这里是ListView)必须设置layout_gravity属性,他表示侧滑菜单是在左边还是右边,而且如果不设置在打开关闭抽屉的时候会报错,设置了layout_gravity="start/left"的视图才会被认为是侧滑菜单。

2)建议用ActionBarDrawerToggle来监听

mDrawerToggle = new ActionBarDrawerToggle(    
    this,                  /* host Activity */        
    mDrawerLayout,         /* DrawerLayout object */        
    R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */        
    R.string.drawer_open,  /* "open drawer" description for accessibility */        
    R.string.drawer_close  /* "close drawer" description for accessibility */        
    ) {
       
    public void onDrawerClosed(View view) {
           
    	getActionBar().setTitle(mTitle);        
    	invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()    
    	}    
    	public void onDrawerOpened(View drawerView) {
           
    		getActionBar().
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值