使用slidingMenu实现简单的侧滑栏

首先要感谢各位国内外大神无私奉献的精神

最近APP需要做一个侧滑栏，查阅了一些资料后发现使用SlidingMenuS实现比较简单，这里做下笔记，方便以后有需要方便使用。

（1）准备资源项目：
首先去https://github.com/jfeinstein10/SlidingMenu（SlidingMenu在GitHub的下载地址）下载资源项目。然后去
https://github.com/JakeWharton/ActionBarSherlock下载ActionBarSherlock资源项目，这里解释一下，因为 SlidingMenu依附于另一个开源项目ActionBarSherlock，所以需要将ActionBarSherlock也下载下来。下载页面如下图：

下载好后分别将这2个项目导入到eclipse中：

方法： File->Import->Existing Android Code Into Workspace->Select root directory


在Browse这里选择你存放这2个项目的地方后finish

（2）将SlidingMenu整合到自己的项目:
将这2个资源项目整合到自己的新建或已建好的项目中，在这之前要特别注意一点：上面那2个资源文件的存储路径要和自己的项目在同一存储路径，且路径不要有中文。这里我可能说的不太清楚，就比如你自己的项目在D->stor下，这2个资源文件你也要放在这个 目录下。

方法就是右键自己的项目，选择Properties->Android->Add->然后选择你要添加的作为library的资源文件

在这里选择这2个资源文件

导入成功后应该是酱紫的：

导入后在你新建类继承SlidingFragmentActivity类可能出现The hierarchy of the type MainActivity is inconsistent错误，这里最大的可能就是因为v4包不一致，你就直接把SlidingMenu和ActionBarSherlock下的libs下的v4包换成你自己项目的v4包就可以了。

如果还有其他问题，可以参考这篇文章：
http://my.oschina.net/totemzl/blog/225266

接下来就是使用了
我这里使用Fragment作为侧滑菜单的布局容器。所以要继承SlidingFragmentActivity

源码在下面，这里就先大概说一下：
首先这是我主界面的xml布局，名字为right，没什么好说的，就一个图片加一个TextView

<?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="center"
    android:id="@+id/llright"
    android:orientation="vertical" >

    <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/ic_launcher"/>

    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textSize="20sp"
        android:layout_marginTop="30dp"
        android:layout_gravity="center"
        android:text="这是右边的Fragment"/>

</LinearLayout>

接下来是侧边栏的布局，名字为left，一张图片加上一个listview

<?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="@drawable/ll"
    android:orientation="vertical" >

    <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/tiantiansifangmao"/>

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>

如果使用fragment，可以将侧边栏设置为一个fragment，名字为LeftList，代码如下：

package com.cmmr.guligu;

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 LeftList extends Fragment {
    private View mView;
    private ListView listView;
    private List<String> mList = 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, container, false);
        listView = (ListView) mView
                .findViewById(R.id.listView1);
        mAdapter = new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_list_item_1, mList);
        listView.setAdapter(mAdapter);
    }
}

MAinActivity：

package com.cmmr.guligu;

import android.graphics.Canvas;
import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;
import android.view.Window;

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu.CanvasTransformer;
import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;

