Android之使用DrawerLayout+NavigationView+ToolBar实现抽屉侧滑菜单

一：将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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:id="@+id/drawerlayout">

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

二：在根布局内添加主页面布局和NavigationView

    <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent">
          <android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@color/colorPrimary"
              >

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




    <android.support.design.widget.NavigationView
        android:id="@+id/navigation"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity = "start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/headlayout"
        app:menu="@menu/mymenu">

    </android.support.design.widget.NavigationView>

主页面布局需要在NavigationView的上面，代码中只添加了一个Toolbar标题栏。NavigationView属性中layout_gravity = "start"表示从左端向右侧滑出菜单。NavigationView包含两个布局，一个是头布局，一个是菜单布局。

三：NavigationView添加头布局属性：

app:headerLayout="@layout/headlayout"。headlayout.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@mipmap/head"
        />

</LinearLayout>

头布局中添加了一个ImageView控件显示一张图片。

四：NavigationView添加菜单布局属性：

app:menu="@menu/mymenu"。mymenu.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/page"
        android:icon="@mipmap/ic_launcher"
        android:title="首页"/>
    <item
        android:id="@+id/rea"
        android:icon="@mipmap/ic_launcher"
        android:title="订阅"/>
    <item
        android:id="@+id/found"
        android:icon="@mipmap/ic_launcher"
        android:title="发现"/>
    <item
        android:id="@+id/myself"
        android:icon="@mipmap/ic_launcher"
        android:title="我的"/>
</menu>

菜单布局添加了4个菜单选项

五：ManiActivity代码如下：

public class MainActivity extends AppCompatActivity {

    Toolbar toolbar;
    DrawerLayout drawerLayout;
    NavigationView navigationView;

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navigationView = (NavigationView) findViewById(R.id.navigation);

        setSupportActionBar(toolbar);
        ActionBar tb = getSupportActionBar();
        tb.setHomeAsUpIndicator(R.mipmap.ic_menu);//在标题栏添加菜单图标
        tb.setTitle("MyMusic");
        tb.setDisplayHomeAsUpEnabled(true);

        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {//菜单选项点击监听
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                drawerLayout.closeDrawers();
                drawerLayout.setSelected(true);
                return true;
            }
        });
    }



    @Override
    public boolean onOptionsItemSelected(MenuItem item){//菜单图标点击监听
        switch (item.getItemId()){
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

效果如下：