Android Design Support Library (ii) Implement Drawer menu interface with Navigationview

Navigationview is important in MD design, and Google has previously proposed using Drawerlayout to implement navigation drawers.

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 changes, so it is best to 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 tab includes the layout of the main interface and the layout of the drawer. Navigationview tag app:headerlayout= "" To introduce header files
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. If clicked, set the entry to the selected state and retract 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 execute the program to see the effect

GitHub Source code Download

Android Design Support Library (ii) Implement Drawer menu interface with Navigationview