实现滑动菜单效果DrawerLayout+NavigationView

一、新建一个项目

• 可以New一个Project，选择Navigation Drawer Activity Mobile。这样新建的项目就有滑动菜单了。可以看个人情况再进行修改。
• Gradle中会自动添加以下依赖

implementation 'com.android.support:design:26.1.0'

• 如果不是选择Navigation Drawer Activity Mobile，且你项目中没有以上依赖，就需要自己添加上，File–>Project Structure–>app–>Dependencies–>Library Dependency。
  

二、java文件

1、MainActivity.java

package com.example.lcf.myapplication;import android.os.Bundle;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.support.v7.app.ActionBar;import android.view.View;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;public class MainActivity extends AppCompatActivity        implements NavigationView.OnNavigationItemSelectedListener {    DrawerLayout drawer;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View view) {                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                        .setAction("Action", null).show();            }        });        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        //这里加入了导航按钮图标        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);        drawer.addDrawerListener(toggle);        toggle.syncState();//        //也可以通过以下方法来设置 导航按钮图标       //        ActionBar actionBar=getSupportActionBar();//        if(actionBar!=null){//            actionBar.setDisplayHomeAsUpEnabled(true);//            //这里设置一张图片来当导航按钮图标（HomeAsUp按钮，id为android.R.id.home），需要在onOptionsItemSelected中设置点击处理。//            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher);//        }        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(this);    }    @Override    public void onBackPressed() {        drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        if (drawer.isDrawerOpen(GravityCompat.START)) {            drawer.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        // Inflate the menu; this adds items to the action bar if it is present.        getMenuInflater().inflate(R.menu.main, menu);        return true;    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        // Handle action bar item clicks here. The action bar will        // automatically handle clicks on the Home/Up button, so long        // as you specify a parent activity in AndroidManifest.xml.        int id = item.getItemId();        //noinspection SimplifiableIfStatement        if (id == R.id.action_settings) {            return true;//        }else if(id ==android.R.id.home){//            drawer.openDrawer(GravityCompat.START);        }            return super.onOptionsItemSelected(item);    }    @SuppressWarnings("StatementWithEmptyBody")    @Override    public boolean onNavigationItemSelected(MenuItem item) {        // Handle navigation view item clicks here.        int id = item.getItemId();        if (id == R.id.nav_camera) {            // Handle the camera action        } else if (id == R.id.nav_gallery) {        } else if (id == R.id.nav_slideshow) {        } else if (id == R.id.nav_manage) {        } else if (id == R.id.nav_share) {        } else if (id == R.id.nav_send) {        }        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);        drawer.closeDrawer(GravityCompat.START);        return true;    }}

三、layout文件

1、activity_main.xml
- NavigationView中设置了android:fitsSystemWindows=”true”，view会自动添加一个值等于状态栏高度(注意：它的所有父类都要设置这个属性才行，不然没用，另外，还要指定状态栏为透明的，如@android:color/transparent)，不过android:statusBarColor属性从API21才有的，创建一个values-v21目录，添加一个styles.xml。如下：

<resources>    <style name="AppTheme.NoActionBar">        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>        <item name="android:statusBarColor">@android:color/transparent</item>    </style></resources>

上面的是values-v21目录中的styles.xml，而values目录中的如下：

<style name="AppTheme.NoActionBar">        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>

需要注意的是AndroidManifest.xml中MainActivity主题设置为android:theme=”@style/AppTheme.NoActionBar”。

• app:headerLayout=”@layout/nav_header_main”指定头布局
• app:menu=”@menu/activity_main_drawer”指定NavigationView中的菜单布局。DrawerLayout 中允许放入两个直接子控件。

<?xml version="1.0" encoding="utf-8"?><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="true"    tools:openDrawer="start">    <include        layout="@layout/app_bar_main"        android:layout_width="match_parent"        android:layout_height="match_parent" />    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_main"        app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>

2、app_bar_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.lcfu1.myapplication.MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:popupTheme="@style/AppTheme.PopupOverlay" />    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_main" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="bottom|end"        android:layout_margin="@dimen/fab_margin"        app:srcCompat="@android:drawable/ic_dialog_email" /></android.support.design.widget.CoordinatorLayout>

3、content_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.constraint.ConstraintLayout 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:layout_width="match_parent"    android:layout_height="match_parent"    app:layout_behavior="@string/appbar_scrolling_view_behavior"    tools:context="com.lcfu1.myapplication.MainActivity"    tools:showIn="@layout/app_bar_main">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello World!"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" /></android.support.constraint.ConstraintLayout>

4、nav_header_main.xml头布局，ImageView中app:srcCompat=”@mipmap/ic_launcher_round”是个圆形的图片，如果你的图片不是圆形的，可以添加以下依赖implementation 'de.hdodenhof:circleimageview:2.1.0'，CircleImageView是个可以使图片圆形化的控件。使用方法如下面注释部分。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="@dimen/nav_header_height"    android:background="@drawable/side_nav_bar"    android:gravity="bottom"    android:orientation="vertical"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <!--<de.hdodenhof.circleimageview.CircleImageView-->        <!--android:id="@+id/imageView"-->        <!--android:layout_width="70dp"-->        <!--android:layout_height="70dp"-->        <!--android:paddingTop="@dimen/nav_header_vertical_spacing"-->        <!--android:src="@drawable/a" />-->    <ImageView        android:id="@+id/imageView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        app:srcCompat="@mipmap/ic_launcher_round" />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        android:text="Android Studio"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />    <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="[e-mail]" /></LinearLayout>

四、menu文件

1、activity_main_drawer.xml这个是NavigationView中的菜单布局，android:checkableBehavior=”single”表示只能单选。

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    tools:showIn="navigation_view">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_camera"            android:icon="@drawable/ic_menu_camera"            android:title="Import" />        <item            android:id="@+id/nav_gallery"            android:icon="@drawable/ic_menu_gallery"            android:title="Gallery" />        <item            android:id="@+id/nav_slideshow"            android:icon="@drawable/ic_menu_slideshow"            android:title="Slideshow" />        <item            android:id="@+id/nav_manage"            android:icon="@drawable/ic_menu_manage"            android:title="Tools" />    </group>    <item android:title="Communicate">        <menu>            <item                android:id="@+id/nav_share"                android:icon="@drawable/ic_menu_share"                android:title="Share" />            <item                android:id="@+id/nav_send"                android:icon="@drawable/ic_menu_send"                android:title="Send" />        </menu>    </item></menu>

2、main.xml菜单布局

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_settings"        android:orderInCategory="100"        android:title="@string/action_settings"        app:showAsAction="never" /></menu>

五、截图

• 我是在android5.0上测试的
• 这是设置了android:fitsSystemWindows=”true”的。可以观察一下手机状态栏，状态栏是透明的，而头布局在它伸展到状态栏下。
  
• 如果没有设置fitsSystemWindows，就会出现如下效果。