侧滑菜单-SlidingMenu的使用

一、SlidingMenu下载地址

1. SlidingMenu.jar下载地址，直接点击
2. SlidingMenu库项目下载地址，直接点击

---

二、SlidingMenu整合到Android项目中的方法

1.直接将SlidingMenu.jar包放在项目的libs目录下。
2.将github上项目的示例代码下载下来（库名称叫做library），导入到eclipse当中，这里分为两种方式：
- -2.1 将资源项目作为library设置到我们的项目中。在android项目上右键，Properties->Android->Add，选择library，点击OK，这样library就作为android项目的库项目存在了。

- -2.2 将library项目里面的代码，直接拷贝到我们的目标项目里面。这样会增加工程的安装包的体积，但是，对于项目的管理来说，更加的方便。
如图，

---

三、SlidingMenu的常用属性

menu.setMode(SlidingMenu.LEFT);//设置左滑菜单
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的屏幕范围，该设置为全屏区域都可以滑动
menu.setShadowDrawable(R.drawable.shadow);//设置阴影图片
menu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
menu.setBehindWidth(400);//设置SlidingMenu菜单的宽度
menu.setFadeDegree(0.35f);//SlidingMenu滑动时的渐变程度
menu.attachToActivity(this,
SlidingMenu.SLIDING_CONTENT);//使SlidingMenu附加在Activity上
menu.setMenu(R.layout.menu_layout);//设置menu的布局文件
menu.toggle();//动态判断自动关闭或开启SlidingMenu menu.showMenu();//显示SlidingMenu
menu.showContent();//显示内容
menu.setOnOpenListener(onOpenListener);//监听slidingmenu打开
menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭时事件
menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭后事件
左右都可以划出SlidingMenu菜单只需要设置
menu.setMode(SlidingMenu.LEFT_RIGHT);属性，然后设置右侧菜单的布局文件
menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右侧菜单的阴影图片

---

四、SlidingMenu的三种使用方式

1. 在Activity中通过new SlidingMenu(this)，得到SlidingMenu对象

MainActivity.java

