Android Typical interface design (5)--use Slidingmenu and drawerlayout to achieve left and right sidebar respectively

First, the problem description

The sidebar is a very common interface effect in Android applications, which can be linked to the left or right side of the main screen, and is one of the typical interface designs that are especially adapted to small screen features such as mobile phones, and are commonly used as an operating menu for applications.

Implementation of the sidebar can be implemented using third-party components Slidingmenu implementations and Google's official slide drawer assembly drawerlayout, respectively, using both methods to achieve left and right sliding side sidebar

Second, the first use of the Actionbar before the production of the title bar

Here only the code, related knowledge please refer to "Android Typical interface design (4)-Using Actionbar+fragment for tab switch"

 
protected void OnCreate (Bundle savedinstancestate) {super.oncreate (Savedinstanc        EState);        Setcontentview (R.layout.activity_main);    Initactionbar ();        }private void Initactionbar () {Actionbar=super.getactionbar ();        Actionbar.show ();        Actionbar.setdisplayshowhomeenabled (TRUE);        Actionbar.setdisplayshowtitleenabled (FALSE);        Actionbar.setdisplayhomeasupenabled (TRUE);        Actionbar.sethomeasupindicator (R.DRAWABLE.COM_BTN);        Actionbar.setdisplayshowcustomenabled (TRUE);        TextView tvtitle=new TextView (this);        Tvtitle.settext ("homepage");        Tvtitle.settextcolor (Color.White);        Tvtitle.settextsize (18);        Tvtitle.setgravity (Gravity.center);        Layoutparams params=new Layoutparams (layoutparams.match_parent,layoutparams.wrap_content);        Tvtitle.setlayoutparams (params);    Actionbar.setcustomview (Tvtitle); }

Actionbar Style:

<style name= "Actionbar_style" parent= "@android: Style/widget.holo.light.actionbar" >        <item name= " Android:background "> #218FCC </item>           <item name=" Android:actionbarsize ">150dip</item> <!-hidden Actionbar icon-->           <item name= "Android:icon" > @android:color/transparent</item>           <item name= "android:itempadding" >20dip</item>     </style><!-activity Use this style--><style Name= "Apptheme" parent= "Appbasetheme" >         <item name= "Android:actionbarstyle" > @style/actionbar_style </item></style>

Menu: (Right avatar button)

<menu xmlns:android= "Http://schemas.android.com/apk/res/android" >   <item        android:id= "@+id/ Usersetting "        android:orderincategory=" "        android:showasaction=" ifroom "        android:icon=" @drawable/ Biz_tie_user_avater_default_common "        /></menu>

Third, the use of slidingmenu implementation

Private Slidingmenu Slidingmenu;    private void Initslidingmenu () {        slidingmenu=new slidingmenu (this);//Create Side bar        //Set Menu mode, left (sidebar only) right (sidebar only )//left_right (left right sidebar)        Slidingmenu.setmode (slidingmenu.left_right);        Slidingmenu.setmenu (r.layout.menu_left_layout)////Set the first (left) sidebar        //Set the second (right) sidebar, if set Left_right mode Use this method to set the right sidebar        Slidingmenu.setsecondarymenu (r.layout.navigation_layout);        Glue the sidebar to the Activity        slidingmenu.attachtoactivity (this, slidingmenu.sliding_content);        Set the side bar shadow size        slidingmenu.setshadowwidth (ten);        Set the deviation distance        slidingmenu.setbehindoffsetres (r.dimen.sliding_menu_offset);        Full screen mode, full screen swipe to open        slidingmenu.settouchmodeabove (slidingmenu.touchmode_fullscreen);    }

Call the Initslidingmenu () method in OnCreate () to implement the Slidingmenu build

protected void OnCreate (Bundle savedinstancestate) {        super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_main);        Initactionbar (); Initslidingmenu ();    }

To this slide left and right side of the screen appears, the following implementation click on the Actionbar buttons to achieve the left and right side bar display control, the code is as follows:

