Android SlidingMenu 使用详解

分类：【Android github 控件】 2014-07-03 18:31 40902人阅读 评论(54) 收藏 举报 SlidingMenu 侧滑菜单 Android

目录(?)[+]

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/36677279

很多APP都有侧滑菜单的功能，部分APP左右都是侧滑菜单~SlidingMenu 这个开源项目可以很好帮助我们实现侧滑功能，如果对SlidingMenu 还不是很了解的童鞋，可以参考下本篇博客。将侧滑菜单引入项目的方式很多中，本博客先通过例子介绍各种引入方式，然后给大家展示个实例：主布局ViewPager，左右各一个侧滑菜单的用法，差不多已经能满足大部分应用的需求了。关于常用属性，在文章末尾介绍。

1、在Activity中通过SlidingMenu构造方法，直接设置侧滑菜单

[java] view plain copy
  1. packagecom.zhy.zhy_slidemenu_demo;
  3. importandroid.app.Activity;
  4. importandroid.os.Bundle;
  6. importcom.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
  8. publicclassMainActivityextendsActivity
  9. {
  11. @Override
  12. protectedvoidonCreate(BundlesavedInstanceState)
  13. {
  14. super.onCreate(savedInstanceState);
  15. setContentView(R.layout.activity_main);
  17. //configuretheSlidingMenu
  18. SlidingMenumenu=newSlidingMenu(this);
  19. menu.setMode(SlidingMenu.LEFT);
  20. //设置触摸屏幕的模式
  21. menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
  22. menu.setShadowWidthRes(R.dimen.shadow_width);
  23. menu.setShadowDrawable(R.drawable.shadow);
  25. //设置滑动菜单视图的宽度
  26. menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
  27. //设置渐入渐出效果的值
  28. menu.setFadeDegree(0.35f);
  29. /**
  30. *SLIDING_WINDOWwillincludetheTitle/ActionBarinthecontent
  31. *sectionoftheSlidingMenu,whileSLIDING_CONTENTdoesnot.
  32. */
  33. menu.attachToActivity(this,SlidingMenu.SLIDING_CONTENT);
  34. //为侧滑菜单设置布局
  35. menu.setMenu(R.layout.leftmenu);
  37. }
  39. }

效果图：

Android SlidingMenu 使用详解_第1张图片

是不是特别简单~几行代码搞定~哈~

2、通过把Activity继承SlidingActivity

a、继承SlidingActivity

b、然后在onCreate中setBehindContentView(R.layout.leftmenu); 设置侧滑菜单的布局

c、通过getSlidingMenu()得到SlidingMenu对象，然后设置样式

[java] view plain copy
  1. packagecom.zhy.zhy_slidemenu_demo02;
  3. importandroid.os.Bundle;
  5. importcom.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
  6. importcom.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;
  8. publicclassMainActivityextendsSlidingActivity
  9. {
  10. @Override
  11. publicvoidonCreate(BundlesavedInstanceState)
  12. {
  13. super.onCreate(savedInstanceState);
  14. setContentView(R.layout.activity_main);
  16. setBehindContentView(R.layout.leftmenu);
  17. //configuretheSlidingMenu
  18. SlidingMenumenu=getSlidingMenu();
  19. menu.setMode(SlidingMenu.LEFT);
  20. //设置触摸屏幕的模式
  21. menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
  22. menu.setShadowWidthRes(R.dimen.shadow_width);
  23. menu.setShadowDrawable(R.drawable.shadow);
  25. //设置滑动菜单视图的宽度
  26. menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
  27. //设置渐入渐出效果的值
  28. menu.setFadeDegree(0.35f);
  29. /**
  30. *SLIDING_WINDOWwillincludetheTitle/ActionBarinthecontent
  31. *sectionoftheSlidingMenu,whileSLIDING_CONTENTdoesnot.
  32. */
  33. //menu.attachToActivity(this,SlidingMenu.SLIDING_CONTENT);
  34. //menu.setMenu(R.layout.leftmenu);
  36. }
  38. }

效果图和第一种方式一样~是不是也很简单~~

3、将SlidingMenu当作普通控件

可以把SlidingMenu作为普通的view，然后在布局中声明，丧心病狂的玩~下面看个例子：

