Navigation menu implementation for Android drawer effect

Navigation menu for drawer effect

See a lot of applications, feel this slide-off drawer effect of the menu is very good.

You don't have to switch to another page, you don't have to press the hardware button on the menu, you just click on the button on the interface, the menu slides out, and you feel like you can put a lot of things.

On the implementation, search for a bit, like the following two kinds:

　　1. Using Slidingdrawer:

Http://developer.android.com/reference/android/widget/SlidingDrawer.html

But don't know why this kind of official does not recommend to continue to use:

　　Deprecated since API level

　　2. Using drawerlayout:

Http://developer.android.com/reference/android/support/v4/widget/DrawerLayout.html

Guide is here:

Http://developer.android.com/training/implementing-navigation/nav-drawer.html

References to libraries

First of all, drawerlayout This class is in the support library, need to add Android-support-v4.jar this package.

The import android.support.v4.widget.DrawerLayout is then imported in the program.

If this class is not found, first update the Android support Library with SDK Manager and then on Android sdk\extras\android\support\ Under the V4 path, locate Android-support-v4.jar, copy the Libs path to the project, and add it to Build path.

Code 1

Layout:

<Relativelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent" > <Android.support.v4.widget.DrawerLayoutxmlns: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 - <!--main content must be the first element of Drawerlayout because it'll be drawn first and drawer must is on top of it  - <FramelayoutAndroid:id= "@+id/content_frame"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent" /> <!--The navigation drawer - <ListViewAndroid:id= "@+id/left_drawer"Android:layout_width= "240DP"Android:layout_height= "Match_parent"android:layout_gravity= "Left"Android:background= "#111"Android:choicemode= "Singlechoice"Android:divider= "@android: Color/transparent"Android:dividerheight= "0DP" /> </Android.support.v4.widget.DrawerLayout> </Relativelayout>

The first child element of Drawerlayout is the main content, which is the layout shown when the drawer is not open. A framelayout is used here, and nothing is left.

The second element of the drawerlayout is the contents of the drawer, the drawer layout, where a ListView is used.

