Android侧滑菜单DrawerLayout讲解

最早的时候实现侧滑菜单功能大多需要通过github上一个叫做SlidingMenu的开源通过依赖包来实现，后来谷歌在v4包中添

加了DrawerLayout来实现这个功能，完全可以替代SlidingMenu。

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说drawerLayout是因为第三方控件如MenuDrawer

等的出现之后，google借鉴而出现的产物。

drawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（drawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

1.导入

compile 'com.android.support:appcompat-v7:24.2.1'

2.布局文件

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

    <!--DrawerLayout最好为界面的根布局-->

    <!--主内容区的布局代码要放在侧滑菜单布局的前面,-->
    <RelativeLayout
        android:id="@+id/drawerlayout_main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/drawerlayout_mian_layout_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="这是主内容"
            android:textColor="@color/colorAccent"
            android:textSize="22sp" />
    </RelativeLayout>

    <!--必须设置layout_gravity属性,表示侧滑方向-->
    <TextView
        android:id="@+id/drawerlayout_side_tv"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:background="@color/white"
        android:text="侧滑菜单"/>

</android.support.v4.widget.DrawerLayout>

其中：

DrawerLayout最好为界面的根布局，否则可能会出现触摸事件被屏蔽的问题；

主内容区的布局代码要放在侧滑菜单布局的前面, 因为 XML 顺序意味着按 z 序（层叠顺序）排序，并且抽屉式导航栏必须位于

扫描二维码关注公众号，回复： 1723503 查看本文章

内容顶部；

侧滑菜单部分的布局必须设置layout_gravity属性，表示侧滑菜单是在左边还是右边，而且如果不设置在打开关闭抽屉的时候会

报错，设置了layout_gravity="start/left"的视图才会被认为是侧滑菜单。

效果

3.官方推荐的是在做法是在toolbar左边添加一个导航按钮

更改界面为无actionbar：android:theme="@style/Theme.AppCompat.Light.NoActionBar"

xml布局文件的Relativelayout中内容替换为：

 <!--主内容区的布局代码要放在侧滑菜单布局的前面,-->
    <RelativeLayout
        android:id="@+id/drawerlayout_main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/drawer_layout_rl_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@color/yellow"
            app:title="主标题">

        </android.support.v7.widget.Toolbar>

    </RelativeLayout>

4.主界面实例化toolbar

Toolbar toolbar = (Toolbar) findViewById(R.id.drawer_layout_rl_toolbar);

传入toolbar，并传给actionbar

setSupportActionBar(toolbar);                   //传入ToolBar实例
ActionBar actionBar = getSupportActionBar();    //得到ActionBar实例

然后设置显示导航按钮

 if (actionBar != null){
            //显示导航按钮
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置导航按钮图片
            actionBar.setHomeAsUpIndicator(R.drawable.design_menu);
        }

实例化drawerlayout

final DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout_drawer);

5.设置导航按钮的监听事件，点击显示侧滑菜单

//设置toolbar的导航按钮监听事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //显示侧滑菜单
                drawerLayout.openDrawer(GravityCompat.START);
            }
        });

或者

@Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                //显示侧滑菜单
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return super.onOptionsItemSelected(item);
    }

最终效果：

全部代码：

public class DrawerLayoutActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.drawer_layout_rl_toolbar);
        setSupportActionBar(toolbar);                   //传入ToolBar实例
        ActionBar actionBar = getSupportActionBar();    //得到ActionBar实例

        if (actionBar != null){
            //显示导航按钮
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置导航按钮图片
            actionBar.setHomeAsUpIndicator(R.drawable.design_menu);
        }
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout_drawer);
        //设置toolbar的导航按钮监听事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //显示侧滑菜单
                drawerLayout.openDrawer(GravityCompat.START);
            }
        });
    }
    /*
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                //显示侧滑菜单
                drawerLayout.openDrawer(GravityCompat.START);
                break;
        }
        return super.onOptionsItemSelected(item);
    }*/
}

Android侧滑菜单DrawerLayout讲解

猜你喜欢