Android Components--using drawerlayout imitation NetEase news v4.4 side-slip Menu

Reprint please specify the source: http://blog.csdn.net/allen315410/article/details/42914501Overview

Today this blog will record some basic usage of drawerlayout, I think about the use of drawerlayout may have a lot of knowledge, this is more normal things, Because Drawerlayout is the Android component that Google later added to Android, under the ANDROID.SUPPORT.V4 package. So, what is drawerlayout a component? We know that when we use all kinds of apps on Android, do we notice that there is usually a "side-slip Menu" on the app's homepage? About the implementation of the side-by-side menu, I have some introduction in the previous blog, want to know more friends please visit:

Android custom Controls--slide-by menu

Android custom Controls--Open source Component Slidingmenu Project integration

Here with "NetEase News" client v4.4 to explain, this drawerlayout drawer layout is what look like.

Well, we have seen, NetEase news client effect is obvious, when our fingers on the left side of the screen to swipe, there will be a drawer menu from the left pop-up, and is "suspended" on the main interface, reasonable use of the limited space on the device, The same finger on the right side of the screen to the left will also appear a left pop-up drawer menu, the user experience is good, before drawerlayout appear, we need to do a slide-off menu, we have to implement one or use GitHub on the open source project Slidingmenu, Perhaps Google also saw the slidingmenu of the strong, so in the later version of Android added drawerlayout to implement Slidingmenu the same functionality of the components, and in order to be compatible with the earlier version, add it to Android, Support.v4 under the bag.

About the training:http://developer.android.com/training/implementing-navigation/nav-drawer.html of Drawerlayout

About the api:http://developer.android.com/reference/android/support/v4/widget/drawerlayout.html of Drawerlayout

In addition, I have translated the Google training course, the address is: http://blog.csdn.net/allen315410/article/details/42875231

Effect Preview

Create a drawer layout

The following drawer layout refers to the android.support.v4.DrawerLayout, similar to the layout of linealayout, relativelayout and so on, defined in the Drawerlayout, 3 layout, Is the management of the main interface framelayout, this layout is used to show the interface switch fragment, below is the ListView, to show the menu list, and finally a relativelayout, to show the right layout, layout code is as follows:

<android.support.v4.widget.drawerlayout xmlns:android= "Http://schemas.android.com/apk/res/android" Android:id = "@+id/drawer_layout" android:layout_width= "match_parent" android:layout_height= "match_parent" > <FrameLayo UT android:id= "@+id/content_frame" android:layout_width= "match_parent" android:layout_height= "match_p Arent "/> <listview android:id=" @+id/left_drawer "android:layout_width=" 200DP "android:layou t_height= "Match_parent" android:layout_gravity= "Start" android:background= "#111" android:choicemode= " Singlechoice "android:divider=" @android: Color/transparent "android:dividerheight=" 0DP "/> <relative Layout android:id= "@+id/right_drawer" android:layout_width= "220DP" android:layout_height= "Match_paren        T "android:layout_gravity=" End "android:background=" #111 "android:gravity=" Center_horizontal "> <textview anDroid:layout_width= "Wrap_content" android:layout_height= "wrap_content" android:text= "This is the right column" Android:textcolor= "@android: Color/white" android:textsize= "24sp"/> </relativelayout></androi D.support.v4.widget.drawerlayout>

This layout file demonstrates some important layout features.

• The primary content view (Framelayout) must be the first child element of Drawlayout, because the navigation drawer is above the main content view.
• The primary content view is set to match the width and height of the parent view because it represents the entire interface where the navigation drawer is hidden.
• The drawer view (ListView) must specify its horizontal gravity with the Android:layout_gravity property. Supports right-to-left (RTL) languages, specifying values with "Start" instead of "left" (so the drawer appears on the right side of the layout when the layout is RTL). Here the ListView is set to the left column menu, so the Android:layout_gravity property is set to " Start, set Relativelayout to the right column, and set the Android:layout_gravity property to "end".
• The drawer view specifies its width to match the parent view with DP units and heights. The width of the drawer cannot exceed the size of the. DP, so users can always see part of the main content view.

Initialize the list of drawers

As mentioned above, because Drawerlayout contains a ListView as the left sidebar side-slip menu, so we need to first initialize the list of drawers, and for this list to fit the data, the data adapter is using the simplest arrayadapter, The simulation data is simply defined in the Res/values/strings.xml, as follows:

<string-array name= "Menu_array" >        <item>menu 1</item> <item>menu        2</item>        <item>menu 3</item>        <item>menu 4</item> </string-array>

In Java code, you first create a mainactivity that inherits the Android.support.v4.app.FragmentActivity, because the next step is to switch between fragment.

protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview ( R.layout.activity_main);        ...//Initialize menu list mmenutitles = Getresources (). Getstringarray (R.array.menu_array); Mmenulistview.setadapter (new Arrayadapter<string> (This, R.layout.drawer_list_item, mmenutitles)); Mmenulistview.setonitemclicklistener ( New Draweritemclicklistener ());        ......}

Handling Navigation Click events

When the user selects an item in the drawer list, the system calls Onitemclick () on Onitemclicklistener, giving Setonitemclicklistener () what you do in the Onitemclick () method, In the example below, selecting each item will insert a different fragment in the layout of the main content. and pass the contents of the navigation list to fragment, and here's some code:

/** * Item Click event on ListView * */private class Draweritemclicklistener implements Listview.onitemclicklistener {@ overridepublic void Onitemclick (adapterview<?> parent, view view, int position, long id) {SelectItem (position);}} /** * Toggle Main View Area Fragment * * @param position */private void SelectItem (int position) {//TODO auto-generated method Stubfra Gment fragment = new Contentfragment (); Bundle args = new bundle (), switch (position) {case 0:args.putstring ("key", Mmenutitles[position]); Break;case 1: Args.putstring ("Key", Mmenutitles[position]); Break;case 2:args.putstring ("Key", Mmenutitles[position]); break;case 3:args.putstring ("Key", Mmenutitles[position]); break;default:break;} Fragment.setarguments (args); Fragmentactivity passes the menu list title of the Click to Fragmentfragmentmanager Fragmentmanager = Getsupportfragmentmanager (); Fragmentmanager.begintransaction (). replace (R.id.content_frame, fragment). commit ();//Update the selected item and title, Then close the menu mmenulistview.setitemchecked (position, true); Settitle (Mmenutitles[position]); mDrawerlayout.closedrawer (Mmenulistview);} 

Integration of Open Source Material-menu

Careful friends may find that "NetEase News" v4.4 the upper left corner of the client page has a menu "dynamic" menu button, the display process is this, when the menu is not open, display "three" such as three horizontal lines, when the menu opens (regardless of the left and right menu), will display "<-" button, constantly change , this effect is not a little gorgeous ah?! Know Android5.0 friends, should know that this effect is the use of Android5.0 new material design language made out of the effect, then how to imitate this effect? I'm sorry, because I'm lazy, I've found such an effect in the cattle and cattle GitHub--material-menu component, which simulates the material design effect under Android5.0, Note that the Jackwharton nineoldandroids animation effect is used in the component.

Material-menu Home: Https://github.com/balysv/material-menu

Nineoldandroids Home: Https://github.com/JakeWharton/NineOldAndroids

The use of Material-menu can be referenced in the demo and instructions on its home page, and the integration needs to be downloaded Nineoldandroids export jar integrated into the project. Here are some of the code I used:

protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (        R.layout.activity_main); ...//When the drawer is open, the main content area is covered by a custom shadow Mdrawerlayout.setdrawershadow (R.drawable.drawer_shadow, Gravitycompat.start);// Set Actionbar visible, and toggle menu and Content View Getactionbar (). Setdisplayhomeasupenabled (True); Getactionbar (). sethomebuttonenabled ( true); Mmaterialmenuicon = new Materialmenuicon (this, color.white, Stroke.thin); Mdrawerlayout.setdrawerlistener (new Drawerlayout.simpledrawerlistener () {@Overridepublic void Ondrawerslide (View drawerview, float slideoffset) {ShowView = Drawerview;if (Drawerview = = Mmenulistview) {Mmaterialmenuicon.settransformationoffset ( MaterialMenuDrawable.AnimationState.BURGER_ARROW, Isdirection_left? 2-slideoffset:slideoffset);} else if (Drawerview = = Right_drawer) {Mmaterialmenuicon.settransformationoffset ( MaterialMenuDrawable.AnimationState.BURGER_ARROW, Isdirection_right? 2-slideoffset:slideoffset);}} @Overridepublic void ondraweropened (AndroId.view.View Drawerview) {if (Drawerview = = Mmenulistview) {Isdirection_left = true;} else if (Drawerview = = right_drawer) {isdirection_right = true;}} @Overridepublic void ondrawerclosed (Android.view.View drawerview) {if (Drawerview = = Mmenulistview) {Isdirection_left = false;}        else if (Drawerview = = right_drawer) {isdirection_right = False;showview = Mmenulistview;}}); ......}

In addition, it is necessary to correlate the state of the Meterial-menu to cover the Onpostcreate and Onsaveinstancestate methods under activity:

/*** restores the corresponding icon state*/@Overrideprotected void Onpostcreate (Bundle savedinstancestate) According to the state of the onpostcreate callback { Super.onpostcreate (savedinstancestate); mmaterialmenuicon.syncstate (savedinstancestate);} /*** saves the current icon state*/@Overrideprotected void Onsaveinstancestate (Bundle outstate) According to the state of the onsaveinstancestate callback { Mmaterialmenuicon.onsaveinstancestate (outstate); super.onsaveinstancestate (outstate);}

Add a menu button on a actionbar

In order to try to simulate the "NetEase news" v4.4 Client Home page, I also add a small icon in the upper right corner of the title bar, in order to be able to click on this small icon to pop up the right side of the menu, the implementation is very simple, about the Actionbar on the addition of navigation knowledge can be found on the csdn of some explanations or on the Android developer official website to view the source document, I Es/menu under Main.xml This defines a:

<menu xmlns:android= "Http://schemas.android.com/apk/res/android" >    <item        android:id= "@+id/ Action_personal "        android:icon=" @drawable/action_personal "        android:orderincategory="        android: Showasaction= "Always"        android:title= "@string/action_personal"/></menu>

After you finish defining the operation, you need to load the menu layout:

/*** Load Menu */@Overridepublic Boolean Oncreateoptionsmenu (Menu menu) {//Inflate the menu; This adds items to the action Bar If it is present.getmenuinflater (). Inflate (R.menu.main, menu); return true;}

Title bar Navigation Click event Handling

/*** click on the Actionbar menu */@Overridepublic Boolean onoptionsitemselected (MenuItem item) {int id = item.getitemid (); switch (ID) {case android. R.id.home:if (ShowView = = Mmenulistview) {if (!isdirection_left) {////Left column menu closes, open Mdrawerlayout.opendrawer ( Mmenulistview);} else {//Left column menu opens, close Mdrawerlayout.closedrawer (Mmenulistview);}} else if (ShowView = = Right_drawer) {if (!isdirection_right) {////Right column is closed, Mdrawerlayout.opendrawer (Right_drawer) is turned on;} else { When the right column is open, close mdrawerlayout.closedrawer (Right_drawer);}} Break;case R.id.action_personal:if (!isdirection_right) {///right bar closed, open if (ShowView = = Mmenulistview) { Mdrawerlayout.closedrawer (Mmenulistview);} Mdrawerlayout.opendrawer (right_drawer);} else {//Right column opens, close Mdrawerlayout.closedrawer (right_drawer);} Break;default:break;} return super.onoptionsitemselected (item);} 

This logic is a little bit around, in fact I do this, I need to ensure that the main interface can only display a maximum menu layout, when the left menu layout is displayed, when the right menu layout is open, you need to hide the left menu layout, as well, if the right menu layout is already on display, you need to open the left menu layout, You must first hide the menu layout on the right. To determine which layout is currently being displayed or closed, I have defined in the global variable ShowView to mark the view that is currently about to be displayed or closed, and if Showview==mmenulistview, the left menu layout is about to be displayed or hidden, At this point, the menu is further judged whether the view Mmenulistview is already displayed as a marker isdirection_left to open or close the left View menu.
Similarly, if the right navigation menu is currently being displayed or hidden, we need to further determine whether the right-hand navigation is already displayed, so that the relevant open or hidden decisions are made.

The logic here seems to explain a bit messy, and the code is divided into fragments posted out, not conducive to understanding, need to further understand the words, may wish to continue to look at the following section, I have posted the Java code, comments are also very detailed, can be easily understood, it is not, you can click the download link below the blog, Directly download the source code to run a bit.

All source code

public class Mainactivity extends Fragmentactivity {/** drawerlayout */private drawerlayout mdrawerlayout;/** left column menu */pri Vate ListView mmenulistview;/** right column */private relativelayout right_drawer;/** menu list */private string[] mMenuTitles;/** Mat Erial design Style */private materialmenuicon mmaterialmenuicon;/** menu on/off status */private boolean isdirection_left = false;/** Right bar on/off status */private boolean isdirection_right = False;private View showview; @Overrideprotected void OnCreate (Bundle Savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (r.layout.activity_main); mDrawerLayout = ( Drawerlayout) Findviewbyid (r.id.drawer_layout); Mmenulistview = (ListView) Findviewbyid (r.id.left_drawer); right_ Drawer = (relativelayout) Findviewbyid (r.id.right_drawer); this.showview = mmenulistview;//Initialize Menu list mmenutitles = Getresources (). Getstringarray (R.array.menu_array); Mmenulistview.setadapter (New arrayadapter<string> (This, R.layout.drawer_list_item, Mmenutitles)); mmenulistview.setonitemclicklisteNER (New Draweritemclicklistener ());//When the drawer is open, the main content area is covered by a custom shadow Mdrawerlayout.setdrawershadow (R.drawable.drawer_ Shadow,gravitycompat.start)///set Actionbar visible, and toggle menu and Content View Getactionbar (). Setdisplayhomeasupenabled (True); Getactionbar (). Sethomebuttonenabled (true); Mmaterialmenuicon = new Materialmenuicon (this, color.white, Stroke.THIN); Mdrawerlayout.setdrawerlistener (New Drawerlayoutstatelistener ()); if (savedinstancestate = = null) {selectitem (0);}} /** * Item Click event on ListView * */private class Draweritemclicklistener Implementslistview.onitemclicklistener {@ overridepublic void Onitemclick (adapterview<?> parent, view view, int Position,long id) {SelectItem (position);}} /** * drawerlayout Status change monitor */private class Drawerlayoutstatelistener Extendsdrawerlayout.simpledrawerlistener {/** * When the navigation menu is sliding, it is executed */@Overridepublic void Ondrawerslide (View drawerview, float slideoffset) {ShowView = Drawerview;if ( Drawerview = = Mmenulistview) {//According to Isdirection_left decision to perform animation Mmaterialmenuicon.settransformationoffset (MateriAlmenudrawable.animationstate.burger_arrow,isdirection_left? 2-slideoffset:slideoffset);} else if (Drawerview = = Right_drawer) {//Based on Isdirection_right decision to perform animation Mmaterialmenuicon.settransformationoffset ( Materialmenudrawable.animationstate.burger_arrow,isdirection_right? 2-slideoffset:slideoffset);}} /** * When the navigation menu is open */@Overridepublic void ondraweropened (Android.view.View drawerview) {if (Drawerview = = Mmenulistview) {i Sdirection_left = true;} else if (Drawerview = = right_drawer) {isdirection_right = true;}} /** * When the navigation menu is closed */@Overridepublic void ondrawerclosed (Android.view.View drawerview) {if (Drawerview = = Mmenulistview) {i Sdirection_left = false;} else if (Drawerview = = right_drawer) {isdirection_right = False;showview = Mmenulistview;}}} /** * Toggle Main View Area Fragment * * @param position */private void SelectItem (int position) {Fragment Fragment = new Contentfragme NT (); Bundle args = new bundle (), switch (position) {case 0:args.putstring ("key", Mmenutitles[position]); Break;case 1:args.puTstring ("Key", Mmenutitles[position]); Break;case 2:args.putstring ("Key", Mmenutitles[position]); Break;case 3: Args.putstring ("Key", Mmenutitles[position]); break;default:break;} Fragment.setarguments (args); Fragmentactivity passes the menu list title of the Click to Fragmentfragmentmanager Fragmentmanager = Getsupportfragmentmanager (); Fragmentmanager.begintransaction (). replace (R.id.content_frame, fragment). commit ();//Update the selected item and title, Then close menu mmenulistview.setitemchecked (position, true); Settitle (Mmenutitles[position]); Mdrawerlayout.closedrawer ( Mmenulistview);} /** * Click on actionbar menu */@Overridepublic boolean onoptionsitemselected (MenuItem item) {int id = item.getitemid (); switch (ID ) {case Android. R.id.home:if (ShowView = = Mmenulistview) {if (!isdirection_left) {////Left column menu closes, open Mdrawerlayout.opendrawer ( Mmenulistview);} else {//Left column menu opens, close Mdrawerlayout.closedrawer (Mmenulistview);}} else if (ShowView = = Right_drawer) {if (!isdirection_right) {////Right column is closed, Mdrawerlayout.opendrawer (Right_drawer) is turned on;} else { When the right column is open, close MdrawerlayoUt.closedrawer (Right_drawer);}} Break;case R.id.action_personal:if (!isdirection_right) {///right bar closed, open if (ShowView = = Mmenulistview) { Mdrawerlayout.closedrawer (Mmenulistview);} Mdrawerlayout.opendrawer (right_drawer);} else {//Right column opens, close Mdrawerlayout.closedrawer (right_drawer);} Break;default:break;} return super.onoptionsitemselected (item);} /** * Restore the corresponding icon state */@Overrideprotected void onpostcreate (Bundle savedinstancestate) according to the status of the onpostcreate callback { Super.onpostcreate (savedinstancestate); mmaterialmenuicon.syncstate (savedinstancestate);} /** * Save the current icon state */@Overrideprotected void onsaveinstancestate (Bundle outstate) according to the status of the onsaveinstancestate callback { Mmaterialmenuicon.onsaveinstancestate (outstate); super.onsaveinstancestate (outstate);} /** * Load Menu */@Overridepublic Boolean Oncreateoptionsmenu (Menu menu) {//Inflate the menu; This adds items to the action Ba R if it is Present.getmenuinflater (). Inflate (R.menu.main, menu); return true;}}

Please download the source code here

Android Components--using drawerlayout imitation NetEase news v4.4 side-slip Menu