package com.katherine.slidingmenu_use;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;/** * 在Activity中通过SlidingMenu构造方法，直接设置侧滑菜单 * @author Administrator * */public class MainActivity extends Activity {    private SlidingMenu slidingMenu;    private int screenWidth;//屏幕宽度    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        setTitle( "在Activity中通过SlidingMenu构造方法，直接设置侧滑菜单") ;        screenWidth = this.getWindowManager().getDefaultDisplay().getWidth() ;        initSlidingMenu() ;     }    /**     * 初始化侧滑菜单     */    private void initSlidingMenu() {        slidingMenu = new SlidingMenu(this);///这里是重点，表示用构造方法设置侧滑菜单        slidingMenu.setMode(SlidingMenu.LEFT_RIGHT) ;//LEFT左侧滑菜单，RIGHT右侧滑菜单，LEFT_RIGHT左右侧滑菜单都有        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);  //设置侧滑菜单滑出的方式，TOUCHMODE_MARGIN是手指必须从屏幕边上开始识别手势，TOUCHMODE_FULLSCREEN是屏幕的任何地方都可以识别手势        slidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  //设置侧滑菜单被遮挡的宽度，需要在res->values->dimens.xml中设置此项，如     <dimen name="slidingmenu_offset">10dp</dimen>        slidingMenu.setBehindOffset(screenWidth/4*1) ;//设置侧滑菜单被遮挡的宽度，这里侧滑菜单显示了屏幕的3/4，遮挡部分占1/4        //setBehindOffsetRes和setBehindOffset二者任选其一，若两者同时使用，后者将覆盖前者        slidingMenu.setBehindWidth(screenWidth/4*3) ;//设置侧滑菜单的宽度，占屏幕的3/4        //setBehindWidth和setBehindOffset(或setBehindOffsetRes)前者是设置侧滑菜单的宽度、后者设置被遮挡的宽度，后者会覆盖前者        //也就是说，设置侧滑菜单的宽度时，用setBehindOffsetRes、setBehindOffset、setBehindWidth三者之一就行        slidingMenu.setShadowDrawable(R.drawable.shadow) ;//设置侧滑菜单的阴影图片，可是是图片，也可以是res->drawable文件夹下的xml文件，这里是后者        slidingMenu.setShadowWidthRes(R.dimen.slidingmenu_offset) ;//设置侧滑菜单的阴影的宽度，需要在res->values->dimens.xml中设置此项，如     <dimen name="slidingmenu_offset">10dp</dimen>        slidingMenu.setShadowWidth(screenWidth/4*3) ;//设置侧滑菜单的阴影的宽度，上面设置的被遮挡的部分占了屏幕的1/4，这里把宽度设置成屏幕宽度的3/4比较好        //setShadowDrawable和setShadowWidth(或setShadowWidthRes)需要同时使用才有效，单独设置其中一个无效        //setShadowWidth和setShadowWidthRes二者任选其一，若两者同时使用，后者将覆盖前者        slidingMenu.setFadeDegree(0.35f) ;//侧滑菜单显示时的渐变程度，淡入淡出的效果        slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);  //使侧滑菜单附加在Activity上，SLIDING_CONTENT侧滑菜单显示时与activity一样带标题栏；SLIDING_WINDOW显示为全屏，没有标题栏        slidingMenu.setMenu(R.layout.slidingmenu_left);  //左(右)侧滑菜单的布局文件，若只是左侧滑或右侧滑，只需要使用setMenu，若是同时使用的需要下面两个方法        slidingMenu.setSecondaryShadowDrawable(R.drawable.shadow) ;//右侧滑菜单的阴影图片        slidingMenu.setSecondaryMenu(R.layout.slidingmenu_right) ;//右侧滑菜单的布局文件        //若只是左侧滑或右侧滑，只需要使用setMenu，若是同时使用的需要方法setSecondaryShadowDrawable和setSecondaryMenu    }}

上面用到的res->drawable文件夹下的shadow.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <gradient        android:centerColor="#1100ff00"        android:endColor="#220000ff"        android:startColor="#00000000" /></shape>

res->layout文件夹下的slidingmenu_left.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="50dp"        android:layout_marginTop="50dp"        android:padding="10dp"        android:text="设置" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="50dp"        android:layout_marginTop="20dp"        android:padding="10dp"        android:text="消息" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginLeft="50dp"        android:layout_marginTop="20dp"        android:padding="10dp"        android:text="建议" /></LinearLayout>

res->values文件夹下的dimens.xml

<resources>    <!-- Default screen margins, per the Android Design guidelines. -->    <dimen name="activity_horizontal_margin">16dp</dimen>    <dimen name="activity_vertical_margin">16dp</dimen>    <dimen name="slidingmenu_offset">10dp</dimen></resources>

res->layout文件夹下的slidingmenu_right.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="right"    android:orientation="vertical" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="50dp"        android:layout_marginTop="50dp"        android:padding="10dp"        android:text="听歌" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="50dp"        android:layout_marginTop="20dp"        android:padding="10dp"        android:text="读书" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="50dp"        android:layout_marginTop="20dp"        android:padding="10dp"        android:text="热门" /></LinearLayout>

2. 继承SlideActivity，通过getSlidingMenu()得到对象

MainActivity.java，其中用到的其他布局文件等都和上面一样。

package com.katherine.slidingmenu_use;import android.content.Intent;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;import com.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;public class MainActivityextends SlidingActivity{    private SlidingMenu slidingMenu;    private int screenWidth;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState) ;        setTitle("通过Activity继承SlidingActivity") ;        setContentView(R.layout.activity_slidingactivity_demo) ;        setBehindContentView(R.layout.slidingmenu_left) ;//这里貌似不能设置slideStyle，就是带不带标题栏        screenWidth = this.getWindowManager().getDefaultDisplay().getWidth() ;        initSlidingMenu();    }    /**     * 初始化侧滑菜单     */    private void initSlidingMenu() {        slidingMenu = getSlidingMenu() ;        slidingMenu.setMode(SlidingMenu.LEFT_RIGHT) ;//LEFT左侧滑菜单，RIGHT右侧滑菜单，LEFT_RIGHT左右侧滑菜单都有        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);  //设置侧滑菜单滑出的方式，TOUCHMODE_MARGIN是手指必须从屏幕边上开始识别手势，TOUCHMODE_FULLSCREEN是屏幕的任何地方都可以识别手势        slidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  //设置侧滑菜单被遮挡的宽度，需要在res->values->dimens.xml中设置此项，如     <dimen name="slidingmenu_offset">10dp</dimen>        slidingMenu.setBehindOffset(screenWidth/4*1) ;//设置侧滑菜单被遮挡的宽度，这里侧滑菜单显示了屏幕的3/4，遮挡部分占1/4        //setBehindOffsetRes和setBehindOffset二者任选其一，若两者同时使用，后者将覆盖前者        slidingMenu.setBehindWidth(screenWidth/4*3) ;//设置侧滑菜单的宽度，占屏幕的3/4        //setBehindWidth和setBehindOffset(或setBehindOffsetRes)前者是设置侧滑菜单的宽度、后者设置被遮挡的宽度，后者会覆盖前者        //也就是说，设置侧滑菜单的宽度时，用setBehindOffsetRes、setBehindOffset、setBehindWidth三者之一就行        slidingMenu.setShadowDrawable(R.drawable.main) ;//设置侧滑菜单的阴影图片，可是是图片，也可以是res->drawable文件夹下的xml文件，这里是后者        slidingMenu.setShadowWidthRes(R.dimen.slidingmenu_offset) ;//设置侧滑菜单的阴影的宽度，需要在res->values->dimens.xml中设置此项，如     <dimen name="slidingmenu_offset">10dp</dimen>        slidingMenu.setShadowWidth(screenWidth/4*3) ;//设置侧滑菜单的阴影的宽度，上面设置的被遮挡的部分占了屏幕的1/4，这里把宽度设置成屏幕宽度的3/4比较好        //setShadowDrawable和setShadowWidth(或setShadowWidthRes)需要同时使用才有效，单独设置其中一个无效        //setShadowWidth和setShadowWidthRes二者任选其一，若两者同时使用，后者将覆盖前者        slidingMenu.setFadeDegree(0.35f) ;//侧滑菜单显示时的渐变程度，淡入淡出的效果        slidingMenu.setMenu(R.layout.slidingmenu_left);  //左(右)侧滑菜单的布局文件，若只是左侧滑或右侧滑，只需要使用setMenu，若是同时使用的需要下面两个方法        //这里其实是和上面的setBehindContentView(R.layout.slidingmenu_left) ;冲突的，可以用setBehindContentView直接设置左面的侧滑菜单。如果两个方法都用了，setMenu会覆盖setBehindContentView。        slidingMenu.setSecondaryShadowDrawable(R.drawable.shadow) ;//右侧滑菜单的阴影图片        slidingMenu.setSecondaryMenu(R.layout.slidingmenu_right) ;//右侧滑菜单的布局文件        //若只是左侧滑或右侧滑，只需要使用setMenu，若是同时使用的需要方法setSecondaryShadowDrawable和setSecondaryMenu    }}

3. 把SlidingMenu作为普通的view，然后在布局中声明

MainActivity.java

package com.katherine.slidingmenu_use;import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;import android.app.Activity;import android.os.Bundle;/** * 将SlidingMenu当作普通控件 * @author Administrator * */public class MainActivity extends Activity{    private SlidingMenu slidingMenu;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setTitle( "将SlidingMenu当作普通控件") ;        setContentView(R.layout.activity_main) ;        slidingMenu = (SlidingMenu) findViewById(R.id.slidingmenu_layout);        slidingMenu.setMode(SlidingMenu.LEFT_RIGHT) ;        slidingMenu.setMenu(R.layout.slidingmenu_left) ;        slidingMenu.setSecondaryMenu(R.layout.slidingmenu_right) ;    }}

