Android uses Drawerlayout to realize the Imitation QQ bidirectional sideslip menu _android

1. Overview

Previously wrote an android high imitation QQ5.0 sideslip menu effect custom control to attack, Coincides with QQ5.2 and added a right menu, just look at the next drawerlayout, on the one hand, I am more interested in the official things, on the other hand, this thing is really convenient to use, so simply write a demo, high imitation QQ5.2 two-way sideslip, share to everyone.

First look at the effect chart:

Drawerlayout is really very convenient to use, look at the use of the following together ~

2, the use of drawerlayout

Direct Drawerlayout as the root layout, and then its internal first view is the content area, the second view is the left menu, the third view is the right side sideslip menu, and the third is optional.

The width of the first view should be set to match_parent, of course, that's for sure.

The second to third view needs to be set android:layout_gravity= "left", and android:layout_gravity= "right" and a move height is set to Match_parent, the width is fixed value, that is, the width of the sideslip menu.

According to the above description to write a layout file, and then set to the activity is added to the left and right side sideslip, is not very simple ~ ~ ~

For example, our layout file:

<android.support.v4.widget.drawerlayout xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns: tools= "Http://schemas.android.com/tools" android:id= "@+id/id_drawerlayout" android:layout_width= "Match_parent" an 
    droid:layout_height= "Match_parent" android:background= "@drawable/img_frame_background" > <relativelayout Android:layout_width= "Match_parent" android:layout_height= "match_parent" android:background= "@drawable/qq" 
 
    ; 
      <button android:layout_width= "40DP" android:layout_height= "30DP" android:layout_margintop= "10DP" Android:layout_alignparentright= "true" android:background= "@drawable/youce" android:onclick= "Openrigh Tmenu "/> </RelativeLayout> <fragment android:id=" @+id/id_left_menu "Android:name=" Com.zhy.d Emo_zhy_17_drawerlayout. Menuleftfragment "android:layout_width=" 200DP "android:layout_height=" Match_parent "android:layout_gravity= "Left "android:tag=" left "/> <fragment android:id=" @+id/id_right_menu "Android:name=" Com.zhy.demo _zhy_17_drawerlayout. Menurightfragment "android:layout_width=" 100DP "android:layout_height=" Match_parent "android:layout_gravity 

 = ' Right ' android:tag= ' right '/> </android.support.v4.widget.DrawerLayout>

Here our main content area is relativelayout.

The menu uses two fragment, the left side is 200DP, the right side is 100DP;

OK, look at our layout file, and then look at our detailed code.

3, the code is the best teacher

1, Menuleftfragment

Package com.zhy.demo_zhy_17_drawerlayout; 
 
Import Android.os.Bundle; 
Import android.support.v4.app.Fragment; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
 
public class Menuleftfragment extends Fragment 
{ 
 
  @Override public 
  View Oncreateview (layoutinflater Inflater, ViewGroup container, 
      Bundle savedinstancestate) 
  {return 
    inflater.inflate (r.layout.layout _menu, container, false); 
  } 
 

corresponding layout file:

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:background=" "#00000000" > <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_content" Android : Layout_centervertical= "true" android:orientation= "vertical" > <relativelayout android:layout_wid 
        Th= "Match_parent" android:layout_height= "wrap_content" > <imageview android:id= "@+id/one" 
        Android:layout_width= "50DP" android:layout_height= "50DP" android:layout_centervertical= "true" android:layout_marginleft= "20DP" android:layout_margintop= "20DP" android:src= "@drawable/img_1"/& 
 
