侧滑菜单-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项目里面的代码,直接拷贝到我们的目标项目里面。这样会增加工程的安装包的体积,但是,对于项目的管理来说,更加的方便。
如图,库项目中需要粘贴到android项目中的东西


三、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的三个小例子

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值