Android based on Viewdraghelper imitation QQ5.0 sideslip interface effect _android

Source: Internet
Author: User

QQ5.0 sideslip Effect Scheme There are many ways, today we use viewdraghelper to achieve.

First up Effect chart:


① custom Control Slidingmenu inheritance framelayout, placed on framelayout above the layout of a layer, through the Getchildat () can easily get to any layer, and then control this layout changes.

public class Slidingmenu extends Framelayout {

 private viewdraghelper mviewdraghelper;

 private int mheight;//The height of the current control the private int
 mwidhth;//The width of the current control
 private int mrange;//menu move distance

 private Viewgrou P mmenu;//Menu Content
 Private ViewGroup mcontent//home page Content

 private Boolean isOpen = false;//to determine whether to open menu public

 sliding Menu (context
  , null);

 Public Slidingmenu (context, AttributeSet attrs) {This
  (context, attrs, 0);
 }

 Public Slidingmenu (context, AttributeSet attrs, int defstyleattr) {
  Super (context, attrs, defstyleattr); c16/>//Initialize viewdraghelper
  mviewdraghelper = Viewdraghelper.create (this, callback);
 }


② Next we use our custom Slidingmenu in the layout file, according to the layout, we step by step to achieve slidingmenu.

 <?xml version= "1.0" encoding= "Utf-8"?> < Com.yitong.myslidingmenu2.view.SlidingMenu xmlns:android= "Http://schemas.android.com/apk/res/android" xmlns:
 tools= "Http://schemas.android.com/tools" android:id= "@+id/main_slidingmenu" android:layout_width= "Match_parent" android:layout_height= "Match_parent" android:background= "@mipmap/bg" android:orientation= "Horizontal" tools:
  context= "Com.yitong.myslidingmenu2.MainActivity" > <include layout= "@layout/left_menu"/> <linearlayout Android:id= "@+id/main_content" android:layout_width= "match_parent" android:layout_height= "Match_parent" Android: background= "@mipmap/qq" android:orientation= "horizontal" > <button android:layout_width= "wrap_content" and roid:layout_height= "Wrap_content" android:onclick= "click" android:text= "Toggle Menu"/> </LinearLayout> </com. Yitong.myslidingmenu2.view.slidingmenu> 

③ if you want to achieve sideslip, the custom control must contain two layouts, which are judged in the Onfinishinflate method in our Slidingmenu and get the menu and home page. In the onsizechanged get to the menu to slide out the width and height.

@Override
protected void Onfinishinflate () {
  super.onfinishinflate ();

  if (Getchildcount () < 2) {
   throw new IllegalStateException ("must contain two view in the use of Slidingmenu")
  ;
  if (!) ( Getchildat (0) instanceof ViewGroup && getchildat (1) instanceof ViewGroup)) {
   throw new IllegalStateException ("Child view must be a viewgroup subclass");
  }

  Mmenu = (viewgroup) getchildat (0);
  Mcontent = (viewgroup) getchildat (1);
 }

