5分钟学会两种侧滑菜单栏

转载请标明出处：http://blog.csdn.net/donkor_/article/details/55517422
前言：
侧滑菜单效果其实在应用上很是常见。其中大部分新闻客户端都使用了这种效果。使用起来也是又溜（6）又简单，并且经久以来，也被用户所熟悉。而本文提供两种方法来实现这样的一种抽屉效果。

• 通过studio创建module使用github上开源的SlidingMenu
• 使用google官方提供的Drawerlayout。

下面看下效果图。
· 使用SlidingMenu效果图

· 使用DrawerLayout效果图

一、通过studio创建module使用github上开源的SlidingMenu
▲SlidingMenu 介绍
SlidingMenu 是github 上Android开源项目，能够快速集成 Android 侧滑菜单效果 。更多api方法SlidingMenu 常用属性介绍

下载地址：https://github.com/jfeinstein10/SlidingMenu

▲Android Studio集成SlidingMenu（图文教程）
首先在Github下载SlidingMenu，下载完成之后解压压缩包，得到如下文件。

在Studiio中创建MenDemo工程项目。选中app目录，右键新建“New”一个“Module”

选中第二个Android Library，Next。

填写Module基本信息

将在上面解压出来的SlidingMenu源码中的library中的源码（src目录下），资源文件（res目录下），配置文件（AndroidManifest.xml）复制黏贴到刚刚创建的module中。

在Studio中按下快捷键“F4”->“Open Module Settings”出现如下页面。然后为app应用添加module（slidingmenu）依赖。之后sync now项目工程。

至此，Android Studio集成SlidingMenu完成。
▲使用与案例
回顾上文给出的SlidingMenu的效果图，然后以下是我画的效果分析图。ps:画功有点渣。不过没关系，图看不懂。文本描述能理解就行。

实现效果原理：当手指按下屏幕，向右开始滑动。此时右侧侧滑栏逐渐显示在屏幕主体，原本在屏幕主体的视图增加阴影向右淡出。点击左侧侧滑栏“菜单一”、”菜单二”更换屏幕主体视图。在屏幕主体中任意位置向右滑动即可弹出左侧菜单。

实现过程：其实就只有一个activity和三个fragment。其中一个侧滑栏fragment，一个“菜单一”fragment，一个“菜单二”fragment。

实现代码比较简单，首先看下MainActivity的布局activity_main.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">

    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

左侧菜单栏布局，其实就是一个堆起来的布局，没啥好讲的。left_content.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/leftmenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#1997ff">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/menutext1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="菜单一"
            android:textColor="@android:color/white"
            android:textSize="20dp" />

        <View
            android:layout_width="wrap_content"
            android:layout_height="0.5dp"
            android:background="@android:color/darker_gray" />

        <TextView
            android:id="@+id/menutext2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="20dp"
            android:text="菜单二"
            android:textColor="@android:color/white"
            android:textSize="20dp" />

        <View
            android:layout_width="wrap_content"
            android:layout_height="0.5dp"
            android:background="@android:color/darker_gray" />
    </LinearLayout>

</RelativeLayout>

左侧菜单栏MenuFragment

/**
 * 左侧菜单栏
 * Created by donkor
 */
public class MenuFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.left_content, container, false);
    }
}

第一个菜单栏主页面MainFragment与布局main_content.xml

/**
 * 第一个菜单栏主页面
 * Created by donkor
 */
public class MainFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.main_content,container, false);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/bb">

</RelativeLayout>

菜单二fragment、布局与菜单一基本完全相同，就在布局文件里放了两个美女的背景图。这里都不写了。重点看下activity中的代码。

MainActivity代码

public class MainActivity extends FragmentActivity {
    //声明SlideMenu对象
    private SlidingMenu slidingMenu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //替换主界面内容
        getSupportFragmentManager().beginTransaction().replace(R.id.flContent, new MainFragment()).commit();
        //实例化菜单控件
        slidingMenu=new SlidingMenu(this);
        //设置相关属性
        slidingMenu.setMode(SlidingMenu.LEFT);//菜单靠左
        slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//全屏支持触摸拖拉
        slidingMenu.setBehindOffset(350);//SlidingMenu划出时主页面显示的剩余宽度
        slidingMenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//不包含ActionBar
        slidingMenu.setMenu(R.layout.left_content);
        //设置透明度
        slidingMenu.setOffsetFadeDegree(0.4f);