public class MainActivity extends SlidingFragmentActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.right);

        // 设置存放侧滑栏的容器的布局文件
        setBehindContentView(R.layout.left_menu_frame);

        // 将侧滑栏的fragment类填充到侧滑栏的容器的布局文件中
        FragmentTransaction transaction = getSupportFragmentManager()
                .beginTransaction();
        LeftList fragment = new LeftList();
        transaction.replace(R.id.id_left_menu_frame, fragment);
        transaction.commit();

        SlidingMenu menu = getSlidingMenu();
        // menu.setMode(SlidingMenu.LEFT);
        // 设置触摸模式，可以选择全屏划出，或者是边缘划出，或者是不可划出,这里为全屏划出
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        // 设置侧滑栏完全展开之后，距离另外一边的距离，单位px，设置的越大，侧滑栏的宽度越小
        menu.setShadowWidthRes(R.dimen.shadow_width);
        // 设置阴影的颜色
        menu.setShadowDrawable(R.drawable.shadow);

        // 设置侧滑栏显示动画为折叠动画
        menu.setBehindCanvasTransformer(new CanvasTransformer() {
            @Override
            public void transformCanvas(Canvas canvas, float percentOpen) {
                canvas.scale(percentOpen, 1, 0, 0);
            }
        });

        // 设置滑动菜单视图的宽度
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        // 设置渐入渐出效果的值。范围是0-1.0f,设置的越大，则在侧滑栏刚划出的时候， 颜色就越暗。1.0f的时候，颜色为全黑刚划出的时候，
        menu.setFadeDegree(0.3f);
    }
}

这里要说明一下，在MainActivity中的left_menu_frame的布局文件为：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/id_left_menu_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

这个是一个比较固定的写法。

在资源文件values的dimens中添加2条：

<dimen name="slidingmenu_offset">280dp</dimen>
<dimen name="shadow_width">15dp</dimen>

以便在设置中方便使用。

// 设置阴影的颜色
menu.setShadowDrawable(R.drawable.shadow);
中的shadow布局如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <gradient
        android:endColor="#ff444444"
        android:startColor="#00000000" />

</shape>

在Activity中动态添加Fragment的方法如下（这是我学习过程中截得图o(╯□╰)o）：

应该没有别的什么了吧，最后是效果图（用的平板做的测试，还有我不会弄动态图，只能弄2张图片了，小白一个，见谅见谅）

最后在从别人那里搜集一些常用属性什么的给大家供大家参考吧：
（1）双侧滑栏
我们可以通过下面的代码实现双侧滑栏的效果

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //设置左边的侧滑栏
        getSlidingMenu().setMode(SlidingMenu.LEFT_RIGHT);
           getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        setContentView(R.layout.content_frame);
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame, new SampleListFragment()).commit();
        //设置右边的侧滑栏
        getSlidingMenu().setSecondaryMenu(R.layout.menu_frame_two);
        getSlidingMenu().setSecondaryShadowDrawable(R.drawable.shadowright);
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.menu_frame_two, new SampleListFragment())
                .commit();
    }

（2）设置触摸模式
通过getSlidingMenu().setTouchModeAbove()可以设置侧滑栏的触摸模式，用下面3个常量值
SlidingMenu.TOUCHMODE_FULLSCREEN 全屏幕模式，全屏滑动都可打开

SlidingMenu.TOUCHMODE_MARGIN 侧边模式，只在屏幕侧边滑动才能打开，中心滑动不能打开

SlidingMenu.TOUCHMODE_NONE 禁止触摸模式，不能够通过触摸打开，只能够通过SlidingMenu().toggle()打开或者是关闭

（3）设置侧滑栏显示动画
通过SlidingMenu.setBehindCanvasTransformer(CanvasTransformer);方法可以设置侧滑栏的显示动画，参数是一个CanvasTransformer对象。下面是几个常见的动画的设置

折叠动画

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

放缩动画

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

上升动画
private static Interpolator interp = new Interpolator() {
        @Override
        public float getInterpolation(float t) {
            t -= 1.0f;
            return t * t * t + 1.0f;
        }       
    };

new CanvasTransformer() {
            @Override
            public void transformCanvas(Canvas canvas, float percentOpen) {
                canvas.translate(0, canvas.getHeight()*(1-interp.getInterpolation(percentOpen)));
            }           
        }

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有两个，简单的来说，对于menu close事务，一个是when，一个是after

menu.OnClosedListener（OnClosedListener）;//slidingmenu封闭时事务

menu.OnClosedListener（OnClosedListener）;//slidingmenu封闭后事务

程序源码下载：

点击这里