 @Override
 protected void onsizechanged (int w, int h, int oldw, int oldh) {
  super.onsizechanged (W, H, OLDW, OLDH) ;
  Mheight = Getmeasuredheight ();
  mwidhth = Getmeasuredwidth ();
  Mrange = (int) (MWIDHTH * 0.8);
 }

④ using Viewdraghelper, you need to give the current control time to viewdraghelper processing.

@Override Public
Boolean onintercepthoverevent (Motionevent event) {
 //pass Touch event to Viewdraghelper return
 Mviewdraghelper.shouldintercepttouchevent (event);
}

@Override Public
Boolean ontouchevent (Motionevent event) {
 try {
  mviewdraghelper.processtouchevent ( Event)//Let Viewdragehelper handle touch event
 } catch (Exception e) {
  e.printstacktrace ();
 }
 return true;
}

Key code for ⑤viewdraghelper

Private Callback Callback = new Callback () {@Override public boolean trycaptureview (View child, int pointerid) {RE Turn true;//Child: A view that is currently being dragged. Returns true to indicate that the current view can be dragged @Override public int getviewhorizontaldragrange (view child) {RE Turn mrange;//returns the drag-and-drop distance, does not restrict drag and drop, determines the execution speed of the animation} @Override public int clampviewpositionhorizontal (View child, int left, I NT DX) {//According to the suggested value, revise the distance of the horizontal direction if (child = = mcontent) {//① Slide the main page content, and no longer slide when the screen is reserved for width.
  ② to the left can not be negative to = fixcontentslidrange;
 return to left; @Override public void onviewpositionchanged (view changedview, int left, int top, int dx, int dy) {//When the view's position changes, you can
  Add some view effects super.onviewpositionchanged (Changedview, left, top, DX, dy) in this method; When we slide the contents of the menu, keep the contents of the menu fixed, convert the main page content to move int movecontentleft = left;//The distance to the left of the main page content if (Changedview = = Mmenu) {Movecontentl
   EFT = Mcontent.getleft () + left; Mmenu.layout (0, 0, mmenu.getheight (), Mmenu.getheight ()),//Force menu does not move} Movecontentleft = Fixcontentslidrange (moveConteNtleft);

  Mcontent.layout (movecontentleft, 0, Movecontentleft + mcontent.getwidth (), Mcontent.getheight ()); Animshow (movecontentleft);//When the menu is open, some animations invalidate ();//redraw interface, compatible with low version} @Override public void onviewreleased (View rele
  Asedchild, float xvel, float yvel) {//When view is off, trigger, handle auto Smooth animation super.onviewreleased (Releasedchild, Xvel, Yvel);
  if (Xvel > 0) {//Horizontal speed + open ();
  else if (Xvel = = 0 && mcontent.getleft () > mrange/2.0f) {//Fingers in the menu slide out half a long lift open ();
  else {close ();

 }
 }
};
  /** * Revise the sliding distance of the homepage */private int fixcontentslidrange (int left) {if (Left > Mrange) {return mrange;
  else if (left < 0) {return 0;
 return to left;
  /** accompanying animation/private void animshow (int movecontentleft) {Float percent = Movecontentleft * 1.0f/mrange;//0~1 * Analysis: * Menu Area: Displacement animation, zoom animation, gradient animation * content area: Zoom animation * Background area: Brightness change * * Viewhelper.settranslationx (Mmenu, evaluate (percent,- mrange/1.2f, 0))//Displacement animation Viewhelper.setscalex (Mmenu, EvaluAte (Percent, 0.6f, 1.0f));/Zoom animation Viewhelper.setscaley (Mmenu, evaluate (percent, 0.6f, 1.0f)); Viewhelper.setalpha (Mmenu, evaluate (percent, 0.1f, 1.0f));/Gradient animation viewhelper.setpivotx (mcontent, 0);/Zoom Center Viewhelper
 . Setpivoty (Mcontent, MHEIGHT/2); Viewhelper.setscalex (mcontent, evaluate (percent, 1.0f, 0.9f));/Zoom animation Viewhelper.setscaley (mcontent, Evaluate (

 Percent, 1.0f, 0.9f)); Getbackground (). Setcolorfilter ((Integer) (Colorevaluate (Percent, Color.Black, color.transparent)), PorterDuff.Mode.SRC_OVER)//Brightness Change}/** estimator, depending on the start and end numbers, as the percentage changes to get a value, see Floatevaluator/Private Float Evaluate (
  float fraction, number startvalue, number Endvalue) {Float startfloat = Startvalue.floatvalue ();
 return startfloat + fraction * (Endvalue.floatvalue ()-startfloat); /** color value, according to the original color and end color, with the change of hundred different colors, see argbevaluator * * Private object Colorevaluate (float fraction, Object Startvalu
  E, Object endvalue) {int startint = (Integer) startvalue; int Starta = (startint >>) &amP
  0xFF;
  int startr = (startint >>) & 0xFF;
  int STARTG = (startint >> 8) & 0xFF;

  int STARTB = startint & 0xFF;
  int endint = (Integer) endvalue;
  int enda = (endint >>) & 0xFF;
  int Endr = (endint >>) & 0xFF;
  int ENDG = (endint >> 8) & 0xFF;

  int endb = endint & 0xFF;
    return (int) (Starta + (int) (fraction * (Enda-starta)) << 24) | (int)
    ((STARTR + (int) (fraction * (ENDR-STARTR)) << 16) | (int)
    ((STARTG + (int) (fraction * (ENDG-STARTG)) << 8) | (int)
 ((STARTB + (int) (fraction * (ENDB-STARTB)));

 }

⑥ we provide an open/close menu method for the user to invoke.

 /** Menu Toggle */public
 void Toggle () {
  if (isOpen) {close
   ();
  } else {
   open ()
  ;

 }} /**
 * Open Menu */
 private void Open () {
  if (Mviewdraghelper.smoothslideviewto (mcontent, Mrange, 0)) {// Determines whether the main page slides to the specified position
   viewcompat.postinvalidateonanimation (this);//triggers Computescroll
  }
  IsOpen = true;
 }

 /**
 * closed menu
 /
 private void Close () {
  if (mviewdraghelper.smoothslideviewto (mcontent, 0, 0)) {//Determine if the main page is sliding to the specified position
   Viewcompat.postinvalidateonanimation (this);//Will trigger Computescroll
  }
  IsOpen = false;
 }

 @Override public
 void Computescroll () {
  super.computescroll ();
  if (Mviewdraghelper.continuesettling (True)) {//Continuous animation, if returned indicates that the animation has not finished executing
   viewcompat.postinvalidateonanimation ( this);
  }
 

================== so far our slidingmenu is defined =====================

We use it in mainactivity.

public class Mainactivity extends activity {

 private slidingmenu mslidingmenu;

 @Override
 protected void onCreate (Bundle savedinstancestate) {
  super.oncreate (savedinstancestate);
  Requestwindowfeature (window.feature_no_title);
  Setcontentview (r.layout.activity_main);
  Initview ();
 }

 private void Initview () {
  Mslidingmenu = (slidingmenu) Findviewbyid (R.id.main_slidingmenu);
 }

 public void Click (View view) {
  mslidingmenu.toggle ();
 }
}


The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

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.