High-imitation mobile phone QQ5.0 interface Frame

This time the mobile phone QQ update from the objective point of view, is still very good, more simple, the control is also customized, the interface has a big change, but the most important frame is its left and right sliding mechanism. Let's take a look at its effect first.

You can see the way it is a sliding method menu from left to right, the main thing is the implementation of this control class. The rest of the feeling is not much of a problem, let me see how this effect should be achieved.

First get something to analyze how this effect comes out. I took a closer look at the main points to be aware of.

1: The menu appears with a magnifying effect and is accompanied by a apha effect

2: The main content panel above is a scaled animation

3: You can see the boundary of this menu and the boundary distance above the main content panel. I took 1/4, and it should be right.

4: It should also be noted that the listview of these controls is the event mask.

The main question should be the few.

Below I will be how to achieve this sliding pager to everyone to say that the code implementation.

Package Com.edsheng.view;import Android.animation.objectanimator;import Android.animation.PropertyValuesHolder; Import Android.content.context;import Android.util.attributeset;import Android.view.motionevent;import Android.view.view;import android.widget.relativelayout;import android.widget.toast;/** * @version 1.0 * @FielName: Dragpager.java * @Date: 2014/8/5 * @author Edsheng */public class Dragpager extends Relativelayout {private View mmenu; /menu Private View mcontent; Content view private int mstartx = 0; Click Start private float mcontentstarttransx = 0; The content view starts by tapping the distance of the private float MMENUSTARTTRANSX = 0;//menu to start tapping the distance of the sliding private int default_right_margin = Getresources (). Getdisplaymetrics (). widthpixels/4;//menu distance from border distance on 1/4 screen objectanimator mcontent_animator;//content view Animation Objectanimator mmenu_animator;//Menu Animation Private Boolean Misdrag = false; Whether you are currently dragging the final int defalt_drag_distence = 40;//The default value for sliding is the public dragpager (context context) {super (context);} Public Dragpager (context context, AttributeSet attrs,int defstyle) {Super (context, attrs, Defstyle);} Public Dragpager (context context, AttributeSet Attrs) {Super (context, attrs);} public void SetMenu (View menu) {mmenu = menu; Layoutparams layoutparams = new Layoutparams (layoutparams.match_parent,layoutparams.match_parent); Layoutparams.rightmargin = Default_right_margin;addview (menu, Layoutparams); Mmenu.setscaley (0.75f);// Initialize Y to 0.75 so high Mmenu.settranslationx (-default_right_margin * 3);//Initialize menu to-y distance}public void setcontent (View content) { Mcontent = Content;addview (content);}  /** * Calculates where the current menux can slide * * @param distence * @return */private float getmenudragx (float distence) {float newx = distence + Mmenustarttransx;if (newx <=-default_right_margin * 3) {newx =-default_right_margin * 3;} else if (newx >= 0) {NE WX = 0;} return newx;}  /** * Calculate content view x Slide position * * @param distence * @return */private float getcontentdragx (float distence) {float newx = distence + Mcontentstarttransx;if (newx <= 0) {newx = 0;} else if (newx >= mcontent.getwidth ()- Default_right_margin) {newx = Mcontent.getwidth ()-default_right_margin;} return newx;} /** * Stop animation */private void StopAnimation () {if (mcontent_animator! = NULL && Mmenu_animator! = null) {Mcontent_anim Ator.cancel (); Mmenu_animator.cancel ();}} Move private void Move (float distence) {Float nowx = GETCONTENTDRAGX (distence); if (nowx! = Mcontent.gettranslationx ()) {MC Ontent.settranslationx (nowx); float scale = NOWX/(Mcontent.getwidth ()-default_right_margin); The calculated Alph range is 0-1mcontent.setscaley (1-scale * 0.25f); The content of the Y-scale Mmenu.settranslationx (GETMENUDRAGX (distence)); Set the distance of the menu Mmenu.setscaley (0.75f + scale * 0.25f);//Set the menu's Y scaling mmenu.setalpha (scales);//Menu Alpha}} @Overridepublic Boolean Dispatchtouchevent (motionevent ev) {switch (ev.getaction ()) {case MotionEvent.ACTION_DOWN:stopAnimation (); Stop animation mstartx = (int) ev.getrawx (); Gets the click Initialization xif (mcontent! = null) MCONTENTSTARTTRANSX = Mcontent.gettranslationx ();//Gets initialization xif (mmenu! = null) MMENUSTARTTRANSX = Mmenu.gettranslationx (); Break;caSe motionevent.action_move://when the left and right slide to the threshold is considered to be dragging the IF (Math.Abs (EV.GETRAWX ()-Mstartx) > defalt_drag_distence) {Misdrag = true;} Break;case MotionEvent.ACTION_UP:misDrag = False;break;} return super.dispatchtouchevent (EV);} @Overridepublic boolean onintercepttouchevent (motionevent ev) {if (Misdrag) {return true;//is not distributed downward has been intercepted} else {return FA Lse Give the event to the child view processing and then distribute it through the dispatch of the child view @Overridepublic the Boolean ontouchevent (Motionevent event) {if ( Event.getactionindex () > 1) return True;switch (Event.getaction ()) {case MotionEvent.ACTION_DOWN:return true;// Consume this event so that it does not pass case MotionEvent.ACTION_MOVE:float distence = event.getrawx ()-mstartx; Handle Mobile Move here (distence); Break;case MotionEvent.ACTION_UP:case MotionEvent.ACTION_CANCEL:toggle (); Window rebound break;} Return Super.ontouchevent (event);} /** * Rebound animation */private void Toggle () {if (Mcontent.gettranslationx () > Default_right_margin * 2) {//Right animation//first content animation p Ropertyvaluesholder Content_transani = propertyvaluesholder.offloat ("Translationx", MCoNtent.gettranslationx (), Mcontent.getwidth ()-default_right_margin); Propertyvaluesholder Content_scaley = propertyvaluesholder.offloat ("ScaleY", Mcontent.getscaley (), 0.75f); MContent_ Animator = Objectanimator.ofpropertyvaluesholder (Mcontent,content_transani, Content_scaley); MContent_ Animator.start ();//Here the menu animation Propertyvaluesholder Menu_transani = propertyvaluesholder.offloat ("TranslationX", Mmenu.gettranslationx (), 0); Propertyvaluesholder Menu_scaley = propertyvaluesholder.offloat ("ScaleY", Mmenu.getscaley (), 1f); Propertyvaluesholder Menu_alpha = propertyvaluesholder.offloat ("Alpha", Mmenu.getalpha (), 1f); mmenu_animator = Objectanimator.ofpropertyvaluesholder (Mmenu,menu_transani, Menu_scaley, Menu_alpha); MMenu_animator.start ();} else {//Left animation Propertyvaluesholder Content_transanx = propertyvaluesholder.offloat ("Translationx", Mcontent.gettranslationx (), 0); Propertyvaluesholder Content_scaley = propertyvaluesholder.offloat ("ScaleY", Mcontent.getscaley (), 1.0f); MContent_ Animator = ObjectaniMator.ofpropertyvaluesholder (Mcontent,content_transanx, Content_scaley); Mcontent_animator.start (); Propertyvaluesholder Menu_transani = propertyvaluesholder.offloat ("Translationx", Mmenu.gettranslationx (),-DEFAULT _right_margin * 3); Propertyvaluesholder Menu_scaley = propertyvaluesholder.offloat ("ScaleY", Mmenu.getscaley (), 0.75f); Propertyvaluesholder Menu_alpha = propertyvaluesholder.offloat ("Alpha", Mmenu.getalpha (), 0f); mmenu_animator = Objectanimator.ofpropertyvaluesholder (Mmenu,menu_transani, Menu_scaley, Menu_alpha); MMenu_animator.start ();}}}

One thing to be aware of is the masking of events and the handling of the drag, then a few zoom places, and then we'll verify that the control is available, and that the left side of the menu is a content that should be used when we need to use it.

public class Mainactivity extends Activity {@Overrideprotected void onCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Requestwindowfeature (window.feature_no_title);D ragpager dragpager = new DragPager (this); View content = new View (this), Content.setbackgroundcolor (Color.Blue);d ragpager.setcontent (content); View Mentu = new View (this), Mentu.setbackgroundcolor (color.red);d Ragpager.setbackgroundcolor (Color.argb (122, 122, 122, 122));d Ragpager.setmenu (Mentu); Setcontentview (Dragpager);}

Finally, let's see how it works.

Here the reason for the card is mainly because of my gif do bad reasons, and then as long as the interface came out, the other things are better to engage in, Originally want to thoroughly end of the mobile phone QQ5.0 interface moved over, but no resistance to hand Q encryption is now doing more and more good, can not get resources, but this interface is out, I believe that the other interface is very easy to fix it, this is inside I feel the most important thing. Interested children's shoes can continue to write down Oh, can also be used as a control to use OH.