Android official finally support Navigation Drawer (navigation drawer) mode

On the day of Google Io, the Android team updated the support library and added several more important features to the support library of the new version (V13).

Adds a drawerlayout control that supports the creation of Navigation drawer mode. Can be set from the left side of the menu or the right side, can also left the menu to exist.
Add Slidingpanelayout controls to support the summary, detail interface modes on various screens. such as Gmail mailing lists and individual mail detail interfaces. When displayed on the phone, the mailing list and the detail interface are two interfaces respectively, and when displayed on the tablet, it is an interface.
Add the Actionbardrawertoggle tool class for easy integration of drawerlayout and ActionBar functions.

Below is a description of how to use the Drawerlayout control to implement a drawer menu
Create drawer Layout

In the interface that requires a drawer menu, use Drawerlayout as the interface root control. In Drawerlayout, the first view is the main content of the current interface, and the second and third view are the contents of the Drawer menu. If the current interface requires only one drawer menu, the third view can be omitted.

In the following example, Drawerlayout contains two view, the first framelayout is the main content display area of the current interface, and the second ListView is the contents of a drawer menu.

<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" >
<!--The main content view-
<framelayout
Android:id= "@+id/content_frame"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"/>
<!--the navigation drawer--
<listview android:id= "@+id/left_drawer"
Android:layout_width= "240DP"
android:layout_height= "Match_parent"
Android:layout_gravity= "Start"
Android:choicemode= "Singlechoice"
Android:divider= "@android: Color/transparent"
android:dividerheight= "0DP"
android:background= "#111"/>
</android.support.v4.widget.DrawerLayout>

There are several points to note in the above code:

The view that displays the main content of the interface (Framelayout above) must be the first child view of Drawerlayout, because the view order in the XML layout file is the z-ordering order in the Android system, and the drawer must appear above the content.
The view width and height of the display interface content is set to the same as the parent view, because the interface content represents the entire interface UI when the drawer menu is not visible.
The drawer menu (above the ListView) must use the Android:layout_gravity property to set the horizontal gravity value. If you want to support Right-to-left (RTL, right-to-left reading) The language uses "start" instead of "left" (when When the RTL language runs, the menu appears on the right side).
The width of the drawer menu is DP units and the height is the same as the parent view. The width of the drawer menu should be no more than 320DP, so that users can see some content interface when the menu is open.

Initializing the Drawer menu

In your activity, you need to initialize the contents of the Drawer menu, depending on your application, the contents of the drawer menu may not be a ListView.

In the example above, we need to set a adapter to the ListView of the menu to provide the data. As shown below:

public class Mainactivity extends Activity {
Private string[] mplanettitles;
Private ListView mdrawerlist;
...

@Override
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);

Mplanettitles = Getresources (). Getstringarray (R.array.planets_array);
Mdrawerlist = (ListView) Findviewbyid (r.id.left_drawer);

Set the adapter for the list view
Mdrawerlist.setadapter (New arrayadapter<string> (This,
R.layout.drawer_list_item, Mplanettitles));
Set the list ' s click Listener
Mdrawerlist.setonitemclicklistener (New Draweritemclicklistener ());

...
}
}

The above code calls the Setonitemclicklistener () function to accept the menu entry click event. Here's how to click on the menu to display the contents of the main interface.
Handling Menu click events

When the user selects an entry in the menu list, the system calls Onitemclicklistener's Onitemclick () function.

Depending on your application, the Onitemclick functions may be implemented differently. In the following example, selecting a menu entry inserts a different Fragment in the program's main interface.

Private class Draweritemclicklistener implements Listview.onitemclicklistener {
@Override
public void Onitemclick (adapterview parent, view view, int position, long ID) {
SelectItem (position);
}
}

/** Swaps fragments in the main content view */
private void SelectItem (int position) {
Create a new fragment and specify the planet to show based on position
Fragment Fragment = new Planetfragment ();
Bundle args = new bundle ();
Args.putint (planetfragment.arg_planet_number, position);
Fragment.setarguments (args);

Insert the fragment by replacing any existing fragment
Fragmentmanager Fragmentmanager = Getfragmentmanager ();
Fragmentmanager.begintransaction ()
. replace (r.id.content_frame, fragment)
. commit ();

Highlight the selected item, update the title, and close the drawer
Mdrawer.setitemchecked (position, true);
Settitle (Mplanettitles[position]);
Mdrawerlayout.closedrawer (Mdrawer);
}

@Override
public void Settitle (charsequence title) {
Mtitle = title;
Getactionbar (). Settitle (Mtitle);
}

Listening Menu Open Close Event

If you need a listener menu to open the Shutdown event, you need to call the Drawerlayout class's Setdrawerlistener () function, which is the implementation of the Drawerlayout.drawerlistener interface. This interface provides callback functions such as ondraweropened () and ondrawerclosed () for events such as menu opening and closing.

