Learning summary of two main kinds of implementation of the side-slip Menu control

Source: Internet
Author: User

the first time to start research on the side-by-side menu implementation or QQ to join this feature attracted me, at that time I think this side-by-side menu idea is absolutely ingenious, the advantage of using the side-slip menu must be obvious, it can invisibly make our screen use more Dahua, You can imagine your screen is bigger than the reality, the side-slip menu is hidden in the invisible screen, when we use the slide gesture, we pull them from the invisible screen to the real screen, when we finished using the menu, we can then back to the invisible screen ... This makes the original space on the limited mobile phone screen, screen utilization has been greatly improved. later, through their search in the web blog Forum, found two more convenient to help us achieve the effect of the Slide menu control:

1.Android Drawerlayout and Actionbardrawertoggle controls in the support library provided by the official;

Open Source Library for 2.github Open source platform: Androidresidemenu (Https://github.com/SpecialCyCi/AndroidResideMenu).

Below I will be based on their use of the two controls and the information of the online predecessors, summed up their own experience.

One,drawerlayout and Actionbardrawertoggle controls use 1. layout file Activity_main.xml:

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "vertical" > < Android.support.v4.widget.DrawerLayout android:id= "@+id/drawer" android:layout_width= "Match_parent" a ndroid:layout_height= "Match_parent" > <!--Content-<linearlayout android:layout_width= "Ma Tch_parent "android:layout_height=" match_parent "android:background=" @mipmap/content "an droid:orientation= "Vertical" ></LinearLayout> <!--slide-up menu left-to-<linearlayout Android : layout_width= "match_parent" android:layout_height= "match_parent" android:background= "@mipmap/drawer            "Android:orientation=" Vertical ></LinearLayout> <!--slide-up menu right--<linearlayout Android:layout_width= "Match_parent" android:layout_height= "Match_parent" android:background= "@mipmap/drawer" android:orientation= "vertical" ></li Nearlayout> </android.support.v4.widget.DrawerLayout></LinearLayout>

There are a few points to note about the layout here:

1. Display the layout of the content, that is, the above "content" layout, must be placed in the first, or the drawer's sliding gestures are difficult to capture, can not be achieved;

2. "Content" layout of the width of the same as Drawerlayout, because the menu is not visible when the content interface will be filled with the screen;

3. The layout of the side-slide menu needs to set the Android:layout_gravity property, start or left to indicate the menu on the right;

4. The width of the side-slide menu should be controlled below 320DP, otherwise it will completely block the content layout and show the effect of the drawer.


2. Mainactivity.java in the code:

Initialize the drawerlayout in OnCreate and combine it with Actionbar through Actionbardrawertoggle to achieve animation effects, This is to set the Displayhomeasupenabled property of the Actionbar, so that the menu icon on the left side of the title bar will be displayed, such as:



@Override    protected void onCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_main);        Mdrawerlayout = (drawerlayout) Findviewbyid (r.id.drawer);        Mdrawertoggle = new Actionbardrawertoggle (this, mdrawerlayout, R.string.open, r.string.close);        Mdrawertoggle.syncstate ();        Mdrawerlayout.setdrawerlistener (mdrawertoggle);        Getsupportactionbar (). Setdisplayhomeasupenabled (true);//Display of the menu button on the left side of the title bar    }

to make the above menu icon work, you must also handle the button event interception on the Actionbar:

  @Override Public    Boolean onoptionsitemselected (MenuItem item) {        if (mdrawertoggle.onoptionsitemselected ( Item)        {            return true;        }        int id = item.getitemid ();        if (id = = r.id.action_settings) {            Toast.maketext (this, "action_settings", Toast.length_short). Show ();            return true;        }        return super.onoptionsitemselected (item);    }


At this point, a simple side-by-side menu effect using the Drawerlayout control can be achieved.


second, using the Androidresidemenu Open source framework to achieve similar QQ5.0 side-by-side menu effectThis implementation process directly refer to the Open Source Library's Chinese instructions can be easily implemented, quite simple. (HTTPS://GITHUB.COM/SPECIALCYCI/ANDROIDRESIDEMENU/BLOB/MASTER/README_CN.MD)predecessors of the instructions have been written so detailed, I stole a lazy in this, but I have personally practiced, but can easily achieve the side-by-side menu effect, and he provides the demo, the open source control of all the properties are fully displayed, very valuable reference.
If a friend wants to have a reference code in the study, can go to my GitHub project address, download I write a study summary of the small demo, the above two examples are included in the. the project is using the Androidstudio development tool. Eclipse can refer to the code import inside. Address: Https://github.com/NateRobinson/DrawerLayoutStudyDemo






Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Learning summary of two main kinds of implementation of the side-slip Menu control

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.