Main activity (stripped from the official example):

 PackageCom.example.hellodrawer;ImportAndroid.os.Bundle;Importandroid.app.Activity;ImportAndroid.content.res.Configuration;ImportAndroid.view.MenuItem;ImportAndroid.view.View;ImportAndroid.widget.AdapterView;ImportAndroid.widget.AdapterView.OnItemClickListener;ImportAndroid.widget.ArrayAdapter;ImportAndroid.widget.ListView;ImportAndroid.support.v4.app.ActionBarDrawerToggle;ImportAndroid.support.v4.view.GravityCompat;ImportAndroid.support.v4.widget.DrawerLayout; Public classHellodraweractivityextendsactivity{PrivateString[] Mplanettitles;PrivateDrawerlayout mdrawerlayout;PrivateActionbardrawertoggle Mdrawertoggle;PrivateListView mdrawerlist; @Override Public voidOnCreate (Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_hello_drawer); Mdrawerlayout = (drawerlayout) Findviewbyid (r.id.drawer_layout);//init the ListView and Adapter, nothing newInitlistview ();//set a custom shadow that overlays the main content when the drawer//opensMdrawerlayout.setdrawershadow (R.drawable.drawer_shadow, Gravitycompat.start); Mdrawertoggle =NewActionbardrawertoggle ( 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 voidondrawerclosed (view view) {Invalidateoptionsmenu ();//creates call to//Onprepareoptionsmenu ()}/**called when a drawer have settled in a completely open state.*/  Public voidondraweropened (View drawerview) {invalidateoptionsmenu ();//creates call to//Onprepareoptionsmenu ()}        };//Set the drawer toggle as the DrawerlistenerMdrawerlayout.setdrawerlistener (Mdrawertoggle);//enable ActionBar app icon to behave as action to toggle nav drawerGetactionbar (). setdisplayhomeasupenabled (true);//Getactionbar (). Sethomebuttonenabled (true);//Note:getactionbar () Added in API level One}Private voidInitlistview () {mdrawerlist = (ListView) Findviewbyid (r.id.left_drawer); Mplanettitles = Getresources (). Getstringarray (R.array.planets_array);//Set The adapter for the list viewMdrawerlist.setadapter (NewArrayadapter<string> ( This, R.layout.list_item, mplanettitles));//Set The list ' s click ListenerMdrawerlist.setonitemclicklistener (NewOnitemclicklistener () {@Override Public voidOnitemclick (adapterview<?> Parent, view view,intPositionLongID) {//Highlight The selected item, update the title, and close the//Drawermdrawerlist.setitemchecked (Position,true);                Settitle (Mplanettitles[position]);            Mdrawerlayout.closedrawer (mdrawerlist);    }        }); } @Overrideprotected voidOnpostcreate (Bundle savedinstancestate) {Super. Onpostcreate (Savedinstancestate);//Sync the toggle state after onrestoreinstancestate have occurred.Mdrawertoggle.syncstate (); } @Override Public voidOnconfigurationchanged (Configuration newconfig) {Super. onconfigurationchanged (Newconfig);    Mdrawertoggle.onconfigurationchanged (Newconfig); } @Override Public BooleanOnoptionsitemselected (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); }}

The more tangled is the use of a level 11 API, so minsdkversion there is a limit, not too low.

Photo Resources Android Official website sample is available for download.

After the program runs the following effects:

Drawer before opening:

After opening the drawer:

Code 2

Today, I looked at the class of drawerlayout and found that there are many ways to use it directly.

Try again, in fact, do not have the above trouble, feel free to define a button control drawer open on the line:

Layout:

<Relativelayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Xmlns:tools= "Http://schemas.android.com/tools"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent"Android:paddingbottom= "@dimen/activity_vertical_margin"Android:paddingleft= "@dimen/activity_horizontal_margin"Android:paddingright= "@dimen/activity_horizontal_margin"Android:paddingtop= "@dimen/activity_vertical_margin"Tools:context=". Draweractivity " > <Android.support.v4.widget.DrawerLayoutAndroid:id= "@+id/drawer_layout"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent" > <!--The main content view - <FramelayoutAndroid:id= "@+id/content_frame"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent" > <ButtonAndroid:id= "@+id/btn"Android:layout_width= "Match_parent"Android:layout_height= "Wrap_content"Android:text= "Open" /> </Framelayout> <!--The navigation drawer - <ListViewAndroid:id= "@+id/left_drawer"Android:layout_width= "240DP"Android:layout_height= "Match_parent"android:layout_gravity= "Start"Android:background= "#111"Android:choicemode= "Singlechoice"Android:divider= "@android: Color/transparent"Android:dividerheight= "0DP" /> </Android.support.v4.widget.DrawerLayout> </Relativelayout>

Main code:

 PackageCom.example.hellodrawer;ImportAndroid.os.Bundle;Importandroid.app.Activity;ImportAndroid.support.v4.widget.DrawerLayout;Importandroid.view.Gravity;ImportAndroid.view.View;ImportAndroid.view.View.OnClickListener;ImportAndroid.widget.Button; Public classDraweractivityextendsactivity{PrivateDrawerlayout mdrawerlayout =NULL; @Overrideprotected voidOnCreate (Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_drawer);        Mdrawerlayout = (drawerlayout) Findviewbyid (r.id.drawer_layout);        Button button = (button) Findviewbyid (R.ID.BTN); Button.setonclicklistener (NewOnclicklistener () {@Override Public voidOnClick (View v) {//Press the button to open the drawerMdrawerlayout.opendrawer (Gravity.left);    }        }); }}

Resources

Official tutorials:

Http://developer.android.com/design/patterns/navigation-drawer.html

Http://developer.android.com/training/implementing-navigation/nav-drawer.html

Other references:

http://blog.chengyunfeng.com/?p=493

Http://my.eoe.cn/appadventure/archive/3826.html

Navigation menu implementation for Android drawer effect