使用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封闭后事务

程序源码下载：

点击这里

时间： 2024-11-09 01:56:43

使用slidingMenu实现简单的侧滑栏的相关文章

【Android界面实现】使用ActionBar和DrawerLayout纯原生控件，实现侧滑栏和滑动Tab界面

转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在前面的文章中,我们使用第三方开源控件,比如说是SlidingMenu和PagerSlidingTabStrip,实现过侧滑栏和滑动Tab界面.但是在support-v4包中,提供了原生的侧滑栏控件DrawerLayout,而滑动的Tab效果,我们可以使用ViewPager和ActionBar上的Tab来进行实现.所以在今天的文章里面,我们将介绍如何将DrawerLayout与ActionBar进行整合,

页面侧滑栏效果

效果图:使用侧滑栏属性将两个页面组合起来,显示侧滑效果 首先:设置左边页面的布局: <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_widt

简单的选项栏设置。

在对JavaScript进行了简单的学习后,今天利用它制作了一个简单的选择栏设置. 在进行的时候我们要先知道我们的目的是什么,如下, 我们很容易看出来,当我们鼠标进去选择栏三个标题后,我们需要得到我们要看的内容以及标题的改变. 下面进行我们的思路分析, 1 标题,内容能够改变的原因是鼠标进入了标题. 2 标题的改变内容有背景色和下滑栏. 3 内容的改变是因为有些隐藏了,有些显示了. 我把代码分享给大家: <!DOCTYPE html><html><head lang=&quo

jquery实现简单的导航栏切换效果($(this).index)

一个简单的导航栏切换效果的制作,主要通过索引值和jquery的siblings()来实现 html代码: <div class="container"> <ul class="top-nav"> <li class="nav">html</li> <li class="nav">css</li> <li class="nav"&g

ViewDragHelper详解（侧滑栏）

乐观是一首激昂优美的进行曲,时刻鼓舞着你向事业的大路勇猛前进.--大仲马 一.概述 Drag拖拽:ViewDrag拖拽视图,拖拽控件:ViewDragHelper拖拽视图助手,拖拽操作类.利用ViewDragHelper类可以实现很多绚丽的效果,比如:拖拽删除,拖拽排序,侧滑栏等.本篇主要讲解简易侧滑栏的实现. 注意:ViewDragHelper是作用在一个ViewGroup上,也就是说他不能直接作用到被拖拽的控件view上, 因为控件的位置是由父控件决定的. 最终效果效果图: 二.相关概念 1

Android 自定义控件打造史上最简单的侧滑菜单

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39185641 ,本文出自[张鸿洋的博客] 侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最

利用开源SlidingMenu框架实现左右侧滑菜单的功能

package com.loaderman.slidingmenudemo; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.Windo

SlidingMenu开源控件侧拉栏无法滑动问题修复,bug解决,

slidingMenu是gitHub上比较流行的一个侧拉菜单开源控件,前几日自己写了一个开源控件,经过对比,感觉slidingMenu功能更为强大,但是同时,自己写的开源控件,侧拉栏是可以滑动的,比如这样, 手指在侧拉栏处滑动的时候,依旧可以关闭侧拉栏,这个功能很使用,尤其是如图所示,当slidingMenu比较宽的时候,占据比较大的比例,此时用户只能在左边小范围内滑动才能关闭掉, 很坑爹呀 有木有????看了大部分的应用,都有此问题,故分享出来供大家一起学习 但是问题来了,翻遍slidingM

android5.0多种侧滑栏效果

1.普通侧滑 效果图: 思路:通过自定义View继承HorizontalScrollView,然后重写onMeasure(),onLayout(),onTouchEvent() 方法并设置menu(通过动画使menu开始时处于隐藏状态)布局和content布局.(注意:使用ViewHelper类需要导入nineoldandroids-2.4.0.jar包) menu(left_menu)布局代码: <?xml version="1.0" encoding="utf-8&