[html] view plain copy
  1. <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:id="@+id/id_main_ly"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  7. <LinearLayout
  8. android:layout_width="wrap_content"
  9. android:layout_height="wrap_content"
  10. android:layout_marginLeft="30dp"
  11. android:layout_marginTop="30dp">
  14. <com.jeremyfeinstein.slidingmenu.lib.SlidingMenu
  15. xmlns:sliding="http://schemas.android.com/apk/res-auto"
  16. android:id="@+id/slidingmenulayout"
  17. android:layout_width="120dp"
  18. android:layout_height="170dp"
  19. android:background="#ffffffff"
  20. sliding:behindOffset="0dp"
  21. sliding:behindScrollScale="1"
  22. sliding:fadeDegree="0.3"
  23. sliding:fadeEnabled="true"
  24. sliding:touchModeAbove="fullscreen"
  25. sliding:viewAbove="@layout/pic"/>
  26. </LinearLayout>
  28. </RelativeLayout>

我们SlidingMenu作为普通View在布局文件中设置了布局，并且设置了viewAbove的值为另一个布局。

下面看pic布局：

[html] view plain copy
  1. <?xmlversion="1.0"encoding="utf-8"?>
  2. <ImageViewxmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="120dp"
  4. android:layout_height="170dp"
  5. android:src="@drawable/zhy"/>

就是一张妹子图片。

最后看主Activity:

[java] view plain copy
  1. packagecom.zhy.zhy_slidemenu_demo03;
  3. importandroid.app.Activity;
  4. importandroid.os.Bundle;
  5. importandroid.view.View;
  6. importandroid.view.View.OnClickListener;
  8. importcom.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
  10. publicclassMainActivityextendsActivity
  11. {
  12. privateSlidingMenumLeftMenu;
  14. @Override
  15. protectedvoidonCreate(BundlesavedInstanceState)
  16. {
  17. super.onCreate(savedInstanceState);
  18. setContentView(R.layout.activity_main);
  20. mLeftMenu=(SlidingMenu)findViewById(R.id.slidingmenulayout);
  21. //configuretheSlidingMenu
  22. //SlidingMenumenu=newSlidingMenu(this);
  23. mLeftMenu.setMode(SlidingMenu.LEFT);
  24. //设置触摸屏幕的模式
  25. mLeftMenu.setShadowWidthRes(R.dimen.shadow_width);
  26. mLeftMenu.setShadowDrawable(R.drawable.shadow);
  28. mLeftMenu.setMenu(R.layout.leftmenu);
  30. mLeftMenu.setOnClickListener(newOnClickListener()
  31. {
  32. @Override
  33. publicvoidonClick(Viewv)
  34. {
  35. if(mLeftMenu.isMenuShowing())
  36. mLeftMenu.toggle();
  37. }
  38. });
  39. //设置滑动菜单视图的宽度
  40. //设置渐入渐出效果的值
  41. /**
  42. *SLIDING_WINDOWwillincludetheTitle/ActionBarinthecontent
  43. *sectionoftheSlidingMenu,whileSLIDING_CONTENTdoesnot.
  44. */
  46. }
  48. }

效果图：

Android SlidingMenu 使用详解_第2张图片

通过SlidingMenu给图片设置一个滑动展示介绍，你也可以滑动显示任何东西，下载、分享按钮什么的。图片很多的时候不知道效率咋样，可以这么玩，但是不建议哈~


4、SlidingMenu设置左右侧滑菜单例子

上面介绍的3个方法，SlidingMenu的布局中控件的事件都需要写在Activity中，这样代码比较臃肿，一般会使用Fragment作为侧滑菜单的布局容器。

核心代码：

[java] view plain copy
  1. FragmentleftMenuFragment=newMenuLeftFragment();
  2. setBehindContentView(R.layout.left_menu_frame);
  3. getSupportFragmentManager().beginTransaction()
  4. .replace(R.id.id_left_menu_frame,leftMenuFragment).commit();
  5. SlidingMenumenu=getSlidingMenu();
  6. menu.setMode(SlidingMenu.LEFT_RIGHT);
  7. //设置触摸屏幕的模式
  8. menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

先给侧滑菜单通过 setBehindContentView(R.layout.left_menu_frame);设置一个布局，此布局中只有一个FrameLayout，然后使用FragmentManager将Fragment替换掉此Fragment，这样这个Fragment就作为我们侧滑菜单的布局了，我们的事件处理代码也可以写在Fragement中，而不是Activity中。

下面看具体例子：

首先分别是左右两边的两个Fragment:

MenuLeftFragment

