Android provides a simple method for implementing the native slide menu

Android provides a simple method for implementing the native slide menu

Let's take a look

When you click the menu, you can change the icon. For example, if you click "happy", the homepage will become a smiling face. This implementation process is extremely simple.

You need to use two new widgets, ToolBar and DrawableLayout.

First, write three xml layout files. Here, the layout file is embedded with the include label. The Code is as follows:

Headbar_toolbar.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<? Xml version = "1.0" encoding = "UTF-8"?> <Android. support. v7.widget. Toolbar xmlns: android = "http://schemas.android.com/apk/res/android" Android: id = "@ + id/tbHeadBar" Android: layout_width = "match_parent" Android: layout_height = "50dp" Android: background = "@ color/red">   <TextView Android: layout_width = "wrap_content" Android: layout_height = "wrap_content" Android: layout_gravity = "center" Android: text = "@ string/emotion" Android: textColor = "@ color/white" Android: textSize = "16sp"/>   </Android. support. v7.widget. Toolbar>

My_drawablelayout.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<? Xml version = "1.0" encoding = "UTF-8"?> <Android. support. v4.widget. DrawerLayout xmlns: android = "http://schemas.android.com/apk/res/android" Android: id = "@ + id/dlMenu" Android: layout_width = "match_parent" Android: layout_height = "match_parent">   <LinearLayout Android: id = "@ + id/llContent" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: background = "@ color/white" Android: gravity = "center" Android: orientation = "vertical">   <ImageView Android: id = "@ + id/ivContent" Android: layout_width = "100dp" Android: layout_height = "100dp" Android: src = "@ drawable/angry"/>   </LinearLayout>   <! -- Android: layout_gravity = "start" attribute to make this part a slide part --> <! -- Be sure to put it below !!! If you do not know the hierarchy of controls, go to Baidu! Oh, don't go to Google --> <LinearLayout Android: id = "@ + id/llMenu" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: layout_gravity = "start" Android: background = "@ color/white" Android: orientation = "vertical">   <! -- Used to set menu items --> <ListView Android: id = "@ + id/lvMenu" Android: layout_width = "match_parent" Android: layout_height = "match_parent" Android: divider = "@ null"/>   </LinearLayout>   </Android. support. v4.widget. DrawerLayout>

Main_activity.xml

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: 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: orientation = "vertical" Tools: context = "com. demo. usher. demo_slidingmenu.MainActivity">   <! -- Header --> <Include layout = "@ layout/headbar_toolbar"/>   <! -- Main layout --> <Include layout = "@ layout/my_drawablelayout"/>   </LinearLayout>

How to apply a file in a java File]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

