AndroidSlidingMenu使用详解

  • 转载请标明出处:http://blog.youkuaiyun.com/lmj623565791/article/details/36677279

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

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

     

    01. package com.zhy.zhy_slidemenu_demo;
    02.  
    03. import android.app.Activity;
    04. import android.os.Bundle;
    05.  
    06. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
    07.  
    08. public class MainActivity extends Activity
    09. {
    10.  
    11. @Override
    12. protected void onCreate(Bundle savedInstanceState)
    13. {
    14. super.onCreate(savedInstanceState);
    15. setContentView(R.layout.activity_main);
    16.  
    17. // configure the SlidingMenu
    18. SlidingMenu menu = new SlidingMenu(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);
    24.  
    25. // 设置滑动菜单视图的宽度
    26. menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
    27. // 设置渐入渐出效果的值
    28. menu.setFadeDegree(0.35f);
    29. /**
    30. * SLIDING_WINDOW will include the Title/ActionBar in the content
    31. * section of the SlidingMenu, while SLIDING_CONTENT does not.
    32. */
    33. menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
    34. //为侧滑菜单设置布局
    35. menu.setMenu(R.layout.leftmenu);
    36.  
    37. }
    38.  
    39. }

    效果图:

     

    \

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

    2、通过把Activity继承SlidingActivity

    a、继承SlidingActivity

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

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

     

    01. package com.zhy.zhy_slidemenu_demo02;
    02.  
    03. import android.os.Bundle;
    04.  
    05. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
    06. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;
    07.  
    08. public class MainActivity extends SlidingActivity
    09. {
    10. @Override
    11. public void onCreate(Bundle savedInstanceState)
    12. {
    13. super.onCreate(savedInstanceState);
    14. setContentView(R.layout.activity_main);
    15.  
    16. setBehindContentView(R.layout.leftmenu);
    17. // configure the SlidingMenu
    18. SlidingMenu menu = 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);
    24.  
    25. // 设置滑动菜单视图的宽度
    26. menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
    27. // 设置渐入渐出效果的值
    28. menu.setFadeDegree(0.35f);
    29. /**
    30. * SLIDING_WINDOW will include the Title/ActionBar in the content
    31. * section of the SlidingMenu, while SLIDING_CONTENT does not.
    32. */
    33. // menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
    34. // menu.setMenu(R.layout.leftmenu);
    35.  
    36. }
    37.  
    38. }

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

     

    3、将SlidingMenu当作普通控件

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

     

    01. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03. android:id="@+id/id_main_ly"
    04. android:layout_width="match_parent"
    05. android:layout_height="match_parent" >
    06.  
    07. <LinearLayout
    08. android:layout_width="wrap_content"
    09. android:layout_height="wrap_content"
    10. android:layout_marginLeft="30dp"
    11. android:layout_marginTop="30dp" >
    12.  
    13.  
    14. <com.jeremyfeinstein.slidingmenu.lib.SlidingMenu
    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>
    27.  
    28. </RelativeLayout>

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

     

    下面看pic布局:

     

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:layout_width="120dp"
    4. android:layout_height="170dp"
    5. android:src="@drawable/zhy" />

    就是一张妹子图片。

     

    最后看主Activity:

     

    01. package com.zhy.zhy_slidemenu_demo03;
    02.  
    03. import android.app.Activity;
    04. import android.os.Bundle;
    05. import android.view.View;
    06. import android.view.View.OnClickListener;
    07.  
    08. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
    09.  
    10. public class MainActivity extends Activity
    11. {
    12. private SlidingMenu mLeftMenu;
    13.  
    14. @Override
    15. protected void onCreate(Bundle savedInstanceState)
    16. {
    17. super.onCreate(savedInstanceState);
    18. setContentView(R.layout.activity_main);
    19.  
    20. mLeftMenu = (SlidingMenu) findViewById(R.id.slidingmenulayout);
    21. // configure the SlidingMenu
    22. // SlidingMenu menu = new SlidingMenu(this);
    23. mLeftMenu.setMode(SlidingMenu.LEFT);
    24. // 设置触摸屏幕的模式
    25. mLeftMenu.setShadowWidthRes(R.dimen.shadow_width);
    26. mLeftMenu.setShadowDrawable(R.drawable.shadow);
    27.  
    28. mLeftMenu.setMenu(R.layout.leftmenu);
    29.  
    30. mLeftMenu.setOnClickListener(new OnClickListener()
    31. {
    32. @Override
    33. public void onClick(View v)
    34. {
    35. if (mLeftMenu.isMenuShowing())
    36. mLeftMenu.toggle();
    37. }
    38. });
    39. // 设置滑动菜单视图的宽度
    40. // 设置渐入渐出效果的值
    41. /**
    42. * SLIDING_WINDOW will include the Title/ActionBar in the content
    43. * section of the SlidingMenu, while SLIDING_CONTENT does not.
    44. */
    45.  
    46. }
    47.  
    48. }

    效果图:

     

    \

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

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

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

    核心代码:

     

    1. Fragment leftMenuFragment = new MenuLeftFragment();
    2. setBehindContentView(R.layout.left_menu_frame);
    3. getSupportFragmentManager().beginTransaction()
    4. .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();
    5. SlidingMenu menu = 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

     

    01. package com.zhy.zhy_slidemenu_demo04;
    02.  
    03. import java.util.Arrays;
    04. import java.util.List;
    05.  
    06. import android.os.Bundle;
    07. import android.support.v4.app.Fragment;
    08. import android.view.LayoutInflater;
    09. import android.view.View;
    10. import android.view.ViewGroup;
    11. import android.widget.ArrayAdapter;
    12. import android.widget.ListAdapter;
    13. import android.widget.ListView;
    14.  
    15. public class MenuLeftFragment extends Fragment
    16. {
    17. private View mView;
    18. private ListView mCategories;
    19. private List<String> mDatas = Arrays
    20. .asList("聊天""发现""通讯录""朋友圈""订阅号");
    21. private ListAdapter mAdapter;
    22.  
    23. @Override
    24. public View onCreateView(LayoutInflater inflater, ViewGroup container,
    25. Bundle savedInstanceState)
    26. {
    27. if (mView == null)
    28. {
    29. initView(inflater, container);
    30. }
    31. return mView;
    32. }
    33.  
    34. private void initView(LayoutInflater inflater, ViewGroup container)
    35. {
    36. mView = inflater.inflate(R.layout.left_menu, container, false);
    37. mCategories = (ListView) mView
    38. .findViewById(R.id.id_listview_categories);
    39. mAdapter = new ArrayAdapter<String>(getActivity(),
    40. android.R.layout.simple_list_item_1, mDatas);
    41. mCategories.setAdapter(mAdapter);
    42. }
    43. }

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

     

    MenuRightFragment

     

    01. package com.zhy.zhy_slidemenu_demo04;
    02.  
    03. import android.os.Bundle;
    04. import android.support.v4.app.Fragment;
    05. import android.view.LayoutInflater;
    06. import android.view.View;
    07. import android.view.ViewGroup;
    08.  
    09. public class MenuRightFragment extends Fragment
    10. {
    11. private View mView;
    12.  
    13. @Override
    14. public View onCreateView(LayoutInflater inflater, ViewGroup container,
    15. Bundle savedInstanceState)
    16. {
    17. if(mView == null)
    18. {
    19. mView = inflater.inflate(R.layout.right_menu, container, false);
    20. }
    21. return mView ;
    22. }
    23. }
    右边的侧滑菜单的Fragment,加载了一个布局,没有做任何事件处理~

     

    最后是MainActivity

    001. package com.zhy.zhy_slidemenu_demo04;
    002.  
    003. import java.util.ArrayList;
    004. import java.util.List;
    005.  
    006. import android.os.Bundle;
    007. import android.support.v4.app.Fragment;
    008. import android.support.v4.app.FragmentPagerAdapter;
    009. import android.support.v4.view.ViewPager;
    010. import android.view.View;
    011. import android.view.Window;
    012.  
    013. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
    014. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
    015.  
    016. public class MainActivity extends SlidingFragmentActivity
    017. {
    018.  
    019. private ViewPager mViewPager;
    020. private FragmentPagerAdapter mAdapter;
    021. private List<Fragment> mFragments = new ArrayList<Fragment>();
    022.  
    023. @Override
    024. public void onCreate(Bundle savedInstanceState)
    025. {
    026. super.onCreate(savedInstanceState);
    027. this.requestWindowFeature(Window.FEATURE_NO_TITLE);
    028. setContentView(R.layout.activity_main);
    029. // 初始化SlideMenu
    030. initRightMenu();
    031. // 初始化ViewPager
    032. initViewPager();
    033.  
    034. }
    035.  
    036. private void initViewPager()
    037. {
    038. mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
    039. MainTab01 tab01 = new MainTab01();
    040. MainTab02 tab02 = new MainTab02();
    041. MainTab03 tab03 = new MainTab03();
    042. mFragments.add(tab01);
    043. mFragments.add(tab02);
    044. mFragments.add(tab03);
    045. /**
    046. * 初始化Adapter
    047. */
    048. mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
    049. {
    050. @Override
    051. public int getCount()
    052. {
    053. return mFragments.size();
    054. }
    055.  
    056. @Override
    057. public Fragment getItem(int arg0)
    058. {
    059. return mFragments.get(arg0);
    060. }
    061. };
    062. mViewPager.setAdapter(mAdapter);
    063. }
    064.  
    065. private void initRightMenu()
    066. {
    067.  
    068. Fragment leftMenuFragment = new MenuLeftFragment();
    069. setBehindContentView(R.layout.left_menu_frame);
    070. getSupportFragmentManager().beginTransaction()
    071. .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();
    072. SlidingMenu menu = getSlidingMenu();
    073. menu.setMode(SlidingMenu.LEFT_RIGHT);
    074. // 设置触摸屏幕的模式
    075. menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
    076. menu.setShadowWidthRes(R.dimen.shadow_width);
    077. menu.setShadowDrawable(R.drawable.shadow);
    078. // 设置滑动菜单视图的宽度
    079. menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
    080. // 设置渐入渐出效果的值
    081. menu.setFadeDegree(0.35f);
    082. // menu.setBehindScrollScale(1.0f);
    083. menu.setSecondaryShadowDrawable(R.drawable.shadow);
    084. //设置右边(二级)侧滑菜单
    085. menu.setSecondaryMenu(R.layout.right_menu_frame);
    086. Fragment rightMenuFragment = new MenuRightFragment();
    087. getSupportFragmentManager().beginTransaction()
    088. .replace(R.id.id_right_menu_frame, rightMenuFragment).commit();
    089. }
    090.  
    091. public void showLeftMenu(View view)
    092. {
    093. getSlidingMenu().showMenu();
    094. }
    095.  
    096. public void showRightMenu(View view)
    097. {
    098. getSlidingMenu().showSecondaryMenu();
    099. }
    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);

    还有几个监听事件:

     

    01. /**
    02. * 设置打开监听事件,当滑动菜单被打开时调用
    03. */
    04. public void setOnOpenListener(OnOpenListener listener) {
    05. mOpenListener = listener;
    06. }
    07.  
    08. /**
    09. * 设置关闭监听事件,当滑动菜单被关闭时调用
    10. */
    11. public void setOnCloseListener(OnCloseListener listener) {
    12. //mViewAbove.setOnCloseListener(listener);
    13. mCloseListener = listener;
    14. }
    15.  
    16. /**
    17. * 设置打开监听事件,当滑动菜单被打开过之后调用
    18. */
    19. public void setOnOpenedListener(OnOpenedListener listener) {
    20. mViewAbove.setOnOpenedListener(listener);
    21. }
    22.  
    23. /**
    24. * 设置关闭监听事件,当滑动菜单被关闭过之后调用
    25. */
    26. public void setOnClosedListener(OnClosedListener listener) {
    27. mViewAbove.setOnClosedListener(listener);
    28. }

    还有一些用到的时候查查把~

     

    有任何问题~欢迎留言~

    我把上面的所有例子包括slidingmenu的lib打了一个包~

    源码点击下载 http://www.it165.net/uploadfile/files/2014/0703/zhy_slidingmenu_demo.rar


