Design包下NavigationView的使用

首先介绍一下由来，只属于个人见解。Design包是5.0之后出现的新特性，其包含了许多新出现且具有自己特色的控件。除今天要说的NavigationView导航布局之外，还有TabLayout、RecyclerView、CardView、FloatActionButton、Snackbar、TextInputLayout，还有协调者布局CoordinatorLayout等等等等。

我对于这个的理解个人只是觉得Google不想让android的再一问的去模仿IOS所做出来的效果，有了这个，Google更有了底气。

首先需要在AS上搜索design.

之后选择design.

成功之后你的build.gradle文件上会多出之后就可以愉快的使用NavigationView啦.

因为是NavigationView,所以定义在DrawerLayout中。所以布局中我们也需要把NavigationView定义在DrawerLayout的根标签下。

首先看一下布局文件  activity_main.xml

<?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"
    android:id="@+id/drawerLayout_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="drawerlayout + navigationview"/>
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        app:headerLayout="@layout/header_navigation"
        app:menu="@menu/menu_navigation_main"/>

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

这里需要注意的是要用NavigationView特有的属性需要添加

xmlns:app="http://schemas.android.com/apk/res-auto"

的命名空间。其中

android:layout_gravity="left"

代表NavigationView从哪边弹出。

app:headerLayout="@layout/header_navigation"

这个属性可以在NavigationView上添加一个头布局。它也是一个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:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:scaleType="fitXY"
        android:src="@mipmap/sakura05" />
</LinearLayout>

app:menu="@menu/menu_navigation_main"

这个属性是代表NavigationView中的每一个item,它是一个menu.下面是menu_navigation_main.xml文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <group
        android:checkableBehavior="single">

        <item
            android:id="@+id/action_common"
            android:checked="true"
            android:icon="@android:drawable/ic_dialog_dialer"
            android:title="我的收藏"/>
        <item
            android:id="@+id/action_menu"
            android:icon="@android:drawable/ic_dialog_email"
            android:title="我的相册"/>

        <item
            android:id="@+id/action_transform"
            android:icon="@android:drawable/ic_dialog_map"
            android:title="我的文件"/>

        <item
            android:id="@+id/action_other"
            android:checked="false"
            android:title="其他操作">

            <menu>
                <group
                    android:checkableBehavior="single">
                    <item
                        android:id="@+id/action_qq"
                        android:checked="false"
                        android:icon="@android:drawable/ic_btn_speak_now"
                        android:title="QQ好友"/>

                    <item
                        android:id="@+id/action_weixin"
                        android:checked="false"
                        android:icon="@android:drawable/ic_dialog_alert"
                        android:title="微信好友"/>

                </group>
            </menu>
        </item>

    </group>
</menu>

好了。布局写好了。下面介绍用法。下面贴上MainActivity的代码

public class MainActivity extends AppCompatActivity {

    private Context mContext = this;
    private DrawerLayout drawerLayout_main;
    private NavigationView navigationView_main;
    private TextView tv;

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

        initView();
        initActionBar();
    }

    //初始化ActionBar
    private void initActionBar() {
        ActionBar actionBar = getSupportActionBar();
        actionBar.setTitle("打开抽屉");
        actionBar.setDisplayHomeAsUpEnabled(true);
//        actionBar.setHomeAsUpIndicator(android.R.drawable.ic_dialog_info);
    }

    private void initView() {
        drawerLayout_main = (DrawerLayout) findViewById(R.id.drawerLayout_main);
        navigationView_main = (NavigationView) findViewById(R.id.navigation_main);
        tv = ((TextView) findViewById(R.id.tv));

        // 设置导航菜单宽度
        ViewGroup.LayoutParams params = navigationView_main.getLayoutParams();
        params.width = getResources().getDisplayMetrics().widthPixels * 1 / 2;
        navigationView_main.setLayoutParams(params);

        //设置NavigationView菜单条目的点击监听
        navigationView_main.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_common:
                        Toast.makeText(mContext, "点击了第1个菜单", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_menu:
                        Toast.makeText(mContext, "点击了第2个菜单", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_transform:
                        Toast.makeText(mContext, "点击了第3个菜单", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_qq:
                        Toast.makeText(mContext, "点击了第4个菜单", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_weixin:
                        Toast.makeText(mContext, "点击了第5个菜单", Toast.LENGTH_SHORT).show();
                        break;
                }
                item.setChecked(true);
                //关闭抽屉
                drawerLayout_main.closeDrawer(navigationView_main);
                //或者：drawerLayout.closeDrawers();
                return true;
            }
        });

    }

    //配置ActionBar的home键点击监听
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                //打開左側的抽屜
                if (drawerLayout_main.isDrawerOpen(GravityCompat.START)) {
                    drawerLayout_main.closeDrawer(GravityCompat.START);
                } else {
                    drawerLayout_main.openDrawer(GravityCompat.START);
                }
        }
        return super.onOptionsItemSelected(item);
    }

}

 // 设置导航菜单宽度
        ViewGroup.LayoutParams params = navigationView_main.getLayoutParams();
        params.width = getResources().getDisplayMetrics().widthPixels * 1 / 2;
        navigationView_main.setLayoutParams(params);

这段是得到屏幕的宽，然后得到它的一半，付给navigationView,这样NavigationView的宽度就是屏幕的一半。

navigationView_main.setNavigationItemSelectedListener()

这个是为NavigationView注册监听事件。根据点击的menu id进行判断。

关闭NavigationView有两种。

一种是用DrawerLayout调用closeDrawer(）；NavigationView作为参数。

drawerLayout_main.closeDrawer(navigationView_main);

一种是也是closeDrawers(）;这种不用传递参数。注意看，两种并不一样。

drawerLayout_main.isDrawerOpen(GravityCompat.START)

这个方法是判断NavigationView是否打开。

最后看下效果图：

好了。今天就写到这里。希望大家都能看得明白。

共勉！