android中NavigationView（Design Support）的使用

NavigationView可以实现美观的菜单功能展示，下面看一下怎么使用NavigationView

先是主Activity

activity_main.xml：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer1"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </android.support.constraint.ConstraintLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/navMenu"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                app:headerLayout="@layout/main_header"
                app:menu="@menu/menu1">
            </android.support.design.widget.NavigationView>
    </android.support.v4.widget.DrawerLayout>


</LinearLayout>

这个布局是这样的：

最外层是一个上下结构的LinearLayout，从上到下依次是一个Toolbar、一个DrawerLayout

DrawerLayout包括一个ConstraintLayout主界面和一个NavigationView抽屉界面

NavigationView导航菜单包括一个头部，以及头部以下的菜单部分

 

然后需要添加NavigationView导航菜单的头部，以及菜单：

头部main_header.xml：

<?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="match_parent">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_weight="1"
        android:paddingTop="10dp"
        android:paddingBottom="10dp" />
</LinearLayout>

这个头部只有一个ImageView，我先不为这个ImageView指定图片资源，待会我动态指定资源，以便于将这个图片显示成圆形的

 

导航菜单menu1.xml：

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/editItem"
            android:icon="@android:drawable/ic_menu_edit"
            android:title="编辑"
            app:showAsAction="always" />
        <item
            android:id="@+id/helpItem"
            android:icon="@android:drawable/ic_menu_help"
            android:title="帮助"
            app:showAsAction="always" />
        <item
            android:id="@+id/deleteItem"
            android:icon="@android:drawable/ic_menu_delete"
            android:title="删除"
            app:showAsAction="always" />
    </group>
</menu>

这个菜单是有一个group菜单组，里面嵌套了三个item菜单项，注意group组有一个重要的属性android:checkableBehavior="single"，这个一定要添加，不然到时候选中效果显示不出来。

 

最后就是主Activity的java类了

MainActivity.java：

package com.example.chenrui.app1;

import android.graphics.BitmapFactory;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = findViewById(R.id.toolbar1);
        setSupportActionBar(toolbar);
        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        final DrawerLayout drawerLayout = findViewById(R.id.drawer1);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
            }

            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
            }
        };
        toggle.syncState();
        drawerLayout.addDrawerListener(toggle);

        final NavigationView navMenu = findViewById(R.id.navMenu);
        navMenu.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                menuItem.setChecked(true);
                drawerLayout.closeDrawers();
                return true;
            }
        });

        ImageView imageView = navMenu.getHeaderView(0).findViewById(R.id.imageView1);
        RoundedBitmapDrawable bitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(),BitmapFactory.decodeResource(getResources(),R.drawable.img01));
        bitmapDrawable.setCircular(true);
        imageView.setImageDrawable(bitmapDrawable);
    }
}

第24到42行代码是指定Activity的菜单栏，并且为菜单栏添加切换抽屉界面显示或隐藏的按钮

第44到52行代码是响应NavigationView选择事件的，选择一个菜单项，会把对应菜单项置为选中状态，并且隐藏抽屉界面，这个里面还应该有菜单要执行的其他动作，我这里是示例，所以没有做别的操作

第54到57行代码是为NavigationView的头部图片动态指定一个图片资源，并且把图片改成圆角的，注意第54行代码查找图片的方式，因为图片位于NavigationView组件的headerLayout中，无法直接通过findViewById找到这个图片，需要先找到NavigationView组件头部的View，然后通过头部的View找到图片组件。这里是使用了RoundedBitmapDrawable来实现圆角图片的，用起来还是比较简单的。

 

最后看一下执行的效果：