Open-source Chinese client slide menu implementation, open-source China

Open-source Chinese client slide menu implementation, open-source China

Welcome to the upper left cornerAndroid technology sharingPublic Account (Red Riding person ).

This article will record some basic usage of DrawerLayout. I think the usage of DrawerLayout may not be well understood, which is quite normal, because DrawerLayout was added to Android later by Google as an android component. support. v4 package.

Here we use the open-source Chinese mobile client to explain what the DrawerLayout drawer Layout looks like.

As you can see, when our fingers slide to the right on the left side of the screen, a menu with a drawer pops up from the left side and is "suspended" on the main interface, the limited space on the device is used properly. Similarly, if you slide your finger to the right of the screen, a drawer menu is displayed to the left. The user experience is good, before DrawerLayout appeared, we had to implement one or use the open-source SlidingMenu project on Github for slide menus. Maybe Google also saw the power of SlidingMenu, therefore, in later versions of Android, DrawerLayout was added to implement components with the same functions as SlidingMenu. To be compatible with earlier versions, it was added to android and support. v4 package.

Effect Preview

Create drawer Layout

The layout of the drawer below references android. support. v4.DrawerLayout is defined like LineaLayout, RelativeLayout, and other la S. Three la s are defined inside DrawerLayout to manage the FrameLayout of the main interface. The layout is used to display the Fragment of interface switching. The following is ListView, display the menu list, followed by a RelativeLayout to display the layout on the right. The 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"> <FrameLayout android: id = "@ + id/content_frame" android: layout_width = "match_parent" android: layout_height = "match_parent"/> <ListView android: id = "@ + id/left_drawer" android: layout_width = "200dp" android: layout_height = "match_parent" android: layout_gravity = "start" android: background = "#111" android: choiceMode = "singleChoice" android: divider = "@ android: color/transparent" android: dividerHeight = "0dp"/> <RelativeLayout android: id = "@ + id/right_drawer" android: layout_width = "220dp" android: layout_height = "match_parent" 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 sidebar" android: textColor = "@ android: color/white" android: textSize = "24sp"/> </RelativeLayout> </android. support. v4.widget. drawerLayout>

This layout file demonstrates some important Layout features.

• The view of the main content (FrameLayout) must be the first child element of DrawLayout, because the navigation drawer is above the main content view.

• The main content view is set to match the width and height of the parent view, because it indicates that the navigation drawer of the entire interface is hidden.

• The horizontal gravity and android: layout_gravity attributes of the drawer view (ListView) must be specified. The right-to-left (RTL) language is supported, and the specified value replaces "left" with "start" (so the drawer appears on the right side of the layout when the layout is RTL ). here, the ListView is set to the left sidebar menu, so the android: layout_gravity attribute is set to "start", the RelativeLayout attribute is set to the right sidebar, And the android: layout_gravity attribute is set to "end ".

• The drawer view specifies that its width matches the parent view with the dp unit and height. The width of the drawer cannot exceed 320 dp, so you can always see a part of the main content view.

Initialize drawer list

As mentioned above, because DrawerLayout contains a ListView as a slide menu on the left sidebar, We need to initialize the drawer list first and adapt the data to the list, the data adapter uses the simplest ArrayAdapter. The simulation data is simply defined in 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 the Java code, first create a MainActivity that inherits android. support. v4.app. FragmentActivity, because switching between Fragment is required in the future.

Protected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main );...... // initialize the 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 you select an Item in the drawer list, the system calls onItemClick () on onItemClickListener to give setOnItemClickListener () What do you do in the onItemClick () method. In the following example, selecting each Item inserts a different Fragment in the layout of the main content. and pass the content of the navigation list to Fragment for display. below is some code:

/*** Item Click Event on ListView **/private class DrawerItemClickListener implements ListView. OnItemClickListener {@ Override public void onItemClick (AdapterView <?> Parent, View view, int position, long id) {selectItem (position );}} /*** switch the Fragment of the main view area ** @ param position */private void selectItem (int position) {// TODO Auto-generated method stub Fragment 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 transmits the clicked menu list title to Fragment FragmentManager fragmentManager = getSupportFragmentManager (); fragmentManager. beginTransaction (). replace (R. id. content_frame, fragment ). commit (); // update the selected item and title, and 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 there is a "dynamic" menu button in the upper-left corner of the "Open Source China client Homepage". The display process is as follows: when the menu is not opened, three dashes like "3" are displayed. When the menu is opened (regardless of the Left or Right menu), a button like "<-" is displayed, changing constantly, is the effect a little brilliant ?! If you know about Android5.0, you should know that this effect is achieved by using the new Material Design language of Android5.0. How can you imitate this effect? In fact, this effect is already available in the omnipotent Github-material-menu component. I will not talk about it here.

Title Bar navigation Click Event Processing

/*** Click menu on ActionBar */@ Override public boolean onOptionsItemSelected (MenuItem item) {int id = item. getItemId (); switch (id) {case android. r. id. home: if (showView = mMenuListView) {if (! IsDirection_left) {// when the left sidebar menu is closed, open mDrawerLayout. openDrawer (mMenuListView);} when the else {// left sidebar menu is opened, disable mDrawerLayout. closeDrawer (mMenuListView); }} else if (showView = right_drawer) {if (! IsDirection_right) {// open mDrawerLayout when the right sidebar is closed. openDrawer (right_drawer);} When else {// opens the right sidebar, disable mDrawerLayout. closeDrawer (right_drawer) ;}} break; case R. id. action_personal: if (! IsDirection_right) {// when the right sidebar is closed, open if (showView = mMenuListView) {mDrawerLayout. closeDrawer (mMenuListView);} mDrawerLayout. openDrawer (right_drawer);} When else {// opens the right sidebar, disable mDrawerLayout. closeDrawer (right_drawer);} break; default: break;} return super. onOptionsItemSelected (item );}

The logic of this section is a bit winding. In fact, I am doing this. We need to ensure that only one menu layout can be displayed at most on the main interface. When the menu layout on the left is displayed, when the menu layout on the right is displayed, you need to hide the left menu layout. Similarly, if the right menu layout is already displayed, you need to open the left menu layout. You must first hide the right menu layout. To determine which layout is to be displayed or closed, I define showView in global variables to mark the view to be displayed or closed. If showView = mMenuListView, it indicates that the Left menu layout is about to be displayed or hidden. In this case, you can further determine whether the menu is an isDirection_left flag that has been displayed in the mMenuListView view to open or close the left View menu.
Similarly, if the navigation menu on the right is to be displayed or hidden, we need to determine whether the navigation on the right is displayed, so as to decide whether to open or hide the menu.

The logic here seems to be a bit messy, and the code is pasted in fragments, which is not easy to understand. If you need further understanding, please add the QQ Group to 201055521 group sharing for details, I have posted all the Java code. The comments are also very detailed and easy to understand. I really don't understand it. I can also reply to this public account or add my personal 766136833 inquiry.