ToolBar+DrawerLayout使用

前言

ToolBar+DrawerLayout可以轻松实现侧滑菜单,DrawerLayout是2015年io大会发布的一个可以实现侧滑的控件,之前实现侧滑菜单可以使用SlidingMenu,或者使用ViewDragHelper这个类自己实现侧滑菜单,现在我们多了一个更简单快捷的实现方法.如果对toolbar不了解的可自行参考http://blog.csdn.net/m0_37761307/article/details/79154240

效果图

修改主题

第一步当然还是需要隐藏原来的ActionBar,values/styles.xml中做出如下修改：

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/mcolorPrimary</item>
        <item name="colorPrimaryDark">@color/mcolorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.panku.drawerlayoutdemo.MainActivity">

    <!--toolbar-->
    <include layout="@layout/toolbar" />
    <!--DrawerLayout-->
    <include layout="@layout/drawer_layout" />

</LinearLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <!--ThemeOverlay.AppCompat.Dark.ActionBar  内部的图标和文字都是白色的,(解决后侧三个小点为黑色不匹配问题)-->

    <!--elevation  阴影-->
    <!--app:popupTheme="@style/ThemeOverlay.AppCompat.Light"   pop背景是白色的-->

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

drawer_layout.xml

<?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:id="@+id/drawerLayout"
    android:layout_height="match_parent">


    <!--主布局-->
    <LinearLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是主页"
            android:textSize="25sp" />
    </LinearLayout>


    <!--侧拉菜单-->
    <LinearLayout
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#f3f7c8">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我是侧拉菜单"
            android:textSize="25sp" />
    </LinearLayout>

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

Mainactivity代码

private Toolbar my_toolbar;
    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle drawerToggle;

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

    private void initView() {
        my_toolbar = (Toolbar) findViewById(R.id.my_toolbar);
        setSupportActionBar(my_toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        //实现了监听的开关
        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, my_toolbar, 0, 0) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                ToastUtils.show(MainActivity.this, "打开");
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                ToastUtils.show(MainActivity.this, "关闭");
            }
        };
        //toolbar与drawerLayout关联同步
        drawerToggle.syncState();
        //监听
        drawerLayout.addDrawerListener(drawerToggle);
    }

这样就实现了简单的侧滑菜单.