码迷，mamicode.com
首页 > 其他好文 > 详细

SlidingMenu 侧滑菜单的用法

时间：2016-06-15 15:59:32      阅读：241      评论：0      收藏：0      [点我收藏+]

标签：

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

1、在Activity中通过SlidingMenu构造方法，直接设置侧滑菜单
  1. package com.zhy.zhy_slidemenu_demo;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5.   
  6. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
  7.   
  8. public class MainActivity extends Activity  
  9. {  
  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对象，然后设置样式

  1. package com.zhy.zhy_slidemenu_demo02;  
  2.   
  3. import android.os.Bundle;  
  4.   
  5. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
  6. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;  
  7.   
  8. public class MainActivity extends SlidingActivity  
  9. {  
  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，然后在布局中声明，丧心病狂的玩~下面看个例子：

  1. <RelativeLayout xmlns: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" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_marginLeft="30dp"  
  11.         android:layout_marginTop="30dp" >  
  12.   
  13.   
  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>  
  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:

  1. package com.zhy.zhy_slidemenu_demo03;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.View;  
  6. import android.view.View.OnClickListener;  
  7.   
  8. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
  9.   
  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

  1. package com.zhy.zhy_slidemenu_demo04;  
  2.   
  3. import java.util.Arrays;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.view.LayoutInflater;  
  9. 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

  1. package com.zhy.zhy_slidemenu_demo04;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. 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

  1. package com.zhy.zhy_slidemenu_demo04;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentPagerAdapter;  
  9. import android.support.v4.view.ViewPager;  
  10. import android.view.View;  
  11. import android.view.Window;  
  12.   
  13. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
  14. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;  
  15.   
  16. public class MainActivity extends SlidingFragmentActivity  
  17. {  
  18.   
  19.     private ViewPager mViewPager;  
  20.     private FragmentPagerAdapter mAdapter;  
  21.     private List<Fragment> mFragments = new ArrayList<Fragment>();  
  22.   
  23.     @Override  
  24.     public void onCreate(Bundle savedInstanceState)  
  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();  
  33.   
  34.     }  
  35.   
  36.     private void initViewPager()  
  37.     {  
  38.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  39.         MainTab01 tab01 = new MainTab01();  
  40.         MainTab02 tab02 = new MainTab02();  
  41.         MainTab03 tab03 = new MainTab03();  
  42.         mFragments.add(tab01);  
  43.         mFragments.add(tab02);  
  44.         mFragments.add(tab03);  
  45.         /** 
  46.          * 初始化Adapter 
  47.          */  
  48.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
  49.         {  
  50.             @Override  
  51.             public int getCount()  
  52.             {  
  53.                 return mFragments.size();  
  54.             }  
  55.   
  56.             @Override  
  57.             public Fragment getItem(int arg0)  
  58.             {  
  59.                 return mFragments.get(arg0);  
  60.             }  
  61.         };  
  62.         mViewPager.setAdapter(mAdapter);  
  63.     }  
  64.   
  65.     private void initRightMenu()  
  66.     {  
  67.           
  68.         Fragment leftMenuFragment = new MenuLeftFragment();  
  69.         setBehindContentView(R.layout.left_menu_frame);  
  70.         getSupportFragmentManager().beginTransaction()  
  71.                 .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();  
  72.         SlidingMenu menu = 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.         Fragment rightMenuFragment = new MenuRightFragment();  
  87.         getSupportFragmentManager().beginTransaction()  
  88.                 .replace(R.id.id_right_menu_frame, rightMenuFragment).commit();  
  89.     }  
  90.   
  91.     public void showLeftMenu(View view)  
  92.     {  
  93.         getSlidingMenu().showMenu();  
  94.     }  
  95.   
  96.     public void showRightMenu(View view)  
  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);

还有几个监听事件：

      1. /** 
      2.      * 设置打开监听事件，当滑动菜单被打开时调用 
      3.      */  
      4.     public void setOnOpenListener(OnOpenListener listener) {  
      5.         mOpenListener = listener;  
      6.     }  
      7.   
      8.     /** 
      9.      * 设置关闭监听事件，当滑动菜单被关闭时调用 
      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.     } 
    1. 转载自：http://blog.csdn.net/lmj623565791/article/details/36677279

SlidingMenu 侧滑菜单的用法

标签：

原文地址：http://www.cnblogs.com/youshashuosha/p/5587531.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！