原创文章，如有转载，请注明出处：http://blog.csdn.net/myth13141314/article/details/64127885

如今抽屉式布局应用得越来越多， 实现方式一般有2种，利用系统的兼容库中的DrawerLayout实现，或是用第三方库实现。利用DrawerLayout实现参考文章：Android 抽屉式布局之利用DrawerLayout实现。这篇文章我们来看看怎么用第三方库MaterialDrawer来实现抽屉式布局

效果如下：

Github上有很多的开源库，如MaterialDrawer，下面我们就来看看用MaterialDrawer怎么实现漂亮的抽屉式布局

• 在项目中引用库

compile('com.mikepenz:materialdrawer:5.8.2@aar') {
    transitive = true
}

• 生成drawer对象，并与toolbar绑在一起

//生成新的菜单item
withName()//菜单名字
withIcon()//菜单图标
withBadge()//菜单的tips

PrimaryDrawerItem updateItem = new PrimaryDrawerItem().withName(R.string.menu_update).withIcon(R.mipmap.menu_update).withBadge("V1.0").withSelectable(false);

//生成头部
AccountHeader headerResult = new AccountHeaderBuilder()
   .withActivity(this)
   .withAccountHeader(R.layout.drawer_header)//头部布局
   .build();

new DrawerBuilder()
   .withActivity(this)
   .withToolbar(toolbar)  //绑定toolbar
   .withAccountHeader(headerResult)  //添加头部
   .addDrawerItems(  //添加菜单item
           new PrimaryDrawerItem().withName(R.string.menu_home).withIconTintingEnabled(true).withIcon(R.drawable.selector_drawer_menu_home),
           new PrimaryDrawerItem().withName(R.string.menu_download).withIcon(R.mipmap.menu_download).withSelectable(false),
           new PrimaryDrawerItem().withName(R.string.menu_bookmark).withIcon(R.mipmap.menu_bookmark).withSelectable(false),
           new PrimaryDrawerItem().withName(R.string.menu_setting).withIcon(R.mipmap.menu_setting).withSelectable(false),
           new PrimaryDrawerItem().withName(R.string.menu_like).withIcon(R.mipmap.menu_like).withSelectable(false),
           new PrimaryDrawerItem().withName(R.string.menu_share).withIcon(R.mipmap.menu_share).withSelectable(false),
           new PrimaryDrawerItem().withName(R.string.menu_feedback).withIcon(R.mipmap.menu_feedback).withSelectable(false),
           updateItem,
           new PrimaryDrawerItem().withName(R.string.menu_exit).withIcon(R.mipmap.menu_exit).withSelectable(false)
   )
   //添加点击事件
   .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
       @Override
       public boolean onItemClick(View view, int position, IDrawerItem drawerItem) {
           switch(position) {
               case 0://头部点击
                   break;
               case 1://home
                   toolbar.setVisibility(View.VISIBLE);
                   invalidateOptionsMenu();
                   break;
               case 2://download
                   break;
               case 3://bookmark
                   break;
               case 4://setting
                   Intent settingIntent = new Intent(MainActivity.this, SettingActivity.class);
                   startActivity(settingIntent);
                   break;
               case 5://like us
                   break;
               case 6://share
                   break;
               case 7://feedback
                   break;
               case 8://update
                   break;
               case 9://exit
                   break;

           }
           return false;
       }
   })
   .withSelectedItemByPosition(1)//设置默认选择菜单项
   .build();

效果图

---

使用中的坑

• 头部布局自定义的时候需要按照一定的模板来，一些默认的ID需要保留

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="172dp"
    android:background="@color/colorPrimary"
    android:clickable="true"
    >

    //自定义部分
    //头部图片， material_drawer_account_header_background这个ID不要改
    <ImageView
        android:id="@+id/material_drawer_account_header_background"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@mipmap/ic_launcher"
        android:layout_marginBottom="18dp"/>

    //头部文字
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="my application"
            android:textColor="@color/white"
            android:textSize="14dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="16dp"/>

    </RelativeLayout>

    //默认布局部分
    <LinearLayout
        android:id="@+id/material_drawer_account_header"
        android:layout_width="match_parent"
        android:layout_height="@dimen/material_drawer_account_header_height_compact"
        android:orientation="horizontal"
        android:visibility="gone">

        <com.mikepenz.materialdrawer.view.BezelImageView
            android:id="@+id/material_drawer_account_header_small_first"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:visibility="gone" />

        <com.mikepenz.materialdrawer.view.BezelImageView
            android:id="@+id/material_drawer_account_header_small_second"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:visibility="gone" />

        <com.mikepenz.materialdrawer.view.BezelImageView
            android:id="@+id/material_drawer_account_header_small_third"
            android:layout_width="1dp"
            android:layout_height="1dp"
            android:visibility="gone" />

        <com.mikepenz.materialdrawer.view.BezelImageView
            android:id="@+id/material_drawer_account_header_current"
            android:layout_width="@dimen/material_drawer_account_header_compact"
            android:layout_height="@dimen/material_drawer_account_header_compact"
            android:layout_gravity="bottom"
            android:layout_marginBottom="@dimen/material_drawer_padding"
            android:layout_marginEnd="0dp"
            android:layout_marginLeft="@dimen/material_drawer_vertical_padding"
            android:layout_marginRight="0dp"
            android:layout_marginStart="@dimen/material_drawer_vertical_padding"
            android:clickable="true"
            android:elevation="2dp"
            android:visibility="gone"/>

        <LinearLayout
            android:id="@+id/material_drawer_account_header_text_section"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_gravity="bottom"
            android:layout_marginBottom="@dimen/material_drawer_padding"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:orientation="vertical"
            android:paddingEnd="@dimen/material_drawer_vertical_padding"
            android:paddingLeft="@dimen/material_drawer_vertical_padding"
            android:paddingRight="@dimen/material_drawer_vertical_padding"
            android:paddingStart="@dimen/material_drawer_vertical_padding">

            <TextView
                android:id="@+id/material_drawer_account_header_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:fontFamily="sans-serif-medium"
                android:lines="1"
                android:maxLines="1"
                android:textSize="@dimen/material_drawer_account_header_text" />

            <TextView
                android:id="@+id/material_drawer_account_header_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textSize="@dimen/material_drawer_account_header_text" />

        </LinearLayout>

        <ImageView
            android:id="@+id/material_drawer_account_header_text_switcher"
            android:layout_width="@dimen/material_drawer_account_header_dropdown"
            android:layout_height="@dimen/material_drawer_account_header_dropdown"
            android:layout_gravity="bottom"
            android:layout_marginBottom="@dimen/material_drawer_padding"
            android:layout_marginEnd="@dimen/material_drawer_vertical_padding"
            android:layout_marginRight="@dimen/material_drawer_vertical_padding"
            android:layout_marginTop="@dimen/material_drawer_account_header_dropdown" />

    </LinearLayout>

</FrameLayout>

• 点击事件中position=0指的是header头部
• 要想改变drawer的选中的项，直接drawer.setSelection()无效，需要在生成菜单项时添加identifier标志，如：

new PrimaryDrawerItem().withName(R.string.menu_download).withIcon(R.mipmap.menu_download).withSelectable(true).withIdentifier(2)

• 在利用drawer.setSelection()方法设置选中的菜单项时，默认会触发菜单的点击事件，如不需要，需要如下设置：

drawer.setSelection(2, false);   //false表示不触发点击事件

---

欢迎关注我的公众号，和我一起每天进步一点点！