安卓开发笔记——关于开源项目SlidingMenu的使用介绍（仿QQ5.0侧滑菜单）
记得去年年末的时候写过这个侧滑效果，当时是利用自定义HorizontalScrollView来实现的，效果如下：
有兴趣的朋友可以看看这篇文件《安卓开发笔记——自定义HorizontalScrollView控件（实现QQ5.0侧滑效果）》
今天换一种实现方式，来说下GitHub上非常优秀的开源项目SlidingMenu的使用，它是一种比较新的界面效果，在主界面左滑或右滑出现设置界面效果，能方便的进行各种操作。市面上很多优秀的APP都采用了这种界面方案，像facebook、人人网、everynote、Google+等。
再来看看今天要实现的效果图:
直接进入主题吧，先来说下准备工作：
1、既然是要使用这个开源项目，那首先当然是要下载它了，这是SlidingMenu的下载地址：https://github.com/jfeinstein10/SlidingMenu
在这个项目介绍中，我们可以发现这样的两句话，首先SlidingMenu它只是作为一个库文件引入，再来它需要依赖ActionBarSherlock，所以这里我们还需要另外去下载它，安卓4.0以上可以忽略，但在我们实际开发中，最低版本一般还是要求2.2或者2.3以上，这也是为了向下兼容ActionBar。这是ActionBarSherlock的下载地址：https://github.com/JakeWharton/ActionBarSherlock
2、既然下载好了所需要的文件，那么就将其导入项目吧，在这里只需要导入2个文件夹
（1）SlidingMenu里的library （2）ActionBarSherlock里的actionbarsherlock
引用这2个库文件：（注意点：不管是导入库还是自己建的项目，android-support-v4.jar的版本一定要一致，最好复制一份，集体覆盖一遍）
接着就可以开始进入开发工作了，这里的SlidingMenu你可以仅仅只作为一个View进入，直接将它的实现写在Activity。为了不使Activity那么的冗余，我这里借助Fragment来实现，这也更接近我们日常的开发环境，把Activity当做容器，上面装载着两个Fragment，一个是侧滑菜单SlideMenu，一个是主界面内容。
先来看下XML布局文件：
1、主Activity界面，里面装了一个FrameLayout布局，便于一会需要主界面布局和菜单布局来覆盖替换它。
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent"> 5 6 <FrameLayout 7 android:id="@+id/fl_main" 8 android:layout_width="fill_parent" 9 android:layout_height="fill_parent" 10 ></FrameLayout> 11 12 </RelativeLayout>
2、侧滑菜单布局
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:id="@+id/leftmenu" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:background="@drawable/img_frame_background" 7 > 8 9 <LinearLayout 10 android:layout_width="match_parent" 11 android:layout_height="match_parent" 12 android:orientation="vertical" > 13 14 <RelativeLayout 15 android:layout_width="match_parent" 16 android:layout_height="wrap_content" 17 android:layout_centerInParent="true" > 18 19 <ImageView 20 android:id="@+id/menuimage1" 21 android:layout_width="50dp" 22 android:layout_height="50dp" 23 android:layout_centerVertical="true" 24 android:layout_marginLeft="20dp" 25 android:layout_marginTop="20dp" 26 android:src="@drawable/img_1" /> 27 28 <TextView 29 android:id="@+id/menutext1" 30 android:layout_width="wrap_content" 31 android:layout_height="wrap_content" 32 android:layout_centerVertical="true" 33 android:layout_marginLeft="20dp" 34 android:layout_marginTop="20dp" 35 android:layout_toRightOf="@id/menuimage1" 36 android:text="菜单一" 37 android:textColor="@android:color/white" 38 android:textSize="20dp" /> 39 </RelativeLayout> 40 41 42 <RelativeLayout 43 android:layout_width="match_parent" 44 android:layout_height="wrap_content" 45 android:layout_centerInParent="true" > 46 47 <ImageView 48 android:id="@+id/menuimage2" 49 android:layout_width="50dp" 50 android:layout_height="50dp" 51 android:layout_centerVertical="true" 52 android:layout_marginLeft="20dp" 53 android:layout_marginTop="20dp" 54 android:src="@drawable/img_2" /> 55 56 <TextView 57 android:id="@+id/menutext2" 58 android:layout_width="wrap_content" 59 android:layout_height="wrap_content" 60 android:layout_centerVertical="true" 61 android:layout_marginLeft="20dp" 62 android:layout_marginTop="20dp" 63 android:layout_toRightOf="@id/menuimage2" 64 android:text="菜单二" 65 android:textColor="@android:color/white" 66 android:textSize="20dp" /> 67 </RelativeLayout> 68 69 <RelativeLayout 70 android:layout_width="match_parent" 71 android:layout_height="wrap_content" 72 android:layout_centerInParent="true" > 73 74 <ImageView 75 android:id="@+id/menuimage3" 76 android:layout_width="50dp" 77 android:layout_height="50dp" 78 android:layout_centerVertical="true" 79 android:layout_marginLeft="20dp" 80 android:layout_marginTop="20dp" 81 android:src="@drawable/img_3" /> 82 83 <TextView 84 android:id="@+id/menutext3" 85 android:layout_width="wrap_content" 86 android:layout_height="wrap_content" 87 android:layout_centerVertical="true" 88 android:layout_marginLeft="20dp" 89 android:layout_marginTop="20dp" 90 android:layout_toRightOf="@id/menuimage3" 91 android:text="菜单三" 92 android:textColor="@android:color/white" 93 android:textSize="20dp" /> 94 </RelativeLayout> 95 96 97 <RelativeLayout 98 android:layout_width="match_parent" 99 android:layout_height="wrap_content" 100 android:layout_centerInParent="true" > 101 102 <ImageView 103 android:id="@+id/menuimage4" 104 android:layout_width="50dp" 105 android:layout_height="50dp" 106 android:layout_centerVertical="true" 107 android:layout_marginLeft="20dp" 108 android:layout_marginTop="20dp" 109 android:src="@drawable/img_4" /> 110 111 <TextView 112 android:id="@+id/menutext4" 113 android:layout_width="wrap_content" 114 android:layout_height="wrap_content" 115 android:layout_centerVertical="true" 116 android:layout_marginLeft="20dp" 117 android:layout_marginTop="20dp" 118 android:layout_toRightOf="@id/menuimage4" 119 android:text="菜单四" 120 android:textColor="@android:color/white" 121 android:textSize="20dp" /> 122 </RelativeLayout> 123 124 125 <RelativeLayout 126 android:layout_width="match_parent" 127 android:layout_height="wrap_content" 128 android:layout_centerInParent="true" > 129 130 <ImageView 131 android:id="@+id/menuimage5" 132 android:layout_width="50dp" 133 android:layout_height="50dp" 134 android:layout_centerVertical="true" 135 android:layout_marginLeft="20dp" 136 android:layout_marginTop="20dp" 137 android:src="@drawable/img_5" /> 138 139 <TextView 140 android:id="@+id/menutext5" 141 android:layout_width="wrap_content" 142 android:layout_height="wrap_content" 143 android:layout_centerVertical="true" 144 android:layout_marginLeft="20dp" 145 android:layout_marginTop="20dp" 146 android:layout_toRightOf="@id/menuimage5" 147 android:text="菜单五" 148 android:textColor="@android:color/white" 149 android:textSize="20dp" /> 150 </RelativeLayout> 151 </LinearLayout> 152 153 </RelativeLayout>
3、主界面布局，只为演示Demo用，这里只存放了一张背景图
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:background="@drawable/qq" > 6 7 8 9 </RelativeLayout>
然后我们需要两个Fragment，一个主界面，一个侧滑菜单
1、主界面
1 package com.rabbit.slidemenu.ui; 2 3 import android.os.Bundle; 4 import android.support.annotation.Nullable; 5 import android.support.v4.app.Fragment; 6 import android.view.LayoutInflater; 7 import android.view.View; 8 import android.view.ViewGroup; 9 10 import com.example.slidemenutest.R; 11 12 public class MainFragment extends Fragment { 13 14 @Override 15 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 16 return inflater.inflate(R.layout.main, container, false); 17 } 18 19 20 21 }
2、侧滑菜单
1 package com.rabbit.slidemenu.ui; 2 3 import android.os.Bundle; 4 import android.support.annotation.Nullable; 5 import android.support.v4.app.Fragment; 6 import android.view.LayoutInflater; 7 import android.view.View; 8 import android.view.ViewGroup; 9 10 import com.example.slidemenutest.R; 11 12 public class MenuFragment extends Fragment { 13 14 @Override 15 public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { 16 return inflater.inflate(R.layout.leftmenu, container, false); 17 18 } 19 20 21 }
3、主Activity（重点），代码非常简单，大家看注释就可以了。
1 package com.rabbit.slidemenu.ui; 2 import android.os.Bundle; 3 import android.support.v4.app.FragmentActivity; 4 import android.view.KeyEvent; 5 6 import com.example.slidemenutest.R; 7 import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; 8 9 10 public class MainActivity extends FragmentActivity { 11 //声明Slidemenu对象 12 private SlidingMenu slidingMenu; 13 14 @Override 15 protected void onCreate(Bundle savedInstanceState) { 16 super.onCreate(savedInstanceState); 17 setContentView(R.layout.activity_main); 18 19 20 //替换主界面内容 21 getSupportFragmentManager().beginTransaction().replace(R.id.fl_main, new MainFragment()).commit(); 22 23 //实例化菜单控件 24 slidingMenu=new SlidingMenu(this); 25 //设置相关属性 26 slidingMenu.setMode(SlidingMenu.LEFT);//菜单靠左 27 slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//全屏支持触摸拖拉 28 slidingMenu.setBehindOffset(200);//设置菜单大小 29 slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//不包含ActionBar 30 slidingMenu.setMenu(R.layout.leftmenu); 31 //替换掉菜单内容 32 getSupportFragmentManager().beginTransaction().replace(R.id.leftmenu, new MenuFragment()).commit(); 33 34 } 35 36 @Override 37 public boolean onKeyDown(int keyCode, KeyEvent event) { 38 //重写了Menu监听，实现按下手机Menu键弹出和关闭侧滑菜单 39 if(keyCode==KeyEvent.KEYCODE_MENU){ 40 slidingMenu.toggle(); 41 } 42 43 return super.onKeyDown(keyCode, event); 44 } 45 46 }
再来看下关于SlidingMenu 的一些介绍和API：
1、得到侧滑菜单
SlidingMenu sm = getSlidingMenu();
2、设置侧滑菜单是从左边出来还是从右边出来
sm.setMode(SlidingMenu.LEFT);
3、设置滑动菜单出来之后，内容页 , 显示的剩余宽度
sm.setBehindWidthRes(R.dimen.slidingmenu_offset);
4、设置滑动菜单的阴影, 设置阴影，阴影需要开始的时候，特别暗，慢慢的变淡
sm.setShadowDrawble(R.drawable.shadow);
5、设置阴影的宽度
sm.setShadowWidth(R.dimen.shadow_width);
6、设置滑动菜单的范围
//第一个参数SlidingMenu.TOUCHMODE_FULLSCREEN 可以全屏滑动
// 第二个参数SlidingMenu.TOUCHMODE_MARGIN 只能在边沿滑动
//三 个参数SlidingMenu.TOUCHMODE_NONE 不能滑动
sm.setTouchModeAbove( SlidingMenu.TOUCHMODE_FULLSCREEN );
7、设置SldingMenu自动判断当前是打开还是关闭
sm.toggle();
其他一些这里就不一一列出了，具体大家看官网https://github.com/jfeinstein10/slidingmenu吧，所有东西都在上面了。
最后还有个需要注意的地方，GitHub上面的介绍也指出了：
NOTE : you cannot use both behindOffset and behindWidth. You will get an exception if you try.
不要同时设置behindOffset和behindWidth，否则会导致异常。
作者：Balla_兔子
出处：http://www.cnblogs.com/lichenwei/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
正在看本人博客的这位童鞋，我看你气度不凡，谈吐间隐隐有王者之气，日后必有一番作为！旁边有“推荐”二字，你就顺手把它点了吧，相得准，我分文不收；相不准，你也好回来找我！
