Navigation menus are made in various ways, and there are various ways to achieve cool effects on the Internet. So today I want to talk about the specific use of Navigation View launched by Google after Android 5.0.

Navigation View has been seen on many App s. It is known in China (the part that slides out of the side-pull menu belongs to Navigation View). Here is the following picture:

And Google's own app s, which basically all use Navigation View, are Gmail, Google Map and Google Play as follows:

OK, after looking at the picture, let's talk about the Navigation View.

1. What is Navigation View?

Long ago, when we make the drawer menu, the layout of the part sliding out on the left is defined by ourselves. If we write it by ourselves, it takes time to make a nice side-pull menu, but it always takes time. So Google launched NavitationView after 5.0, which is the menu sliding out on the left. The menu is divided into two parts as a whole. The top part is called Header Layout, and the clicks below are menu. This effect can be written if we want to write it by ourselves, but it is not necessary. Now that Google provides this control, let's see how to use it.

2. How to use Navigation View

Like the normal way of making side-pull menus, first of all, everything is in a Drawer Layout (if you are not familiar with Drawer Layout, please refer to this article). Using Drawer Layout to Realize Side-pull Menu But this time we're replacing the layout of the left slider menu with a Navigation View, code as follows:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.v4.widget.DrawerLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"  
4.     xmlns:app="http://schemas.android.com/apk/res-auto"  
5.     xmlns:tools="http://schemas.android.com/tools"  
6.     android:layout_width="match_parent"  
7.     android:layout_height="match_parent"  
8.     tools:context="org.mobiletrain.drawerlayout.MainActivity">  
9.   
10.     <LinearLayout  
11.         android:layout_width="match_parent"  
12.         android:layout_height="match_parent"  
13.         android:orientation="vertical">  
14.   
15.         <TextView  
16.             android:layout_width="wrap_content"  
17.             android:layout_height="wrap_content"  
18.             android:text="Main page"/>  
19.     </LinearLayout>  
20.   
21.     <android.support.design.widget.NavigationView  
22.         android:id="@+id/navigation_view"  
23.         android:layout_width="wrap_content"  
24.         android:layout_height="match_parent"  
25.         android:layout_gravity="left"  
26.         android:fitsSystemWindows="true"  
27.         app:headerLayout="@layout/header_layout"  
28.         app:menu="@menu/main"></android.support.design.widget.NavigationView>  
29. </android.support.v4.widget.DrawerLayout>  

OK, let me explain the meaning of several attributes here.

1.Android The layout_gravity="left" attribute indicates that the View is a sliding menu on the left. The meaning of this attribute is needless to say. This is the knowledge point in DrawerLayout's usage.

2.app:headerLayout="@layout/header_layout" means referring to a header layout file, which is the background image we saw above, including the control that displays the user name on the background image, and so on.

3.app:menu="@menu/main" means referring to a menu as the following click item

OK, let's look at the header layout file again.

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.               android:layout_width="match_parent"  
4.               android:layout_height="200dp"  
5.               android:orientation="vertical">  
6.   
7.     <ImageView  
8.         android:id="@+id/iv"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:scaleType="centerCrop"  
12.         android:src="@drawable/p1"/>  
13. </LinearLayout>  

Look at the menu file again:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <menu xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item  
4.         android:id="@+id/favorite"  
5.         android:icon="@mipmap/ic_launcher"  
6.         android:title="Collection"/>  
7.     <item  
8.         android:id="@+id/wallet"  
9.         android:icon="@mipmap/ic_launcher"  
10.         android:title="wallet"/>  
11.     <item  
12.         android:id="@+id/photo"  
13.         android:icon="@mipmap/ic_launcher"  
14.         android:title="Album"/>  
15.     <item  
16.         android:id="@+id/file"  
17.         android:icon="@mipmap/ic_launcher"  
18.         android:title="file"/>  
19. </menu>  

OK, run to see the effect:

OK, it's already shown, but there's a problem. The pictures are grey. How to break them? There are two ways:

1. Add the attribute app:itemIconTint="@color/blue" in the layout file to indicate that the color of the set picture is all blue. The effect is as follows:

2. The first solution will let all the pictures show in one color. What if I want the picture to show its own color? stay Java The following method is called in the code:

1. NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);  
2.         navigationView.setItemIconTintList(null);  

The results are as follows:

This is normal.

There are also two commonly used API s:

1. app: itemBackground="@color/color Accent" sets the background color of each item

2.app:itemTextColor="" Sets the background color of item

OK, what if I want to add a separator between Navigation View items? Simply put the item into a group in menu and give it an id. The code is as follows:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <menu xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <group android:id="@+id/g1">  
4.         <item  
5.             android:id="@+id/favorite"  
6.             android:icon="@mipmap/ic_launcher"  
7.             android:title="Collection"/>  
8.         <item  
9.             android:id="@+id/wallet"  
10.             android:icon="@mipmap/ic_launcher"  
11.             android:title="wallet"/>  
12.     </group>  
13.     <group android:id="@+id/g2">  
14.         <item  
15.             android:id="@+id/photo"  
16.             android:icon="@mipmap/ic_launcher"  
17.             android:title="Album"/>  
18.     </group>  
19.     <item  
20.         android:id="@+id/file"  
21.         android:icon="@mipmap/ic_launcher"  
22.         android:title="file"/>  
23. </menu>  

The results are as follows:

OK, the splitting line has been added successfully.

Next, let's look at how to handle event listening in Navigation View.

The event handling in Navigation View is mainly two aspects, one is the click event in the head, and the other is the click event in itemView. Let's take a look at them separately.

1. Head Click Event

To deal with the header click event, we need to get the header control first. In Java code, we can get the header control in the following way.

1. //Get the header layout file  
2.         View headerView = navigationView.getHeaderView(0);  

Then, by calling the findViewById method in headerView, we can find the control of the header and set the click event.

2.item Click Events

1. navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {  
2.     @Override  
3.     public boolean onNavigationItemSelected(MenuItem item) {  
4.         //Processing item click events here  
5.         return true;  
6.     }  
7. });  

OK, that's all about the use of the basic Navigation View. Welcome to contact us if you have any questions.

Above.