[java] view plain copy
  1. packagecom.zhy.zhy_slidemenu_demo04;
  3. importjava.util.Arrays;
  4. importjava.util.List;
  6. importandroid.os.Bundle;
  7. importandroid.support.v4.app.Fragment;
  8. importandroid.view.LayoutInflater;
  9. importandroid.view.View;
  10. importandroid.view.ViewGroup;
  11. importandroid.widget.ArrayAdapter;
  12. importandroid.widget.ListAdapter;
  13. importandroid.widget.ListView;
  15. publicclassMenuLeftFragmentextendsFragment
  16. {
  17. privateViewmView;
  18. privateListViewmCategories;
  19. privateList<String>mDatas=Arrays
  20. .asList("聊天","发现","通讯录","朋友圈","订阅号");
  21. privateListAdaptermAdapter;
  23. @Override
  24. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
  25. BundlesavedInstanceState)
  26. {
  27. if(mView==null)
  28. {
  29. initView(inflater,container);
  30. }
  31. returnmView;
  32. }
  34. privatevoidinitView(LayoutInflaterinflater,ViewGroupcontainer)
  35. {
  36. mView=inflater.inflate(R.layout.left_menu,container,false);
  37. mCategories=(ListView)mView
  38. .findViewById(R.id.id_listview_categories);
  39. mAdapter=newArrayAdapter<String>(getActivity(),
  40. android.R.layout.simple_list_item_1,mDatas);
  41. mCategories.setAdapter(mAdapter);
  42. }
  43. }

左边的侧滑布局就是一个ListView，代码比较简单~

MenuRightFragment

[java] view plain copy
  1. packagecom.zhy.zhy_slidemenu_demo04;
  3. importandroid.os.Bundle;
  4. importandroid.support.v4.app.Fragment;
  5. importandroid.view.LayoutInflater;
  6. importandroid.view.View;
  7. importandroid.view.ViewGroup;
  9. publicclassMenuRightFragmentextendsFragment
  10. {
  11. privateViewmView;
  13. @Override
  14. publicViewonCreateView(LayoutInflaterinflater,ViewGroupcontainer,
  15. BundlesavedInstanceState)
  16. {
  17. if(mView==null)
  18. {
  19. mView=inflater.inflate(R.layout.right_menu,container,false);
  20. }
  21. returnmView;
  22. }
  23. }
右边的侧滑菜单的Fragment，加载了一个布局，没有做任何事件处理~

最后是MainActivity

[java] view plain copy
  1. packagecom.zhy.zhy_slidemenu_demo04;
  3. importjava.util.ArrayList;
  4. importjava.util.List;
  6. importandroid.os.Bundle;
  7. importandroid.support.v4.app.Fragment;
  8. importandroid.support.v4.app.FragmentPagerAdapter;
  9. importandroid.support.v4.view.ViewPager;
  10. importandroid.view.View;
  11. importandroid.view.Window;
  13. importcom.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
  14. importcom.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
  16. publicclassMainActivityextendsSlidingFragmentActivity
  17. {
  19. privateViewPagermViewPager;
  20. privateFragmentPagerAdaptermAdapter;
  21. privateList<Fragment>mFragments=newArrayList<Fragment>();
  23. @Override
  24. publicvoidonCreate(BundlesavedInstanceState)
  25. {
  26. super.onCreate(savedInstanceState);
  27. this.requestWindowFeature(Window.FEATURE_NO_TITLE);
  28. setContentView(R.layout.activity_main);
  29. //初始化SlideMenu
  30. initRightMenu();
  31. //初始化ViewPager
  32. initViewPager();
  34. }
  36. privatevoidinitViewPager()
  37. {
  38. mViewPager=(ViewPager)findViewById(R.id.id_viewpager);
  39. MainTab01tab01=newMainTab01();
  40. MainTab02tab02=newMainTab02();
  41. MainTab03tab03=newMainTab03();
  42. mFragments.add(tab01);
  43. mFragments.add(tab02);
  44. mFragments.add(tab03);
  45. /**
  46. *初始化Adapter
  47. */
  48. mAdapter=newFragmentPagerAdapter(getSupportFragmentManager())
  49. {
  50. @Override
  51. publicintgetCount()
  52. {
  53. returnmFragments.size();
  54. }
  56. @Override
  57. publicFragmentgetItem(intarg0)
  58. {
  59. returnmFragments.get(arg0);
  60. }
  61. };
  62. mViewPager.setAdapter(mAdapter);
  63. }
  65. privatevoidinitRightMenu()
  66. {
  68. FragmentleftMenuFragment=newMenuLeftFragment();
  69. setBehindContentView(R.layout.left_menu_frame);
  70. getSupportFragmentManager().beginTransaction()
  71. .replace(R.id.id_left_menu_frame,leftMenuFragment).commit();
  72. SlidingMenumenu=getSlidingMenu();
  73. menu.setMode(SlidingMenu.LEFT_RIGHT);
  74. //设置触摸屏幕的模式
  75. menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
  76. menu.setShadowWidthRes(R.dimen.shadow_width);
  77. menu.setShadowDrawable(R.drawable.shadow);
  78. //设置滑动菜单视图的宽度
  79. menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
  80. //设置渐入渐出效果的值
  81. menu.setFadeDegree(0.35f);
  82. //menu.setBehindScrollScale(1.0f);
  83. menu.setSecondaryShadowDrawable(R.drawable.shadow);
  84. //设置右边（二级）侧滑菜单
  85. menu.setSecondaryMenu(R.layout.right_menu_frame);
  86. FragmentrightMenuFragment=newMenuRightFragment();
  87. getSupportFragmentManager().beginTransaction()
  88. .replace(R.id.id_right_menu_frame,rightMenuFragment).commit();
  89. }
  91. publicvoidshowLeftMenu(Viewview)
  92. {
  93. getSlidingMenu().showMenu();
  94. }
  96. publicvoidshowRightMenu(Viewview)
  97. {
  98. getSlidingMenu().showSecondaryMenu();
  99. }
  100. }

