Android——MaterialDesign之三NavigationView

1. NavigationView的使用

这里我们来讲讲在Android5.0之后推出的NavigationView的具体使用方式。和普通的侧拉菜单制作方式一样，首先所有的东西还是都放在一个DrawerLayout中。如果对DrawerLayout的用法还不是很了解的。

可以参考我上一篇文章：Android——MaterialDesign之二DrawerLayout

    CircleImageView是实现图片圆形化的功能，我是感觉非常的nice，很好用。具体看下面例子操作。

首先添加库：

Nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_call"
        android:icon="@mipmap/call_1"
        android:title="Call">
    </item>

<item
        android:id="@+id/nav_friend"
        android:icon="@mipmap/friend_1"
        android:title="Friend">
    </item>
    <item
        android:id="@+id/nav_location"
        android:icon="@mipmap/location_1"
        android:title="Location">
    </item>
    <item
        android:id="@+id/nav_mail"
        android:icon="@mipmap/mail_1"
        android:title="Mail">
    </item>
    <item
        android:id="@+id/nav_task"
        android:icon="@mipmap/task_1"
        android:title="Task">
    </item>
</menu>

这里是侧滑的menu包括电话、朋友、位置、邮件、日程。

Nav_header.xml

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

<de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/p4"
        android:layout_centerInParent="true"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mail"
        android:layout_alignParentBottom="true"
        android:textSize="14sp"
        android:textColor="#fff"
        android:text="[email protected]"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/username"
        android:text="Tom Matin"
        android:textSize="14sp"
        android:textColor="#fff"
        android:layout_above="@+id/mail"/>
</RelativeLayout>

详解：这里用到了CircleImageView，src加入图片，自动的会处理图片圆形化

 

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout"
    tools:context="com.example.materialtest_demo2.MainActivity">

<android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        android:id="@+id/nav_view">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

详解：这里侧滑还是用到了上次讲解的DrawerLayout 进行侧滑，而NavigationView代替了上次的TextView，通过 app:menu、app:headerLayout设置属性。

mainActivity.class:

...
//侧滑菜单
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);

navigationView.setCheckedItem(R.id.nav_call);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return true;
    }
});

...

详解：这里获取到navigationView的实例后调用setCheckedItem()方法设置默认Call选项为选中，接着调用设置监听器，进行我们想要的操作，这里就简单的关闭菜单。

实验效果如下：