      Gt <textview android:layout_width= "fill_parent" android:layout_height= "Wrap_content" Android:la Yout_centerverticAl= "true" android:layout_marginleft= "20DP" android:layout_torightof= "@id/one" android:text= "1th Item "android:textcolor=" #f0f0f0 "android:textsize=" 20sp "/> </RelativeLayout> < Relativelayout android:layout_width= "match_parent" android:layout_height= "wrap_content" > <Im 
        Ageview android:id= "@+id/two" android:layout_width= "50DP" android:layout_height= "50DP" 
        Android:layout_centervertical= "true" android:layout_marginleft= "20DP" android:layout_margintop= "20DP" android:src= "@drawable/img_2"/> <textview android:layout_width= "Fill_parent" and 
        roid:layout_height= "Wrap_content" android:layout_centervertical= "true" android:layout_marginleft= "20DP" 
        android:layout_torightof= "@id/two" android:text= "2nd item" android:textcolor= "#f0f0f0" Android:textsize= "20SP"/> </RelativeLayout> <relativelayout android:layout_width= "Match_parent" Android:lay out_height= "Wrap_content" > <imageview android:id= "@+id/three" android:layout_width= "50DP "Android:layout_height=" 50DP "android:layout_centervertical=" true "android:layout_marginleft=" 
        20DP "android:layout_margintop=" 20DP "android:src=" @drawable/img_3 "/> <textview Android:layout_width= "Fill_parent" android:layout_height= "Wrap_content" android:layout_centervertical= " True "android:layout_marginleft=" 20DP "android:layout_torightof=" @id/three "android:text=" 3rd it Em "android:textcolor=" #f0f0f0 "android:textsize=" "20sp"/> </RelativeLayout> <re Lativelayout android:layout_width= "match_parent" android:layout_height= "wrap_content" > <Imag Eview android:iD= "@+id/four" android:layout_width= "50DP" android:layout_height= "50DP" Android:layout_centerver Tical= "true" android:layout_marginleft= "20DP" android:layout_margintop= "20DP" android:src= "@dra Wable/img_4 "/> <textview android:layout_width=" fill_parent "android:layout_height=" Wrap_ Content "Android:layout_centervertical=" true "android:layout_marginleft=" 20DP "android:layout_t orightof= "@id/four" android:text= "4th Item" android:textcolor= "#f0f0f0" android:textsize= "20SP" /> </RelativeLayout> <relativelayout android:layout_width= "Match_parent" Android:lay  
        out_height= "Wrap_content" > <imageview android:id= "@+id/five" android:layout_width= "50DP" android:layout_height= "50DP" android:layout_centervertical= "true" android:layout_marginleft= "2 0DP "Android:layout_margintop= "20DP" android:src= "@drawable/img_5"/> <textview android:layout_width= "fi Ll_parent "android:layout_height=" Wrap_content "android:layout_centervertical=" true "Android:la yout_marginleft= "20DP" android:layout_torightof= "@id/five" android:text= "5th Item" ANDROID:TEXTC Olor= "#f0f0f0" android:textsize= "20sp"/> </RelativeLayout> </LinearLayout> </relati 

 Velayout>

In fact, is a heap out of the layout ~ ~ No Meaning ~

2, Menurightfragment

Package com.zhy.demo_zhy_17_drawerlayout; 
 
Import Android.os.Bundle; 
Import android.support.v4.app.Fragment; 
Import Android.view.LayoutInflater; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
 
public class Menurightfragment extends Fragment 
{ 
 
  @Override public 
  View Oncreateview (layoutinflater Inflater, ViewGroup container, 
      Bundle savedinstancestate) 
  {return 
    inflater.inflate (r.layout.menu_ Layout_right, container, false); 
  } 
 

corresponding layout file:

<?xml version= "1.0" encoding= "Utf-8"?> <linearlayout xmlns:android= "http://schemas.android.com/apk/res/" Android "Android:layout_width=" Match_parent "android:layout_height=" match_parent "android:gravity=" Center_vertica L "android:orientation=" vertical "> <linearlayout android:layout_width=" match_parent "Android:layo ut_height= "Wrap_content" android:layout_centervertical= "true" android:layout_gravity= "center_vertical" Andr Oid:layout_marginbottom= "20DP" android:orientation= "vertical" > <imageview android:layout_width= "  
 
    60DP "android:layout_height=" 60DP "android:layout_gravity=" center "android:src=" @drawable/wode "/> <textview android:layout_width= "fill_parent" android:layout_height= "Wrap_content" Android: gravity= "center" android:text= "sweep" android:textcolor= "#ffffff"/> </LinearLayout> <line Arlayout Android:layout_widTh= "Match_parent" android:layout_height= "Wrap_content" android:layout_centervertical= "true" Android:layout_ Gravity= "center_vertical" android:layout_marginbottom= "20DP" android:orientation= "vertical" > <imag 
      Eview android:layout_width= "60DP" android:layout_height= "60DP" android:layout_gravity= "center" android:src= "@drawable/saoma"/> <textview android:layout_width= "Fill_parent" Android:layout_h 
  eight= "wrap_content" android:gravity= "center" android:text= "discussion Group" android:textcolor= "#ffffff"/> </LinearLayout> <linearlayout android:layout_width= "match_parent" android:layout_height= "Wrap_con Tent "android:layout_centervertical=" true "android:layout_gravity=" center_vertical "Android:layout_marginbo Ttom= "20DP" android:orientation= "vertical" > <imageview android:layout_width= "60DP" Androi 
d:layout_height= "60DP"      android:layout_gravity= "center" android:src= "@drawable/wode"/> <textview android:layout_ 
      Width= "Fill_parent" android:layout_height= "wrap_content" android:gravity= "center" android:text= "sweep" Android:textcolor= "#ffffff"/> </LinearLayout> <linearlayout android:layout_width= "match_p Arent "android:layout_height=" Wrap_content "android:layout_centervertical=" true "android:layout_gravity=" ce 
      Nter_vertical "android:layout_marginbottom=" 20DP "android:orientation=" vertical "> <imageview Android:layout_width= "60DP" android:layout_height= "60DP" android:layout_gravity= "center" ANDROID:SR c= "@drawable/saoma"/> <textview android:layout_width= "Fill_parent" android:layout_height= _content "android:gravity= Center" android:text= "discussion Group" android:textcolor= "#ffffff"/> </linea Rlayout> </lineArlayout> 

 

is still very simple, in addition to the more difficult to find the icon ~ ~

3, Mainactivity
Mainactivity's layout file has been posted ~ ~

Package com.zhy.demo_zhy_17_drawerlayout; 
Import Android.os.Bundle; 
Import android.support.v4.app.FragmentActivity; 
Import Android.support.v4.widget.DrawerLayout; 
Import Android.support.v4.widget.DrawerLayout.DrawerListener; 
Import android.view.Gravity; 
Import Android.view.View; 
 
Import Android.view.Window; 
 
Import Com.nineoldandroids.view.ViewHelper; 
 
