Android uses Navigationview to implement drawer menu interface

Navigationview is very important in MD design, before Google also proposed using Drawerlayout to implement the navigation drawer. This time, in the Android Design Support Library, Google provided the Navigationview to implement the navigation menu interface.

This time we wrote the code in Android with Tablayout to achieve similar netease tab dynamic sliding effect this article code based on the revision, so it is better to first look at the above article

The first is still the configuration build.gradle:

dependencies {    compile fileTree(dir‘libs‘, include: [‘*.jar‘])    ‘com.android.support:appcompat-v7:22.2.0‘    ‘com.android.support:design:22.2.0‘    ‘com.android.support:recyclerview-v7:22.2.0‘    ‘com.android.support:cardview-v7:22.2.0‘}

' com.android.support:design:22.2.0 ' com.android.support:design:22.2.0 is the Android design support Library We need to introduce, Second, we also introduced Recyclerview and CardView.

Main interface Layout (activity_tab_layout.xml)

<?xml version="1.0"encoding="Utf-8"? ><android. Support. V4. Widgets. DrawerlayoutAndroid:id="@+id/dl_main_drawer"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"Android:fitssystemwindows="true"><linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"xmlns:tools="Http://schemas.android.com/tools"xmlns:app="Http://schemas.android.com/apk/res-auto"Android:layout_width="Match_parent"android:layout_height="Match_parent"tools:context=". Tablayoutactivity "android:orientation="Vertical"> <android. Support. Design. Widgets. AppbarlayoutAndroid:id="@+id/appbar"Android:layout_width="Match_parent"android:layout_height="Wrap_content"Android:theme="@style/themeoverlay.appcompat.dark.actionbar"> <android. Support. V7. Widgets. ToolbarAndroid:id="@+id/toolbar"Android:layout_width="Match_parent"android:layout_height="? Attr/actionbarsize"app:layout_scrollflags="Scroll|enteralways"App:popuptheme="@style/themeoverlay.appcompat.light"/> <android. Support. Design. Widgets. TablayoutAndroid:id="@+id/tabs"Android:layout_width="Match_parent"android:layout_height="Wrap_content"App:tabindicatorcolor="#ADBE107E"App:tabmode="Scrollable"/> </android. Support. Design. Widgets. Appbarlayout> <android. Support. V4. View. ViewpagerAndroid:id="@+id/viewpager"Android:layout_width="Match_parent"android:layout_height="Match_parent"App:layout_behavior="@string/appbar_scrolling_view_behavior"/></linearlayout> <android. Support. Design. Widgets. NavigationviewAndroid:id="@+id/nv_main_navigation"Android:layout_width="Wrap_content"android:layout_height="Match_parent"android:layout_gravity="Start"app:headerlayout="@layout/navigation_header"app:menu="@menu/drawer_view"/></android. Support. V4. Widgets. Drawerlayout>

The drawerlayout tag contains the layout of the main interface and the layout of the drawer, and the Navigationview tag app:headerlayout= "" can be introduced into the header file
App:menu= "" introduces the layout of the menu.

Head layout file (navigation_header.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  =" 150DP " andr Oid:background  = "Attr/colorprimarydark"  a Ndroid:orientation  = "horizontal"  android:t heme  = "@style/themeoverlay.appcompat.dark" ;     <imageview  android: Layout_width  = "100DP"  android:layout_height< /span>= "100DP"  android:layout_gravity  = "center_vertical"  android:layout_marginleft  = "50DP"  android:background  =  "@drawable/ic_user" />     <TextViewandroid:layout_width="Wrap_content"android:layout_height= "Wrap_content" android:layout_marginleft="10DP"android:layout_gravity="Center_vertical" Android:text="Liuwangshu"android:textappearance="@style/ TextAppearance.AppCompat.Body1 "android:textsize=" 20sp "/>                                                        </linearlayout>

Menu layout file (drawer_view.xml)

<?xml version= "1.0" encoding= "Utf-8"?><menu xmlns:android="Http://schemas.android.com/apk/res/android">    <group android:checkablebehavior="single">        <itemandroid:id="@+id/nav_home"android:icon="@drawable /ic_dashboard "android:title=" Home "/>                                            <itemandroid:id="@+id/nav_messages"android:icon="@drawable/ic_ Event "android:title=" matter "/>                                            <itemandroid:id= "@+id/nav_friends"android:icon="@ Drawable/ic_headset "android:title=" Music "/>                                            <itemandroid:id="@+id/nav_discussion"android:icon="@drawable/ic _forum "android:title=" message "/>                                        </Group>    <item android:title="Other">        <menu>            <itemandroid:icon="@drawable/ic_dashboard"android:title="Settings" />                                            <itemandroid:icon= "@drawable/ic_dashboard"android:title=" About Us "/>                                        </Menu>    </Item></Menu>

Take a look at the Java code of the main interface (Tablayoutactivity.java)

Packagecom. Example. Liuwangshu. Mytablayout;Import Android. Support. Design. Widgets. Navigationview;Import Android. Support. Design. Widgets. Tablayout;Import Android. Support. V4. App. Fragment;Import Android. Support. V4. View. Gravitycompat;Import Android. Support. V4. View. Viewpager;Import Android. Support. V4. Widgets. Drawerlayout;Import Android. Support. V7. App. ActionBar;Import Android. Support. V7. App. Appcompatactivity;Import Android. OS. Bundle;Import Android. Support. V7. Widgets. Toolbar;Import Android. View. Menu;Import Android. View. MenuItem;Import Java. Util. ArrayList;Import Java. Util. List;public class Tablayoutactivity extends Appcompatactivity {private Drawerlayout mdrawerlayout;Private Viewpager Mviewpager;Private Tablayout Mtablayout;@Override protected void OnCreate (Bundle savedinstancestate) {Super. OnCreate(savedinstancestate);Setcontentview (R. Layout. Activity_tab_layout);Toolbar Toolbar = (Toolbar) Findviewbyid (R. ID. Toolbar);Setsupportactionbar (Toolbar);Final ActionBar ab = Getsupportactionbar ();Ab. Sethomeasupindicator(R. drawable. IC_menu);Ab. setdisplayhomeasupenabled(true);Mviewpager = (Viewpager) Findviewbyid (R. ID. Viewpager);Mdrawerlayout = (drawerlayout) Findviewbyid (R. ID. DL_main_drawer);Navigationview Navigationview = (navigationview) Findviewbyid (R. ID. NV_main_navigation);if (Navigationview! = null) {Navigationview. Setnavigationitemselectedlistener(New Navigationview. Onnavigationitemselectedlistener() {@Override public boolean onnavigationitemselected (MenuItem MenuItem) { MenuItem. setchecked(true);Mdrawerlayout. Closedrawers();return True;}                    });} initviewpager ();}

Navigationview.setnavigationitemselectedlistener listens to the menu entry and, if clicked, sets the entry to the selected state and retracts the drawer. Of course, don't forget to listen to the toolbar menu options, otherwise the drawer will not come out.
(Tablayoutactivity.java)

  @Override    publicbooleanonOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case android.R.id.home:                mDrawerLayout.openDrawer(GravityCompat.START);                returntrue;        }        returnsuper.onOptionsItemSelected(item);    }

Finally run the program to see the effect

GitHub Source Download

Android uses Navigationview to implement the Drawer menu interface