Drawer Arrow drawable (Meun-icon-to-back-arrow), with the menu bar interface

Source: Internet
Author: User

Drawer Arrow drawable (Meun-icon-to-back-arrow) use, imitate the menu bar interface One, what is Drawer arrow drawable

Drawer Arrow drawable is actually a drawer side-by-side menu bar, but adds a cool meun-icon-to-back-arrow animation effect, as shown in



Second, the Drawer Arrow drawable implementation principle

Design Method:

My idea is that if I can generate a moving curve at the end of each line, I can simply calculate the point on each path with the drawer of the drawer, based on the parameter T ,
then simply draw a line from the point m on the Curvea to n on the CURVEB.

in order to generate these curves, I need a collection case for a point that is suitable for fetching. The first thing I thought I should do when I opened the drawer was to record the video from my device and divide it into N frames. But I suddenly
The thought: the interpolator when the drawer slips will make these frames not evenly distributed. Not too complicated, I just move the drawer roughly, and then take a screenshot of each step.



here, I put all the images on Adobe Illustrator and traced a line with a vector (easy to scale: 6pt equals 6px), which is a labor-intensive process,
full of errors; after all, six pixels plus antialiasing is a low-precision, relative to the mathematical method to use


Third, the use of Drawer arrow drawable

Package Com.example.ldrawertest;import Com.example.ldrawerlibrary.actionbardrawertoggle;import Com.example.ldrawerlibrary.drawerarrowdrawable;import Android.annotation.suppresslint;import Android.app.actionbar;import Android.app.activity;import Android.content.intent;import Android.content.res.configuration;import Android.net.uri;import Android.os.bundle;import Android.support.v4.widget.drawerlayout;import Android.view.menuitem;import Android.view.view;import Android.widget.adapterview;import Android.widget.arrayadapter;import Android.widget.listview;public Class    Mainactivity extends Activity {private drawerlayout mdrawerlayout;    Private ListView mdrawerlist;    Private Actionbardrawertoggle Mdrawertoggle;    Private Drawerarrowdrawable Drawerarrow;    Private Boolean Drawerarrowcolor; @SuppressLint ("Newapi") @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (Savedinstan        Cestate);                Setcontentview (R.layout.activity_main);Get a ActionBar ActionBar ab = Getactionbar ();        Add a return icon to the left of the top left icon ab.setdisplayhomeasupenabled (true);                You must ensure that the icon is ab.sethomebuttonenabled (true) as an action item by calling the Sethomebuttonenabled (True) method.       Mdrawerlayout = (drawerlayout) Findviewbyid (r.id.drawer_layout);        The layout of the drawer sidebar, for a listview mdrawerlist = (ListView) Findviewbyid (R.id.navdrawer); Create Drawerarrow Drawerarrow = new Drawerarrowdrawable (this) {@Override public boolean Islayo            Utrtl () {return false;                }        }; /* * Actionbardrawertoggle is Drawerlayout.drawerlistener implementation. Used in conjunction with Navigationdrawer, this method is recommended in accordance with the Android design specification. Effect: 1. Change the Android.r.id.home return icon. 2.Drawer pull-out, hidden, with Android. R.id.home animation effect.        3. The monitor drawer pulls out, hides; *//Action Bar drawer switcher binds the drawer to the app icon Action Bar to correctly interact. Mdrawertoggle = new Actionbardrawertoggle (this, mdrawerlayout, Drawerarrow, R.string.drawer_open, R. STring.drawer_close) {//When the drawer is closed, public void ondrawerclosed (view view) {Super.ondrawerclos                Ed (view);                  /* * getactivity (). Invalidateoptionsmenu (); * Change the State of menu item at run time. You need to rewrite Onprepareoptionsmenu (), * It makes it easy for you to remove, add, make unavailable etc. on item.                 On Android 3.0 above, * You must call Invalidateoptionsmenu ().            * */Invalidateoptionsmenu (); }//When the drawer is open, public void ondraweropened (View drawerview) {super.ondraweropened (Drawerv                Iew);            Invalidateoptionsmenu ();                }        };        Set the monitoring drawer switch mdrawerlayout.setdrawerlistener (mdrawertoggle);        This method will automatically and Actionbar association, the picture of the switch is displayed on the action, if not set, you can also have the effect of the drawer, but the default icon Mdrawertoggle.syncstate ();            Set Ldrawer fill content, fill string[by adapter] values = new string[]{"User name", "Discovery",        "Attention",    "Favorites", "Drafts", "questions", "settings"}; arrayadapter<string> adapter = new Arrayadapter<string> (this, Android. R.layout.simple_list_item_1, Android.        R.id.text1, values);                        Mdrawerlist.setadapter (adapter);            Drawer Sidebar Set Click event Mdrawerlist.setonitemclicklistener (New Adapterview.onitemclicklistener () {@Override  public void Onitemclick (adapterview<?> parent, view view, int position, long ID) {switch (position) {case 0:mdrawertoggle.setanimateenable                    D (false);//Set stop or turn animation drawerarrow.setprogress (1f);//Set normal menu icon mode break;                        Case 1:mdrawertoggle.setanimateenabled (FALSE);                   Drawerarrow.setprogress (0f);//Set return arrow mode break; Case 2:mdrawertoggle.setanimateenabled (TRUE);                        Mdrawertoggle.syncstate ();                    Break                            Case 3:if (drawerarrowcolor) {Drawerarrowcolor = false;//                            Drawerarrow.setcolor (R.color.ldrawer_color);//Set color} else {                        Drawerarrowcolor = true;//Drawerarrow.setcolor (r.color.drawer_arrow_second_color);                        } mdrawertoggle.syncstate ();                    Break Case 4:intent browserintent = new Intent (Intent.action_view, Uri.parse ("Https://github.com/IkiMuhe                        Ndis/ldrawer "));                        StartActivity (browserintent);                    Break                        Case 5:intent share = new Intent (intent.action_send); Share.SetType ("Text/plain");                        Share.addflags (Intent.flag_activity_new_task);                        Share.putextra (Intent.extra_subject, getString (r.string.app_name));  Share.putextra (Intent.extra_text, getString (r.string.app_description) + "\ n" + "GitHub page: https://github.com/ikimuhendis/ldrawer\n "+" Sample app:https://play.google.com/store/apps/de                        Tails?id= "+ getpackagename ());                        StartActivity (Intent.createchooser (Share, getString (R.string.app_name)));                    Break                        Case 6:string AppUrl = "https://play.google.com/store/apps/details?id=" + getpackagename ();                        Intent rateintent = new Intent (Intent.action_view, Uri.parse (AppUrl));                        StartActivity (rateintent); Break               }            }        });  }//Menu key-point event handling @Override public boolean onoptionsitemselected (MenuItem item) {if (Item.getitemid () = = Android. R.id.home) {if (Mdrawerlayout.isdraweropen (mdrawerlist)) {Mdrawerlayout.closedrawer (mdrawerlis            T);            } else {mdrawerlayout.opendrawer (mdrawerlist);    }} return super.onoptionsitemselected (item); After the//activity is complete @Override protected void Onpostcreate (Bundle savedinstancestate) {super.onpostcreate (sav        Edinstancestate);    Mdrawertoggle.syncstate (); }//configuration changes @Override public void onconfigurationchanged (config newconfig) {Super.onconfigurationcha        Nged (Newconfig);    Mdrawertoggle.onconfigurationchanged (Newconfig); }}



Drawer Arrow drawable (Meun-icon-to-back-arrow), with the menu bar interface

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.