Android Development Notes (120) Two slide-slip layouts

Slidingpanelayoutslidingpanelayout is a sliding panel layout that Android launches in Android-support-v4.jar, in the previous Android development note (101) Slide-out menu, When we mentioned that the horizontal layout of the LinearLayout can not automatically left and right stretching, you must use the gesture event to pull out the left side of the hidden layout, now slidingpanelayout is to solve the linearlayout can not automatically stretch the flaw. As long as we define two sub-layouts under the Slidingpanelayout node of the layout file, the page defaults to the first sub-layout as the left-hand hidden panel, and once the user's gestures swipe from left to right, the left panel is pulled out.


The use of Slidingpanelayout is quite simple, here are a few of its common methods:
Setsliderfadecolor: Sets the shadow gradient on the main page. That is, when you pull the left panel, the gradient shadow color of the main page on the right, the smaller the main page, the darker the shadow color. The shadow color defaults to gray.
Setcoveredfadecolor: Sets the shadow gradient when the left panel is indented.
Setpanelslidelistener: Sets the pull-out listener for the left panel. The listener implements the following three methods:
--onpanelclosed: The left panel is closed.
--onpanelopened: The left panel is open.
--onpanelslide: The left panel is sliding.
Openpane: Open the left panel.
Closepane: Close the left panel.
IsOpen: Determines whether the left panel is open.


Here are the effects of using slidingpanelayout:



The following is an example of a layout file using Slidingpanelayout:

<?xml version= "1.0" encoding= "UTF-8"? ><android.support.v4.widget.slidingpanelayout xmlns:android= "http:/    /schemas.android.com/apk/res/android "xmlns:tools=" Http://schemas.android.com/tools "android:id=" @+id/sp_layout " Android:layout_width= "Match_parent" android:layout_height= "match_parent" > <listview android:id= "@+id/        Lv_sliding "android:layout_width=" 150DP "android:layout_height=" match_parent "/> <linearlayout Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:orientation= "Vertica            L "> <textview android:id=" @+id/tv_sliding "android:layout_width=" Match_parent "            android:layout_height= "Wrap_content" android:background= "#ffffdd" android:paddingleft= "100DP" android:text= "Open the slide-in menu" android:textcolor= "#000000" android:textsize= "20sp"/> < Android.support.v4.view.ViewPager           Android:id= "@+id/vp_sliding" android:layout_width= "match_parent" android:layout_height= "0 DP "android:layout_weight=" 1 "/> </linearlayout></android.support.v4.widget.slidingpanelayout&gt ;

The following is an example of a page code that uses slidingpanelayout:

