他仅靠四段代码作出比 Google Play 还炫酷的侧滑菜单

微信截图_20170808150035.png

本文为菜鸟窝作者 吴威龙 的连载

菜鸟窝是专业的程序猿在线学习平台，提供最系统的 Android 项目实战课程

如需转载，请联系菜鸟窝公众号（cniao5）,并注明出处。

[toc]

前言

侧滑菜单想必大家都不陌生，最著名的 Google Play 就是使用了由 DrawerLayout+NavigationView 实现的侧滑菜单，如下图所示：

image

看了 Google play 的炫酷侧滑菜单，有没有冲动自己写一个呢？
下面来看看 菜鸟手机助手 实现的效果：

image

是不是毫不逊色于 Google Play 呢？下面我们用代码来实现这个效果吧！

DrawerLayout 介绍

Google 老爹推出的侧滑菜单控件（有的称为抽屉控件）
该布局控件以 android.support.v4.widget.DrawerLayout 为根控件

DrawerLayout 布局控件下包裹两个控件.第一个控件是内容控件（主界面）,第二个是侧滑控件（就是侧滑的菜单,这里使用 NavigationView 作为布局控件）

使用 android:layout_gravity 属性来指定它的滑动位置, start 表示从左滑出, end 表示从右滑出；

设置侧滑事件：mDrawerLayout.setDrawerListener(DrawerLayout.DrawerListener)

NavigationView 介绍

是什么:

以前做侧滑菜单的时候，左边滑出来的那一部分布局都是自己来定义的，浪费时间得同时还很难看。于是 Google 老爹在 5.0 之后推出了 NavigationView,这个菜单整体分为两部分，上面一部分为 HeaderLayout,下面的点击项为 menu.这样极大的方便了我们的开发效率啊。

常用属性如下：

app:headerLayout=“@layout/header_layout” 表示引用一个头布局文件

app:menu=“@menu/main” 表示引用一个 menu 作为下面的点击项

获取头部 View headerView = navigationView.getHeaderView(0);

item 点击 navigationView.setNavigationItemSelectedListener（）

代码实现步骤：

主布局文件 activity_main.xml

NavigationView 侧滑控件所引用的 headerLayout 布局文件 layout_header.xml

NavigationView 侧滑控件所引用的 menu 菜单文件 menu_left.xml

MainActivity.java 文件核心代码段

public class MainActivity extends BaseActivity {
   .
   .
   .

    @Override
    public int setLayout() {
        return R.layout.activity_main;
    }

   .
   .
   .
   /**
   * 初始化 Toolbar
   */

    private void initToolbar(){

          
        //给 ToolBar 设置布局
        mToolBar.inflateMenu(R.menu.toolbar_menu);
//        Menu menu  = mToolBar.getMenu();

        mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {

                if(item.getItemId() == R.id.action_download){

                    startActivity(new Intent(MainActivity.this,AppManagerActivity.class));
                }

                return true;
            }
        });
    }
    
   /**
    * 初始化 DrawerLayout
    */
    private void initDrawerLayout() {

        headerView = mNavigationView.getHeaderView(0);

        mUserHeadView = (ImageView) headerView.findViewById(R.id.img_avatar);
        mUserHeadView.setImageDrawable(new IconicsDrawable(this, Cniao5Font.Icon.cniao_head).colorRes(R.color.white));

        mTextUserName = (TextView) headerView.findViewById(R.id.txt_username);


        mNavigationView.getMenu().findItem(R.id.menu_app_update).setIcon(new IconicsDrawable(this, Ionicons.Icon.ion_ios_loop));
        mNavigationView.getMenu().findItem(R.id.menu_download_manager).setIcon(new IconicsDrawable(this, Cniao5Font.Icon.cniao_download));
        mNavigationView.getMenu().findItem(R.id.menu_app_uninstall).setIcon(new IconicsDrawable(this, Ionicons.Icon.ion_ios_trash_outline));
        mNavigationView.getMenu().findItem(R.id.menu_setting).setIcon(new IconicsDrawable(this, Ionicons.Icon.ion_ios_gear_outline));

        mNavigationView.getMenu().findItem(R.id.menu_logout).setIcon(new IconicsDrawable(this, Cniao5Font.Icon.cniao_shutdown));

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //部分点击事件的监听

                switch (item.getItemId()) {

                    case R.id.menu_logout:

                        logout();

                        break;
                    case R.id.menu_download_manager:

                        toAppManagerActivity();

                        break;

                }

                return false;
            }
        });

        /**
        *  侧滑菜单与 ToolBar 整合
        */
        ActionBarDrawerToggle drawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolBar, R.string.open, R.string.close);

        drawerToggle.syncState();

        mDrawerLayout.addDrawerListener(drawerToggle);

    }

 
   .
   .
   .

}

总结

侧滑菜单的实现就是如此简单了，本文只是抛砖引玉一下，大家只需要稍微改改就可以满足业务需求了。

添加运营微信：yrioyou，备注“菜鸟手机助手交流群”
进入菜鸟手机助手交流群

微信图片_20170803172638.jpg

关注菜鸟窝官网，免费领取140套开源项目

菜鸟窝官网公号二维码.png