侧滑菜单-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的三个小例子