        TextView menuText1= (TextView) findViewById(R.id.menutext1);
        TextView menuText2= (TextView) findViewById(R.id.menutext2);
        menuText1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction().replace(R.id.flContent, new MainFragment()).commit();
                slidingMenu.toggle();
            }
        });
        menuText2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction().replace(R.id.flContent, new SecondFragment()).commit();
                slidingMenu.toggle();
            }
        });
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重写了Menu监听，实现按下手机Menu键弹出和关闭侧滑菜单
        if(keyCode==KeyEvent.KEYCODE_MENU){
            slidingMenu.toggle();
        }
        return super.onKeyDown(keyCode, event);
    }
}

代码里面注释写的很清楚，这里不再赘述。Demo仅仅演示了左侧菜单栏的效果。更多功能与使用，还请再翻翻SlidingMenu的api。更多api方法SlidingMenu 常用属性介绍。需要完整代码的，在文章末尾会有下载地址。

二、使用google官方提供的Drawerlayout实现侧拉菜单
▲Drawerlayout 介绍
DrawerLayout作为Android组件是Google后来在android中添加的，在android.support.v4包下。drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性）。

更多详情与介绍，请直接参考官方文档： https://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

▲使用与案例
同样的，回顾一下上文给出的DrawerLayout的效果图，然后看下我画的效果分析图。

实现效果原理：当手指按下屏幕，向右开始滑动。此时右侧侧滑栏逐渐显示在屏幕主体，原本在屏幕主体的视图增加阴影淡出。被覆盖在左侧菜单栏下。点击左侧侧滑栏“菜单一”、”菜单二”更换屏幕主体视图。左侧菜单需要从边界开始滑动弹出。

实现过程：实现过程跟SlidingMenu一样。只有一个activity和三个fragment。其中一个侧滑栏fragment，一个“菜单一”fragment，一个“菜单二”fragment。

下面直接看下，MainActivity的布局activity_main代码。DrawerLayout作为根布局，FrameLayout作为屏幕主体内容，fragment为左侧菜单栏。

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

    <FrameLayout
        android:id="@+id/flContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </FrameLayout>

    <fragment
        android:id="@+id/id_left_menu"
        android:name="com.donkor.demo.drawerlayout.fragment.LeftFragment"
        android:layout_width="230dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:tag="LEFT" />
</android.support.v4.widget.DrawerLayout>

※ 其中需要注意，通过设置菜单栏layout_gravity来判断侧滑菜单的位置。start为左边，end为右边。

在SlidingMenu介绍中，已经给出三个fragment和布局文件的代码。这里我们直接套入。没啥困难点。

最后看下MainActivity主要代码

public class MainActivity extends FragmentActivity {
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDrawerLayout= (DrawerLayout) findViewById(R.id.drawer_layout);

        //替换主界面内容
        getSupportFragmentManager().beginTransaction().replace(R.id.flContent, new MainFragment()).commit();

        TextView menuText1= (TextView) findViewById(R.id.menutext1);
        TextView menuText2= (TextView) findViewById(R.id.menutext2);
        menuText1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction().replace(R.id.flContent, new MainFragment()).commit();
                mDrawerLayout.closeDrawers();
            }
        });
        menuText2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                getSupportFragmentManager().beginTransaction().replace(R.id.flContent, new SecondFragment()).commit();
                mDrawerLayout.closeDrawers();
            }
        });
    }
}

一个左侧侧滑菜单栏完成。实际上DrawerLayout经常跟Toolbar一起使用，我比较懒，这里就不写了。有兴趣的同学在去百度谷歌看看。

最后你会发现这只是一个入门教程。并且真的只需要5分钟。

Demo_CSDN 下载地址 : http://download.csdn.net/detail/donkor_/9757564

---

About me
Email ：donkor@yeah.net
Android开发交流QQ群 : 537891203