@Override Public    Boolean onoptionsitemselected (MenuItem item) {        switch (Item.getitemid ()) {case        Android. r.id.home://left home area            slidingmenu.toggle ();//alternately Show or hide sidebar break            ;        Case r.id.usersetting://Right Button menu            if (!slidingmenu.issecondarymenushowing ()) {                Slidingmenu.showsecondarymenu ();//Show Right sidebar            }else{                slidingmenu.toggle ()//Hide right Sidebar by toggle method            }            break;        }        return super.onoptionsitemselected (item);    }

OK to complete, as for the left and right sidebar layout files Menu_left_layout and navigation_layout, you can simply design or see the source code

Iv. use of drawerlayout to achieve

The use of Drawerlayout is also very convenient, drawerlayout is actually a layout control, and LinearLayout and other controls is a thing, but drawerlayout with the function of sliding. As long as the layout according to the Drawerlayout layout, you can have the effect of sliding. The drawerlayout is divided into two parts: Side menu and main content area, and side menu can be expanded and hidden according to gestures.

There are two points to note: The layout code of the main content area is placed in front of the slide-slip menu layout, which helps Drawerlayout to determine who is the layout_gravity side layout_gravity -slip menu and who is the main content area; The property is start for the left sidebar, and end indicates the right side bar

1, the activity layout is as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><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" > <linearlayout android:layout_width= "match_parent" Android:layout_hei ght= "wrap_content" android:orientation= "vertical" > <textview android:layout_width= "match_p  Arent "android:layout_height=" match_parent "android:gravity=" center "android:text=" This is the main interface "    /> </LinearLayout> <include layout= "@layout/menu_left_layout" android:layout_width= "200DP" android:layout_height= "Match_parent" android:layout_gravity= "Start"/> <include android:id= "@+id/r Ight_sliding "android:layout_width=" 240DP "android:layout_height=" match_parent "layout=" @layout/navigat Ion_layout "Android:layout_gravity= "End"/></android.support.v4.widget.drawerlayout>    

Menu_left_layout and Navigation_layout layout files for the left and right sidebar

　　2. Activiy Code

public class Mainactivity extends Activity {private drawerlayout drawerlayout;    Private Actionbardrawertoggle Toggle;    Private ActionBar ActionBar;        protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_main);        Initactionbar ();    Initdrawerlayout ();        }private void Initdrawerlayout () {drawerlayout= (drawerlayout) Super.findviewbyid (r.id.drawer_layout);        Drawerlayout.setscrimcolor (color.transparent); Toggle=new Actionbardrawertoggle (This,drawerlayout, R.drawable.back_move_details_normal,r.string.drawer_ope                        N, r.string.drawer_close) {public void ondrawerclosed (View drawerview) {                    Super.ondrawerclosed (Drawerview); } public void ondraweropened (View drawerview) {super.ondraweropened (Drawerview)                    ;    }                    };    Drawerlayout.setdrawerlistener (toggle); } private void Toggleleftsliding () {//This method controls the display of the left sidebar and hides if (Drawerlayout.isdraweropen (Gravity.start)) {D        Rawerlayout.closedrawer (Gravity.start);        }else{Drawerlayout.opendrawer (Gravity.start);            }} private void Togglerightsliding () {//This method controls the display of the right sidebar and hides if (Drawerlayout.isdraweropen (gravity.end)) {        Drawerlayout.closedrawer (Gravity.end);        }else{Drawerlayout.opendrawer (gravity.end); }} @Override public boolean onoptionsitemselected (MenuItem item) {switch (Item.getitemid ()) {Case A Ndroid.            R.id.home:toggleleftsliding ();        Break            Case R.id.usersetting:togglerightsliding ();        Break    } return super.onoptionsitemselected (item); }}}

OK, the Initactionbar () method code is the same as the previous example, which is no longer attached

To learn more about the small partners, you can click to view the source code , run the test yourself.

Inquiries or technical exchanges, please join the official QQ Group: (452379712)

Jerry Education
Source:http://blog.csdn.net/jerehedu/
This article is the copyright of Yantai Jerry Education Technology Co., Ltd. and CSDN Common, welcome reprint, but without the author's consent must retain this paragraph statement, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

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

Android Typical interface design (5)-use Slidingmenu and drawerlayout to implement the left and right sidebar respectively