Android SlidingMenu 使用详解 留来备用

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

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package com.zhy.zhy_slidemenu_demo;
 
import android.app.Activity;
import android.os.Bundle;
 
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
 
public class MainActivity extends Activity
{
 
     @Override
     protected void onCreate(Bundle savedInstanceState)
     {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
         // configure the SlidingMenu
         SlidingMenu menu = new SlidingMenu( this );
         menu.setMode(SlidingMenu.LEFT);
         // 设置触摸屏幕的模式
         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
         menu.setShadowWidthRes(R.dimen.shadow_width);
         menu.setShadowDrawable(R.drawable.shadow);
 
         // 设置滑动菜单视图的宽度
         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
         // 设置渐入渐出效果的值
         menu.setFadeDegree( 0 .35f);
         /**
          * SLIDING_WINDOW will include the Title/ActionBar in the content
          * section of the SlidingMenu, while SLIDING_CONTENT does not.
          */
         menu.attachToActivity( this , SlidingMenu.SLIDING_CONTENT);
         //为侧滑菜单设置布局
         menu.setMenu(R.layout.leftmenu);
 
     }
 
}

效果图:

 

\

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

2、通过把Activity继承SlidingActivity

a、继承SlidingActivity

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

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package com.zhy.zhy_slidemenu_demo02;
 
import android.os.Bundle;
 
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;
 
public class MainActivity extends SlidingActivity
{
     @Override
     public void onCreate(Bundle savedInstanceState)
     {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
 
         setBehindContentView(R.layout.leftmenu);
         // configure the SlidingMenu
         SlidingMenu menu = getSlidingMenu();
         menu.setMode(SlidingMenu.LEFT);
         // 设置触摸屏幕的模式
         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
         menu.setShadowWidthRes(R.dimen.shadow_width);
         menu.setShadowDrawable(R.drawable.shadow);
 
         // 设置滑动菜单视图的宽度
         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
         // 设置渐入渐出效果的值
         menu.setFadeDegree( 0 .35f);
         /**
          * SLIDING_WINDOW will include the Title/ActionBar in the content
          * section of the SlidingMenu, while SLIDING_CONTENT does not.
          */
         // menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
         // menu.setMenu(R.layout.leftmenu);
 
     }
 
}

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

 

3、将SlidingMenu当作普通控件

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

 

?
1
2
3
4
5
6
7
8
9
<relativelayout android:id= "@+id/id_main_ly" android:layout_height= "match_parent" android:layout_width= "match_parent" xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" >
 
     <linearlayout android:layout_height= "wrap_content" android:layout_marginleft= "30dp" android:layout_margintop= "30dp" android:layout_width= "wrap_content" >
 
 
         <com.jeremyfeinstein.slidingmenu.lib.slidingmenu android:background= "#ffffffff" android:id= "@+id/slidingmenulayout" android:layout_height= "170dp" android:layout_width= "120dp" sliding:behindoffset= "0dp" sliding:behindscrollscale= "1" sliding:fadedegree= "0.3" sliding:fadeenabled= "true" sliding:touchmodeabove= "fullscreen" sliding:viewabove= "@layout/pic" xmlns:sliding= "http://schemas.android.com/apk/res-auto" >
     </com.jeremyfeinstein.slidingmenu.lib.slidingmenu></linearlayout>
 
</relativelayout>

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

 

下面看pic布局:

 

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

就是一张妹子图片。

 

最后看主Activity:

 

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

效果图:

 

\

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

 

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

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

核心代码:

 

?
1
2
3
4
5
6
7
8
Fragment leftMenuFragment = new MenuLeftFragment();
         setBehindContentView(R.layout.left_menu_frame);
         getSupportFragmentManager().beginTransaction()
                 .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();
         SlidingMenu menu = getSlidingMenu();
         menu.setMode(SlidingMenu.LEFT_RIGHT);
         // 设置触摸屏幕的模式
         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

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

 

下面看具体例子:

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

MenuLeftFragment

 

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

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

 

MenuRightFragment

 

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

 

最后是MainActivity

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
package com.zhy.zhy_slidemenu_demo04;
 
import java.util.ArrayList;
import java.util.List;
 
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
 
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;
 
public class MainActivity extends SlidingFragmentActivity
{
 
     private ViewPager mViewPager;
     private FragmentPagerAdapter mAdapter;
     private List<fragment> mFragments = new ArrayList<fragment>();
 
     @Override
     public void onCreate(Bundle savedInstanceState)
     {
         super .onCreate(savedInstanceState);
         this .requestWindowFeature(Window.FEATURE_NO_TITLE);
         setContentView(R.layout.activity_main);
         // 初始化SlideMenu
         initRightMenu();
         // 初始化ViewPager
         initViewPager();
 
     }
 
     private void initViewPager()
     {
         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
         MainTab01 tab01 = new MainTab01();
         MainTab02 tab02 = new MainTab02();
         MainTab03 tab03 = new MainTab03();
         mFragments.add(tab01);
         mFragments.add(tab02);
         mFragments.add(tab03);
         /**
          * 初始化Adapter
          */
         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
         {
             @Override
             public int getCount()
             {
                 return mFragments.size();
             }
 
             @Override
             public Fragment getItem( int arg0)
             {
                 return mFragments.get(arg0);
             }
         };
         mViewPager.setAdapter(mAdapter);
     }
 
     private void initRightMenu()
     {
         
         Fragment leftMenuFragment = new MenuLeftFragment();
         setBehindContentView(R.layout.left_menu_frame);
         getSupportFragmentManager().beginTransaction()
                 .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();
         SlidingMenu menu = getSlidingMenu();
         menu.setMode(SlidingMenu.LEFT_RIGHT);
         // 设置触摸屏幕的模式
         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
         menu.setShadowWidthRes(R.dimen.shadow_width);
         menu.setShadowDrawable(R.drawable.shadow);
         // 设置滑动菜单视图的宽度
         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
         // 设置渐入渐出效果的值
         menu.setFadeDegree( 0 .35f);
         // menu.setBehindScrollScale(1.0f);
         menu.setSecondaryShadowDrawable(R.drawable.shadow);
         //设置右边(二级)侧滑菜单
         menu.setSecondaryMenu(R.layout.right_menu_frame);
         Fragment rightMenuFragment = new MenuRightFragment();
         getSupportFragmentManager().beginTransaction()
                 .replace(R.id.id_right_menu_frame, rightMenuFragment).commit();
     }
 
     public void showLeftMenu(View view)
     {
         getSlidingMenu().showMenu();
     }
 
     public void showRightMenu(View view)
     {
         getSlidingMenu().showSecondaryMenu();
     }
}
</fragment></fragment>

简单说明一下,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
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
      * 设置打开监听事件,当滑动菜单被打开时调用
      */
     public void setOnOpenListener(OnOpenListener listener) {
         mOpenListener = listener;
     }
 
     /**
      * 设置关闭监听事件,当滑动菜单被关闭时调用
      */
     public void setOnCloseListener(OnCloseListener listener) {
         //mViewAbove.setOnCloseListener(listener);
         mCloseListener = listener;
     }
 
     /**
      * 设置打开监听事件,当滑动菜单被打开过之后调用
      */
     public void setOnOpenedListener(OnOpenedListener listener) {
         mViewAbove.setOnOpenedListener(listener);
     }
 
     /**
      * 设置关闭监听事件,当滑动菜单被关闭过之后调用
      */
     public void setOnClosedListener(OnClosedListener listener) {
         mViewAbove.setOnClosedListener(listener);
     }

还有一些用到的时候查查把~
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、付费专栏及课程。

余额充值