Package com. demo. usher. demo_slidingmenu;   Import android. OS. Bundle; Import android. support. v4.widget. DrawerLayout; Import android. support. v7.app. ActionBarDrawerToggle; Import android. support. v7.app. AppCompatActivity; Import android. support. v7.widget. Toolbar; Import android. view. View; Import android. widget. AdapterView; Import android. widget. ArrayAdapter; Import android. widget. ImageView; Import android. widget. LinearLayout; Import android. widget. ListView;   Import java. util. ArrayList; Import java. util. List;   Import butterknife. BindView; Import butterknife. ButterKnife;   Public class MainActivity extends AppCompatActivity {   @ BindView (R. id. tbHeadBar) Toolbar mTbHeadBar;   /* Slide menu Layout */ @ BindView (R. id. llMenu) LinearLayout mLlMenu;   /* Slide menu ListView placement menu item */ @ BindView (R. id. lvMenu) ListView mLvMenu;   @ BindView (R. id. ivContent) ImageView mIvContent;   @ BindView (R. id. dlMenu) DrawerLayout mMyDrawable;   ActionBarDrawerToggle mToggle;   Private List <String> lvMenuList = new ArrayList <String> (){{ Add ("angry "); Add ("happy "); Add ("sad "); Add ("embarrassed "); }};   Private List <Integer> imageList = new ArrayList <Integer> (){{ Add (R. drawable. angry ); Add (R. drawable. happy ); Add (R. drawable. sad ); Add (R. drawable. embarrassed ); }};   @ Override Protected void onCreate (Bundle savedInstanceState ){ Super. onCreate (savedInstanceState ); SetContentView (R. layout. activity_main ); ButterKnife. bind (this );   /* Initialize Toolbar and DrawableLayout */ InitToolBarAndDrawableLayout ();   MLvMenu. setAdapter (new ArrayAdapter (this, android. R. layout. simple_expandable_list_item_1, lvMenuList )); MLvMenu. setOnItemClickListener (new AdapterView. OnItemClickListener (){ @ Override Public void onItemClick (AdapterView <?> Parent, View view, int position, long id ){ MIvContent. setImageResource (imageList. get (position )); MMyDrawable. closeDrawers ();/* Hide drawer */ } }); }   Private void initToolBarAndDrawableLayout (){ Setsuppactionactionbar (mTbHeadBar ); /* The following two methods are used to set the available return key */ Getsuppactionactionbar (). setHomeButtonEnabled (true ); Getsuppactionactionbar (). setDisplayHomeAsUpEnabled (true ); /* Set title text not to be displayed */ Getsuppactionactionbar (). setDisplayShowTitleEnabled (false );   MToggle = new ActionBarDrawerToggle (this, mMyDrawable, mTbHeadBar, R. string. open, R. string. close ){ @ Override Public void onDrawerOpened (View drawerView ){ Super. onDrawerOpened (drawerView ); // Toast. makeText (MainActivity. this, R. string. open, Toast. LENGTH_SHORT). show (); }   @ Override Public void onDrawerClosed (View drawerView ){ Super. onDrawerClosed (drawerView ); // Toast. makeText (MainActivity. this, R. string. close, Toast. LENGTH_SHORT). show (); } }; /* MMyDrawable. setDrawerListener (mToggle); not recommended */ MMyDrawable. addDrawerListener (mToggle ); MToggle. syncState ();/* synchronization status */ } }

About butterknife annotations and styles

Butterknife configure the following in the gradle file]

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

Apply plugin: 'com. android. application' Apply plugin: 'android-apt'   Android { CompileSdkVersion 24 BuildToolsVersion "24.0.2"   DefaultConfig { ApplicationId "com. demo. usher. demo_slidingmenu" MinSdkVersion 15 TargetSdkVersion 24 VersionCode 1 VersionName "1.0" } BuildTypes { Release { MinifyEnabled false ProguardFiles getDefaultProguardFile('proguard-android.txt '), 'proguard-rules. Pro' } }   }   Buildscript { Repositories { MavenCentral () } Dependencies { Classpath 'com. neenbedankt. gradle. plugins: android-apt: 8080' } }   Dependencies { Compile fileTree (include: ['*. jar'], dir: 'libs ') TestCompile 'junit: junit: 100' Compile 'com. android. support: appcompat-v7: 24.2.0' Compile 'com. jakewharton: butterknife: 8.4.0' /* Butterknife related */ Apt 'com. jakewharton: butterknife-compiler: 8.4.0' Compile 'com. android. support: support-v4: 24.2.0' }

Style: Modify the Color style of the Return key in the style file]

?

1 2 3 4 5 6 7 8 9 10 11

<Resources>   <Style name = "AppTheme" parent = "Theme. AppCompat. Light. NoActionBar"> <Item name = "drawerArrowStyle"> @ style/AppTheme. DrawerArrowToggle </item> </Style>   <Style name = "AppTheme. DrawerArrowToggle" parent = "Base. Widget. AppCompat. DrawerArrowToggle"> <Item name = "color"> @ android: color/white </item> </Style>   </Resources>

Summary

In fact, when we use third-party controls, we often do not know how they are implemented. Using Native controls allows us to better understand an interaction or implement a function principle, it is conducive to making apps with excellent performance and interaction. The above is all the content of this article, hoping to bring some help to everyone's work or study.