If your activity uses the Action bar, you can use the Actionbardrawertoggle class provided by the support library, which implements the Drawerlayout.drawerlistener interface, and you can also override related functions as needed. This class implements the menu and action Bar related actions.

According to the introduction in the Navigation Drawer Design Guide, when the menu is displayed, you should hide the function menu on the Actionbar as appropriate and modify the Actionbar title. The following code shows how to override the related functions of the Actionbardrawertoggle class to implement this functionality.

public class Mainactivity extends Activity {
Private Drawerlayout mdrawerlayout;
Private Actionbardrawertoggle Mdrawertoggle;
Private Charsequence Mdrawertitle;
Private Charsequence Mtitle;
...

@Override
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.activity_main);
...

Mtitle = Mdrawertitle = GetTitle ();
Mdrawerlayout = (drawerlayout) Findviewbyid (r.id.drawer_layout);
Mdrawertoggle = new Actionbardrawertoggle (this, mdrawerlayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

/** called when a drawer have settled in a completely closed state. */
public void ondrawerclosed (view view) {
Getactionbar (). Settitle (Mtitle);
Invalidateoptionsmenu (); Creates call to Onprepareoptionsmenu ()
}

/** called when a drawer have settled in a completely open state. */
public void ondraweropened (View drawerview) {
Getactionbar (). Settitle (Mdrawertitle);
Invalidateoptionsmenu (); Creates call to Onprepareoptionsmenu ()
}
};

Set the drawer toggle as the Drawerlistener
Mdrawerlayout.setdrawerlistener (Mdrawertoggle);
}

/* Called whenever we call Invalidateoptionsmenu () */
@Override
public boolean Onprepareoptionsmenu (Menu menu) {
If The nav drawer is open, hide action items related to the content view
Boolean draweropen = Mdrawerlayout.isdraweropen (mdrawerlist);
Menu.finditem (R.id.action_websearch). setvisible (!draweropen);
return Super.onprepareoptionsmenu (menu);
}
}

Finally, we introduce the functions of the Actionbardrawertoggle class.
Application icon indicating drawer switch

The user can swipe from the edge of the screen to open the drawer menu, and if you use the Action bar, you should let the user open the Drawer menu by tapping the app icon. And the app icon should also use a special icon to indicate the drawer menu. You can use the Actionbardrawertoggle class to implement these features.

To use Actionbardrawertoggle to create the object first through its constructor, the constructor requires the following parameters:

Show the Activity object of the drawer
Drawerlayout Object
A drawable resource used to indicate a drawer.
A text that describes the open drawer (to support accessibility).
A text that describes the closing drawer (to support accessibility).

Whether or not you inherit actionbardrawertoggle to implement the drawer listener, you need to call some of Actionbardrawertoggle's functions in the activity's life cycle function.

As shown below:

public class Mainactivity extends Activity {
Private Drawerlayout mdrawerlayout;
Private Actionbardrawertoggle Mdrawertoggle;
...

public void OnCreate (Bundle savedinstancestate) {
...

Mdrawerlayout = (drawerlayout) Findviewbyid (r.id.drawer_layout);
Mdrawertoggle = new Actionbardrawertoggle (this, mdrawerlayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

/** called when a drawer have settled in a completely closed state. */
public void ondrawerclosed (view view) {
Getactionbar (). Settitle (Mtitle);
}

/** called when a drawer have settled in a completely open state. */
public void ondraweropened (View drawerview) {
Getactionbar (). Settitle (Mdrawertitle);
}
};

Set the drawer toggle as the Drawerlistener
Mdrawerlayout.setdrawerlistener (Mdrawertoggle);

Getactionbar (). Setdisplayhomeasupenabled (True);
Getactionbar (). Sethomebuttonenabled (True);
}

@Override
protected void Onpostcreate (Bundle savedinstancestate) {
Super.onpostcreate (savedinstancestate);
Sync the toggle state after onrestoreinstancestate have occurred.
Mdrawertoggle.syncstate ();
}

@Override
public void onconfigurationchanged (Configuration newconfig) {
Super.onconfigurationchanged (Newconfig);
Mdrawertoggle.onconfigurationchanged (Newconfig);
}

@Override
public boolean onoptionsitemselected (MenuItem item) {
Pass the event to Actionbardrawertoggle, if it returns
True, then it has handled the app icon touch event
if (mdrawertoggle.onoptionsitemselected (item)) {
return true;
}
Handle your other action bar items ...

return super.onoptionsitemselected (item);
}

...
}

Punch me to download the sample project code.



This article from the cloud in the thousand peaks, reproduced when please indicate the source and the corresponding link.

Permanent link to this article: http://blog.chengyunfeng.com/?p=493

Read MORE:HTTP://BLOG.CHENGYUNFENG.COM/?P=493#IXZZ3TTOWZCDO

Android official finally support Navigation Drawer (navigation drawer) mode