简单说明一下，MainActivity继承的是SlidingFragmentActivity ，在Activity中FragmentPagerAdapter和viewPager作为主布局，然后分别初始化SlidingMenu的两边的菜单。

效果图：


哈哈，微信又躺枪了~~这个例子应该可以满足一般APP的需求了。

5、SlidingMenu的一些常用属性

//设置侧滑菜单的位置，可选值LEFT , RIGHT , LEFT_RIGHT （两边都有菜单时设置）

menu.setMode(SlidingMenu.LEFT_RIGHT);

// 设置触摸屏幕的模式，可选只MARGIN , CONTENT
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

//根据dimension资源文件的ID来设置阴影的宽度
menu.setShadowWidthRes(R.dimen.shadow_width);

//根据资源文件ID来设置滑动菜单的阴影效果
menu.setShadowDrawable(R.drawable.shadow);

// 这两个都是设置滑动菜单视图的宽度，二选一
//设置SlidingMenu离屏幕的偏移量
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
//设置宽度
menu.setBehindWidth()

// 设置渐入渐出效果的值
menu.setFadeDegree(0.35f);

//设置SlidingMenu与下方视图的移动的速度比，当为1时同时移动，取值0-1
menu.setBehindScrollScale(1.0f);

//设置二级菜单的阴影效果
menu.setSecondaryShadowDrawable(R.drawable.shadow);

//设置右边（二级）侧滑菜单
menu.setSecondaryMenu(R.layout.right_menu_frame);

//为侧滑菜单设置布局
menu.setMenu(R.layout.leftmenu);

//把滑动菜单添加进所有的Activity中，可选值SLIDING_CONTENT ， SLIDING_WINDOW
menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

还有几个监听事件：

[java] view plain copy
  1. /**
  2. *设置打开监听事件，当滑动菜单被打开时调用
  3. */
  4. publicvoidsetOnOpenListener(OnOpenListenerlistener){
  5. mOpenListener=listener;
  6. }
  8. /**
  9. *设置关闭监听事件，当滑动菜单被关闭时调用
  10. */
  11. publicvoidsetOnCloseListener(OnCloseListenerlistener){
  12. //mViewAbove.setOnCloseListener(listener);
  13. mCloseListener=listener;
  14. }
  16. /**
  17. *设置打开监听事件，当滑动菜单被打开过之后调用
  18. */
  19. publicvoidsetOnOpenedListener(OnOpenedListenerlistener){
  20. mViewAbove.setOnOpenedListener(listener);
  21. }
  23. /**
  24. *设置关闭监听事件，当滑动菜单被关闭过之后调用
  25. */
  26. publicvoidsetOnClosedListener(OnClosedListenerlistener){
  27. mViewAbove.setOnClosedListener(listener);
  28. }

更多相关文章

  1. Android中的界面布局之帧布局，相对布局
  2. 学习Android从0开始之基础篇（3）-视图组件之布局管理器
  3. 初学Android,使用菜单资源(十九)
  4. Android 五大布局FrameLayout,LinearLayout ,AbsoluteLayout...
  5. Android的CheckBox控件的点击效果布局文件
  6. Android开发UI布局必备基础知识
  7. Android基础入门教程——2.2.1 LinearLayout(线性布局)

随机推荐

  1. android网游开发之socket的简单设计和实
  2. Android平台上关于IM的实践总结
  3. Android(安卓)摇一摇开发——灵敏度优化
  4. Android单位区别与转化
  5. Android(安卓)屏幕尺寸适配大全
  6. 安卓开发中调用WebService实例
  7. android 优秀源码
  8. Android几种常见的多渠道(批量)打包方式
  9. Android中的广播机制（一）----- 接收广播
  10. 高德地图Android错误码1008、32和7；错误提