上面用到的布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res/com.katherine.slidingmenu_use"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/shadow"    android:gravity="center"    android:orientation="vertical" >    <Button        android:id="@+id/btn_next"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@null"        android:text="这是第三页，就不让你点" />    <com.jeremyfeinstein.slidingmenu.lib.SlidingMenu        xmlns:sliding="http://schemas.android.com/apk/res-auto"        android:id="@+id/slidingmenu_layout"        android:layout_width="match_parent"        android:layout_height="140dp"        android:background="#ffffffff"        android:padding="10dp"        app:behindOffset="250dp"        app:behindScrollScale="1"        app:fadeDegree="0.35"        app:fadeEnabled="true"        app:touchModeAbove="fullscreen"        app:viewAbove="@layout/pic" /></LinearLayout>

res->pic.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#44ffff00"    android:gravity="center"    android:orientation="vertical" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="我是slidemenu的主页面" /></LinearLayout>

---

这是我在别处看到的属性以及属性类型，相关属性配置和代码是一样的，只是换成了布局中设定相关属性而已。

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu      xmlns:sliding="http://schemas.android.com/apk/res-auto"      android:id="@+id/slidingmenulayout"      android:layout_width="fill_parent"      android:layout_height="fill_parent"      sliding:viewAbove="@layout/YOUR_ABOVE_VIEW"      sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND"      sliding:touchModeAbove="margin|fullscreen"      sliding:behindOffset="@dimen/YOUR_OFFSET"      sliding:behindWidth="@dimen/YOUR_WIDTH"      sliding:behindScrollScale="@dimen/YOUR_SCALE"      sliding:shadowDrawable="@drawable/YOUR_SHADOW"      sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH"      sliding:fadeEnabled="true|false"      sliding:fadeDegree="float"      sliding:selectorEnabled="true|false"      sliding:selectorDrawable="@drawable/YOUR_SELECTOR"/> 