Import Java.util.arraylist;import Com.example.exmdrawer.fragment.colorfragment;import Android.graphics.Color; Import Android.os.bundle;import Android.support.v4.app.fragment;import android.support.v4.app.FragmentActivity; Import Android.support.v4.app.fragmentmanager;import Android.support.v4.app.fragmentpageradapter;import Android.support.v4.view.viewpager;import Android.support.v4.view.viewpager.onpagechangelistener;import Android.support.v4.widget.slidingpanelayout;import Android.support.v4.widget.slidingpanelayout.panelslidelistener;import Android.util.log;import Android.view.View; Import Android.view.view.onclicklistener;import Android.widget.adapterview;import Android.widget.adapterview.onitemclicklistener;import Android.widget.arrayadapter;import Android.widget.ListView ; Import Android.widget.textview;public class Slidingactivity extends Fragmentactivity implements Onclicklistener,    Onitemclicklistener {Private final static String TAG = "slidingactivity"; Private SlidingpanelaYout Sp_layout;    Private ListView lv_sliding;    Private Viewpager vp_sliding; Private TextView tv_sliding;private string[] Colordescarray = {"Red", "green", "blue", "white", "Black"};p rivate int[] Colorarray = {C Olor.    RED, Color.green, Color.Blue, Color.White, color.black};p rivate colorpageradapter vp_adapter;        @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (r.layout.activity_sliding);        Sp_layout = (slidingpanelayout) Findviewbyid (r.id.sp_layout);        lv_sliding = (ListView) Findviewbyid (r.id.lv_sliding);        vp_sliding = (Viewpager) Findviewbyid (r.id.vp_sliding);        tv_sliding = (TextView) Findviewbyid (r.id.tv_sliding);                Tv_sliding.setonclicklistener (this);        Sp_layout.setsliderfadecolor (Color.yellow);        Sp_layout.setcoveredfadecolor (color.red);        Sp_layout.setpanelslidelistener (New Slidingpanellistener ()); arrayadapter<string> lv_adapter = new ArraYadapter<string> (This,r.layout.list_item, Colordescarray);        Lv_sliding.setadapter (Lv_adapter);        Lv_sliding.setonitemclicklistener (this);        Vp_adapter = new Colorpageradapter (Getsupportfragmentmanager ());        Vp_sliding.setadapter (Vp_adapter);    Vp_sliding.addonpagechangelistener (New Colorpagerlistener ()); } @Overridepublic void OnClick (View v) {if (V.getid () = = r.id.tv_sliding) {if (Sp_layout.isopen ()) {Sp_layout.closepane () ;} else {Sp_layout.openpane ();}}} @Overridepublic void Onitemclick (adapterview<?> parent, view view, int position, long id) {VP_ Sliding.setcurrentitem (position); Sp_layout.closepane ();} public class Slidingpanellistener implements Panelslidelistener {@Overridepublic void onpanelclosed (View arg0) {tv_ Sliding.settext ("Open slide-side menu");} @Overridepublic void onpanelopened (View arg0) {Tv_sliding.settext ("Close the side-slip menu"); @Overridepublic void Onpanelslide (View arg0, float arg1) {}}public class Colorpagerlistener implements Onpagechangelistener {@Overridepublic void onpagescrollstatechanged (int arg0) {} @Overridepublic void onpagescrolled (int arg0, float arg1, int arg2) {} @Overridepublic void onpageselected (int position) {//tv_sliding.settext (colordescarray[position]);}} Private arraylist<fragment> Mfragments;public class Colorpageradapter extends Fragmentpageradapter {public Colorpageradapter (Fragmentmanager FM) {super (FM); mfragments = new arraylist<fragment> (); for (int color: Colorarray) {Mfragments.add (new colorfragment (color));}} @Overridepublic int GetCount () {return mfragments.size ();} @Overridepublic Fragment getItem (int position) {return mfragments.get (position);}}}

The following is an example of the fragment code used by the page:

Import Android.content.context;import Android.os.bundle;import Android.support.v4.app.fragment;import Android.util.log;import Android.view.layoutinflater;import Android.view.view;import Android.view.ViewGroup;import Android.view.viewgroup.layoutparams;import Android.widget.linearlayout;public class ColorFragment extends Fragment { private static final String TAG = "Colorfragment";p rotected Context mcontext;private int mcolor = -1;public colorfragment ( int colorres) {mcolor = Colorres;} @Overridepublic View Oncreateview (layoutinflater inflater, ViewGroup container, Bundle savedinstancestate) {Mcontext = Getactivity (); if (savedinstancestate! = null) {Mcolor = Savedinstancestate.getint ("Mcolor");} LinearLayout layout = new LinearLayout (mcontext); Layout.setlayoutparams (New Layoutparams (Layoutparams.match_parent, layoutparams.match_parent)); Layout.setbackgroundcolor (mcolor); return layout;} @Overridepublic void Onsaveinstancestate (Bundle outstate) {super.onsaveinstancestate (outstate); if (Mcolor!)=-1) {Outstate.putint ("Mcolor", Mcolor);}}} 

Drawerlayoutdrawerlayout is also android-support-v4.jar in the new drawer-style layout, its usage is more similar to the slide-out menu Open source Framework Slidingmenu, the description of Slidingmenu see the Android Development Notes (101) Slide-Out menu ". Drawerlayout should also be the product of Android with the Times, it is more powerful than slidingpanelayout, not only can pull out the left drawer panel, you can also pull out the right drawer panel. The difference between the left panel and the right panel is that the Layout_gravity property of the left panel in the layout file is the right, and the Layout_gravity property in the layout file for the panel on the side.


Here are a few common method descriptions for drawerlayout:
Setdrawershadow: Sets the gradient shadow shape for the main page.
Adddrawerlistener: Add pull-out listener for drawer panel. The listener implements the following three methods:
--ondrawerslide: The drawer panel is sliding.
--ondraweropened: The drawer panel is open.
--ondrawerclosed: The drawer panel is closed.
--ondrawerstatechanged: The state of the drawer panel has changed.
Removedrawerlistener: Remove the pull-out listener from the drawer panel.
Closedrawers: Close all drawer panels.
Opendrawer: Opens the specified drawer panel.
Closedrawer: Closes the specified drawer panel.
Isdraweropen: Determines whether the specified drawer panel is open.


Here are the effects of using drawerlayout:



The following is an example of a layout file using Drawerlayout:

<android.support.v4.widget.drawerlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns: tools= "Http://schemas.android.com/tools" android:id= "@+id/dl_layout" android:layout_width= "Match_parent" Android: layout_height= "Match_parent" > <linearlayout android:layout_width= "match_parent" Android:layout_hei ght= "match_parent" android:orientation= "vertical" > <linearlayout android:layout_width= "Mat Ch_parent "android:layout_height=" wrap_content "android:orientation=" Horizontal "> &lt ; TextView android:id= "@+id/tv_drawer_left" android:layout_width= "0DP" Android:                layout_height= "Wrap_content" android:layout_weight= "1" android:gravity= "center"            android:text= "Open left side slide" android:textcolor= "#000000" android:textsize= "20sp"/> <textview AndroidOid:id= "@+id/tv_drawer_right" android:layout_width= "0DP" android:layout_height= "wrap_content                "android:layout_weight=" 1 "android:gravity=" center "android:text=" Turn right side slide "        Android:textcolor= "#000000" android:textsize= "20sp"/> </LinearLayout> <textview android:id= "@+id/tv_drawer_center" android:layout_width= "Match_parent" Andro id:layout_height= "0DP" android:layout_weight= "1" android:gravity= "Top|center" Android:pad dingtop= "30DP" android:text= "Home" android:textcolor= "#000000" android:textsize= "20SP"/&gt    ; </LinearLayout> <listview android:id= "@+id/lv_drawer_left" android:layout_width= "150DP" a ndroid:layout_height= "Match_parent" android:layout_gravity= "left" android:background= "#ffdd99"/> < ListView andRoid:id= "@+id/lv_drawer_right" android:layout_width= "150DP" android:layout_height= "Match_parent" Android Oid:layout_gravity= "Right" android:background= "#99ffdd"/></android.support.v4.widget.drawerlayout>

The following is an example of a page code that uses drawerlayout:

Import Java.lang.reflect.field;import Android.app.activity;import Android.os.bundle;import Android.support.v4.widget.drawerlayout;import Android.support.v4.widget.drawerlayout.drawerlistener;import Android.support.v4.widget.viewdraghelper;import Android.util.displaymetrics;import Android.view.View;import Android.view.view.onclicklistener;import Android.widget.adapterview;import Android.widget.arrayadapter;import Android.widget.listview;import Android.widget.textview;import Android.widget.AdapterView.OnItemClickListener; public class Draweractivity extends Activity implements Onclicklistener {private final static String TAG = "Draweracti    Vity ";    Private Drawerlayout dl_layout;    Private TextView Tv_drawer_left;    Private TextView tv_drawer_right;    Private TextView Tv_drawer_center;    Private ListView Lv_drawer_left; Private ListView lv_drawer_right;private string[] Titlearray = {"Home", "News", "Entertainment", "blog", "Forum"};p rivate string[] Settingarra    y = {"My", "Settings", "about"};   @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);        Setcontentview (R.layout.activity_drawer);        Dl_layout = (drawerlayout) Findviewbyid (r.id.dl_layout);        Dl_layout.adddrawerlistener (New Slidinglistener ());        Setdrawerleftedgesize (This, dl_layout, 0.3f);        Tv_drawer_left = (TextView) Findviewbyid (r.id.tv_drawer_left);        Tv_drawer_right = (TextView) Findviewbyid (r.id.tv_drawer_right);        Tv_drawer_center = (TextView) Findviewbyid (r.id.tv_drawer_center);        Tv_drawer_left.setonclicklistener (this);                Tv_drawer_right.setonclicklistener (this);        Lv_drawer_left = (ListView) Findviewbyid (r.id.lv_drawer_left);        arrayadapter<string> left_adapter = new Arrayadapter<string> (This,r.layout.list_item, TitleArray);        Lv_drawer_left.setadapter (Left_adapter);        Lv_drawer_left.setonitemclicklistener (New Leftlistlistener ()); Lv_drawer_right = (ListView) Findviewbyid (R.id.lv_drawer_right);        arrayadapter<string> right_adapter = new Arrayadapter<string> (This,r.layout.list_item, SettingArray);        Lv_drawer_right.setadapter (Right_adapter);    Lv_drawer_right.setonitemclicklistener (New Rightlistlistener ()); } @Overridepublic void OnClick (View v) {if (V.getid () = = R.id.tv_drawer_left) {if (Dl_layout.isdraweropen (lv_drawer_left ) {dl_layout.closedrawer (lv_drawer_left);} else {dl_layout.opendrawer (lv_drawer_left);}} else if (v.getid () = = R.id.tv_drawer_right) {if (Dl_layout.isdraweropen (lv_drawer_right)) {Dl_layout.closedrawer (lv_ Drawer_right);}    else {dl_layout.opendrawer (lv_drawer_right);}}} Private class Leftlistlistener implements Onitemclicklistener {@Overridepublic void Onitemclick (adapterview<?> Parent, view view, int position, long id) {String text = Titlearray[position];tv_drawer_center.settext (text+text+text+    Text+text);d l_layout.closedrawers ();} } Private class Rightlistlistener implements OnitemclicklistEner {@Overridepublic void Onitemclick (adapterview<?> parent, view view, int position, long id) {String text = Setti    Ngarray[position];tv_drawer_center.settext (Text+text+text+text+text);d l_layout.closedrawers ();}  } Private class Slidinglistener implements Drawerlistener {@Overridepublic void Ondrawerslide (View paramview, float paramfloat) {} @Overridepublic void ondraweropened (View paramview) {if (Paramview.getid () = = R.id.lv_drawer_left) {tv_ Drawer_left.settext ("Close left side slide");} else {tv_drawer_right.settext ("Close right side Slide");}} @Overridepublic void ondrawerclosed (View paramview) {if (Paramview.getid () = = R.id.lv_drawer_left) {Tv_drawer_ Left.settext ("Open left side Slide");} else {tv_drawer_right.settext ("Turn right side slide");}} @Overridepublic void ondrawerstatechanged (int paramint) {}}//Set the edge size of the left side slide private void Setdrawerleftedgesize (Act Ivity Act, drawerlayout Layout, float percentage) {if (act = = NULL | | layout = = NULL) return;try {Field Leftdraggerfield = Layout.getclass (). Getdeclaredfield ("MleftdraGger "); Leftdraggerfield.setaccessible (true); Viewdraghelper Leftdragger = (viewdraghelper) leftdraggerfield.get (layout); Field Edgesizefield = Leftdragger.getclass (). Getdeclaredfield ("Medgesize"); Edgesizefield.setaccessible (true); int Edgesize = Edgesizefield.getint (leftdragger);D isplaymetrics dm = new Displaymetrics (); Act.getwindowmanager (). Getdefaultdisplay (). Getmetrics (DM); Edgesizefield.setint (Leftdragger, Math.max (edgesize, (int) (Dm.widthpixels * Percentage)));} catch (Exception e) {e.printstacktrace ();}}}

the difference between slidingpanelayout and DrawerlayoutBoth side-by-side layout to achieve the side-by-side menu effect, of course, there are some differences between the use, the following is a summary of the BO master several differences:
1. Slidingpanelayout can only define one side-slip panel, and must be on the left, while Drawerlayout can define two side-slip panels, one on the left and the other on the right, although it is also possible to define only one slide-slip panel.
2, Slidingpanelayout Slide, the main page is also sliding to the right, while the Drawerlayout slide panel when sliding, the main page will not slide, that is, the side-slip panel will cover the main page of the UI;
3, Slidingpanelayout in the main page any position horizontally to the right, will pull out of the left panel, and Drawerlayout only the main page on the left edge of the horizontal sliding, to pull out the skid panel;
4, pull out the side-slide panel, slidingpanelayout the Gray Shadow of the main page is lighter, not easy to see, and drawerlayout the main page of the gray shadow darker, can be seen in a sudden;






Click here to view the full list of Android development notes

Android Development Notes (120) Two slide-slip layouts