这个例子也不错:
http://www.krislq.com/2013/03/android_case_slidingmenu_fragment/
slidingmenu包含slidingmenuDemo跟两个slidingmenu_lib,slidingmenu_actionbar,直接可以用。slidingmenu_lib是开源项目ActionBarSherlock-master的library类库,slidingmenu_actionbar是开源项目ActionBarSherlock-master的actionbarsherlock类库,只是重命名了,slidingmenuDemo是开源项目ActionBarSherlock-maste的Example。注意:(已修改) 1.可能报找不到getSupportActionBar等ActionBarSherLock的方法。原因是使用ActionBarSherLock的Activity需继承于SherlockActivity,修改SlidingMenu liberary(slidingmenu_lib)中的 SlidingFragmentActivity,让它继承于SherlockFragmentActivity,重新编译liberary导入。 2.项目红叉或红叹号,删除support_v4包,ActionBarSherLock(slidingmenu_actionbar)已包含此包,会冲突。也有可能是主题问题,注意appication theme是否正确,参照exsample。 3.注意把ActionBar、某些Fragment等替换成ActionBarSherLock包中的类。 SlidingMenu依赖ActionBarSherlock。可以去官网下载最新的ActionBarSherlock。在导入的时候SlidingMenu-master/library中的 SlidingActivity.java、SlidingFragmentActivity.java SlidingPreferenceActivity.java三个文件作如下修改就好了。 SlidingActivity extends Activity SlidingFragmentActivity extends FragmentActivity SlidingPreferenceActivity extends PreferenceActivity 分别替换成 SlidingActivity extends SherlockActivity SlidingFragmentActivity extends SherlockFragmentActivity SlidingPreferenceActivity extends SherlockPreferenceActivity
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值