---

五、 SlidingMenu的动画设置

立方体旋转

        slidingMenu.setBehindCanvasTransformer(new CanvasTransformer() {            @Override            public void transformCanvas(Canvas canvas, float percentOpen) {                canvas.translate(0, canvas.getHeight()*(1-interp.getInterpolation(percentOpen)));            }            private Interpolator interp = new Interpolator() {                @Override                public float getInterpolation(float t) {                    t -= 1.0f;                    return t * t * t + 1.0f;                }            };        }) ;

缩放动画

        slidingMenu.setBehindCanvasTransformer(new CanvasTransformer() {            @Override            public void transformCanvas(Canvas canvas, float percentOpen) {                canvas.scale(percentOpen, 1, 0, 0) ;            }        }) ;

从下往上弹出，从上往下弹入动画

        slidingMenu.setBehindCanvasTransformer(new CanvasTransformer() {            @Override            public void transformCanvas(Canvas canvas, float percentOpen) {                 float scale = (float) (percentOpen*0.25 + 0.75);            }        }) ;

---

六、 项目运行时会遇到的error

1.我在直接用slidingmenu.jar的时候，总是报Caused by: java.lang.IllegalStateException: SlidingMenu mode must be LEFT, RIGHT,or LEFT_RIGHT错误。原因是我创建Android项目时用的ADT是22.6.x后的版本（22.3.x前的版本不会有）。若创建项目时Minimum Required SDK 小于 Compile With 时，就需要考虑版本兼容问题，创建出项目后会自动引入appcompat_v7这个类库（若二者版本一致则不会引入此类库）。解决方法：我重新创建了一个项目，将两个的版本号都设成了4.0，然后就可以运行啦~~但是感觉这种方法不治本。具体原因找到之后再更新这里吧~

2.使用库项目时，报Jar mismatch! Fix your dependencies。原因是库项目中的android-support-v4.jar和android项目中的android-support-v4.jar版本不一致。解决方法是删除其中的一个，把另一个拷贝过来，是两个版本一样就行。

下面是摘抄别人的：
1. 在github上有一个效果不错的开源库，SlidingMenu 最新的代码下载下来后，ExampleListActivity项目会报错：No resource found that matches the given name: attr ‘homeAsUpIndicator’. No resource found that matches the given name ‘Theme.Sherlock.Light.DarkActionBar’.原因是它本身又引用了另外一个开源库 ActionBarSherlock ，所以首先要做的就是去下载 ActionBarSherlock，引用其中的library。
引入Library后，在项目属性页面中，Android选项设置下，在Libarary设置中，增加ActionBarSherlock的路径。
2. 这样，SlidingMenu 的示例代码就引用了两个library，这时候还不能用，项目报错： Jar mismatch! Fix your dependencies 解决此问题的方法见 http://blog.csdn.net/java_crab/article/details/8477416 ，
其实就是需要两个library使用的support包是一样的，修改引用包android-support-v4.jar为统一版本即可。
3. 解决了上面的问题之后，还会出现下面的问题： 可能报找不到getSupportActionBar等ActionBarSherLock的方法。
原因是使用ActionBarSherLock的Activity需继承于SherlockActivity，修改SlidingMenu library中的SlidingFragmentActivity，让它继承于SherlockFragmentActivity，重新编译library导入。
经过以上三个步骤之后，就可以成功的编译通过SlidingMenu提供的示例代码！

---

七、 相关链接

侧滑菜单的各个方法详解
slidingmenu使用详解
Android开源项目SlidingMenu深入剖析

---

八、项目下载链接

点击这里哟~~~SlidingMenu的三个小例子