  public class Mainactivity extends Fragmentactivity {private drawerlayout mdrawerlayout; 
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); 
    Requestwindowfeature (Window.feature_no_title); 
 
    Setcontentview (R.layout.activity_main); 
    Initview (); 
 
  Initevents (); 
    public void Openrightmenu (view view) {Mdrawerlayout.opendrawer (gravity.right); 
  Mdrawerlayout.setdrawerlockmode (drawerlayout.lock_mode_unlocked, gravity.right); private void Initevents () {Mdrawerlayout.setdrawerlistener () (New drawerlistEner () {@Override public void ondrawerstatechanged (int newstate) {} @Override public void Ondrawerslide (view drawerview, float slideoffset) {View mcontent = Mdrawerlayout.getch 
        Ildat (0); 
        View mmenu = Drawerview; 
        float scale = 1-slideoffset; 
 
        Float Rightscale = 0.8f + scale * 0.2F; 
 
          if (Drawerview.gettag (). Equals ("left")) {float Leftscale = 1-0.3f * scale; 
          Viewhelper.setscalex (Mmenu, Leftscale); 
          Viewhelper.setscaley (Mmenu, Leftscale); 
          Viewhelper.setalpha (Mmenu, 0.6f + 0.4f * (1-scale)); 
          Viewhelper.settranslationx (Mcontent, Mmenu.getmeasuredwidth () * (1-scale)); 
          Viewhelper.setpivotx (mcontent, 0); 
          Viewhelper.setpivoty (Mcontent, Mcontent.getmeasuredheight ()/2); 
          Mcontent.invalidate (); 
          Viewhelper.setscalex (Mcontent, Rightscale);Viewhelper.setscaley (Mcontent, Rightscale);  
          else {Viewhelper.settranslationx (mcontent,-mmenu.getmeasuredwidth () * slideoffset); 
          Viewhelper.setpivotx (Mcontent, Mcontent.getmeasuredwidth ()); 
          Viewhelper.setpivoty (Mcontent, Mcontent.getmeasuredheight ()/2); 
          Mcontent.invalidate (); 
          Viewhelper.setscalex (Mcontent, Rightscale); 
        Viewhelper.setscaley (Mcontent, Rightscale); 
      @Override public void ondraweropened (View drawerview) {} @Override public void ondrawerclosed (View drawerview) {Mdrawerlayout.setdrawerlockmode (drawerlay Out. 
      lock_mode_locked_closed, Gravity.right); 
  } 
    }); 
    private void Initview () {mdrawerlayout = (drawerlayout) Findviewbyid (r.id.id_drawerlayout); Mdrawerlayout.setdrawerlockmode (drawerlayout.lock_mode_locked_closed, GraviTy. 
  right); 
 } 
 
}

Well, the code basically doesn't have a comment. It's because there's really no good annotation.

Mention points:

1, in order to simulate the right menu of QQ need to click to appear, so in the initialization of the drawerlayout, the use of Mdrawerlayout.setdrawerlockmode (drawerlayout.lock_mode_locked_ Closed,gravity.right) means that only programming can eject it.

Then after the pop-up, you need to allow gestures to slide back, so in the Openrightmenu also wrote:

Mdrawerlayout.setdrawerlockmode (Drawerlayout.lock_mode_unlocked,gravity.right); Unlock for a moment.

Finally, in the ondrawerclosed callback, continue to set Mdrawerlayout.setdrawerlockmode (Drawerlayout.lock_mode_locked_closed,gravity.right);

2, animation effect

Animation with the Nineoldandroids, about the animation of various offsets, scaling calculation please refer to the Android High imitation QQ5.0 sideslip menu effect custom control to attack is basically consistent, only a different place, The content is set to Viewhelper.settranslationx (Mcontent, Mmenu.getmeasuredwidth () * (1-scale)), and the content is on the right side of the menu. menu is on top of menus by default, so we set the X-direction offset for the content based on the distance the menu draws.

OK, actually see can do so, basically any sideslip menu effect can write out. If you are interested, you can take drawerlayout to achieve all the results of this blog: Android implementation of the various forms of bidirectional sideslip menu custom control to attack.

3, Setdrawerlistener

As can be seen through the code, you can use the Setdrawerlistener Listener menu to open and close, and so on. Here for the current operation of which menu is judged by the tag, I think the use of gravity should also be able to judge out ~ ~

Okay, no, because the drawerlayout default can only be drawn from the border menu, but the QQ draw the menu gesture area is larger, we are interested, you can rewrite the activity of the ontouchevent, in the inside judge, if it is about sliding gestures God horse, pop-up menu, should not trouble ~ ~ ~