MaterialDesign之NavigationView和DrawerLayout实现侧滑菜单栏(抽屉)

  DrawerLayout可以实现左滑和右滑功能，只要在layout文件中配置好左右两个抽屉就可以了，左右两个抽屉可以是任意的view，结合NavigationView可以很好实现侧滑菜单的功能

要使用DrawerLayout,需要v4包，使用NavigationView，需要v7包

实例：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:context=".MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#30469b"/>
        <!--内容显示布局-->
        <FrameLayout
            android:id="@+id/frame_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

toolbar是替换actionbar的新控件，要使用actionbar，必须先隐藏系统自带的bar

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

然后设置toolbar

final Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
mToolbar.setTitleTextColor(Color.WHITE);
setSupportActionBar(mToolbar);

android:layout_height="?attr/actionBarSize"

?attr表示使用当前样式中定义的对应属性的值，比如此处，样式为noactionbar，它里面有个自定义属性actionbarsize，它的值默认是56dp

<item name="actionBarSize">@dimen/abc_action_bar_default_height_material</item>

<dimen name="abc_action_bar_default_height_material">56dp</dimen>

我们让toolbar的最小高度沿用这个值，以保持风格的统一

drawlayout只需要配置layout_gravity属性为“left”或“right”即可自动构建左边或右边的抽屉，也可两个都配置

headerLayout就是给导航栏增加一个头部Layout。

menu就是对应菜单项的选择条目。

navigation_header.xml

 

view source print ?

01. <?xml version="1.0" encoding="utf-8"?>

02. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

03. android:layout_width="match_parent"

04. android:layout_height="200dp"

05. android:background="#30469b">

06. <TextView

07. android:id="@+id/header_tv"

08. android:layout_width="wrap_content"

09. android:layout_height="wrap_content"

10. android:layout_centerInParent="true"

11. android:text="HeaderLayout"

12. android:textColor="#ffffff"

13. android:textSize="25sp" />

14. </RelativeLayout>

drawer.xml

 

 

view source print ?

01. <?xml version="1.0" encoding="utf-8"?>

02. <menu xmlns:android="http://schemas.android.com/apk/res/android">

03. <group android:checkableBehavior="single">

04. <item

05. android:id="@+id/item_one"

06. android:icon="@mipmap/icon"

07. android:title="我的动态"></item>

08. <item

09. android:id="@+id/item_two"

10. android:icon="@mipmap/icon"

11. android:title="我的留言"></item>

12. <item

13. android:id="@+id/item_three"

14. android:icon="@mipmap/icon"

15. android:title="附近的人"></item>

16. </group>

17. </menu>




代码中设置抽屉：

//设置抽屉DrawerLayout
final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this,
        mDrawerLayout,
        mToolbar,
        R.string.drawer_open,
        R.string.drawer_close);
mDrawerToggle.syncState();//初始化状态
mDrawerLayout.setDrawerListener(mDrawerToggle);

抽屉需要在ActioBarDrawerToggle中进行管理，可以把一个toolbar放进去，这样点击toolbar的icon，也能打开和关闭抽屉

如果需要，可以覆盖ActioBarDrawerToggle中的onDrawerOpened和onDrawerClosed方法在抽屉开关时做一些定制处理

toolbar可以设置为null，如果是null，不会出现左边的开关按钮，这时抽屉只能通过手势滑动

如果不需要定制处理，也不需要关联toolbar，可以不写这部分代码

设置navigationview的菜单响应：

//设置导航栏NavigationView的点击事件
NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem menuItem) {
        switch (menuItem.getItemId()) {
            case R.id.item_one:
                getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentOne()).commit();
                mToolbar.setTitle("我的动态");
                break;
            case R.id.item_two:
                getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentTwo()).commit();
                mToolbar.setTitle("我的留言");
                break;
            case R.id.item_three:
                getSupportFragmentManager().beginTransaction().replace(R.id.frame_content, new FragmentThree()).commit();
                mToolbar.setTitle("附近的人");
                break;
        }
        menuItem.setChecked(true);//点击了把它设为选中状态
        mDrawerLayout.closeDrawers();//关闭抽屉
        return true;
    }
});