Android imitation zaker with hand-propelled special effects development "push door Effect" (with demo source download) _android

This article describes the Android imitation Zaker with hand-driven development of special effects. Share to everyone for your reference, specific as follows:

Recently in the store to download the Zaker, leisure time to take a look at the news! Found that every time you open the software into the main interface, there is an interface, you need to slide it up to a certain distance to enter the main interface. Each time you enter the software, its background may be different, in the dial when you will see the main interface, like pushing up the door! Open it and you can see the world outside. A bit different from the curtains is that when you do not open enough distance, it will be playful to close their own do not let you see the beautiful scenery outside.

That's a lot to think about, so let's look at the actual effect, and I'm going to open the Zaker two picture as shown below

The one on the left is the effect of not doing any action, the right one is the interface followed by the effect of sliding up, in the slip you will find the interface, when you do not slip to a certain distance after the curtains will slowly close, in the closing time there is a dynamic effect. Very good!

As you can see the picture content, today is the National day, here wish you all a happy holiday! So the picture may be different each time you open it. This effect looks a bit like the Android Translateanimation animation, I think it should be difficult to use animation animation to achieve this effect (of course, useful animation to achieve zaker this effect of Daniel can share with us). QQ also has a function of the interface, but QQ is to show a picture Shine and then enter the main interface.

Here's what this effect is starting to achieve.

According to the effect I realized a class that was convenient and needed to use the boots. There are comments in the code

Package Com.manymore13.scrollerdemo;
Import Android.annotation.SuppressLint;
Import Android.content.Context;
Import Android.graphics.Color;
Import android.graphics.drawable.Drawable;
Import Android.util.AttributeSet;
Import Android.util.DisplayMetrics;
Import Android.util.Log;
Import android.view.MotionEvent;
Import Android.view.View;
Import Android.view.WindowManager;
Import Android.view.animation.AccelerateInterpolator;
Import Android.view.animation.BounceInterpolator;
Import Android.view.animation.Interpolator;
Import Android.widget.FrameLayout;
Import Android.widget.ImageView;
Import Android.widget.RelativeLayout;
Import Android.widget.Scroller;
 public class Pulldoorview extends Relativelayout {private context mcontext;
 Private Scroller Mscroller;
 private int mscreenwidth = 0;
 private int mscreenheigh = 0;
 private int mlastdowny = 0;
 private int mcurryy;
 private int mdely;
 Private Boolean mcloseflag = false;
 Private ImageView Mimgview; Public Pulldoorview (Context ContexT) {super (context);
  Mcontext = context;
 Setupview ();
  Public Pulldoorview (context, AttributeSet attrs) {Super (context, attrs);
  Mcontext = context;
 Setupview ();  @SuppressLint ("Newapi") private void Setupview () {//This interpolator you can set the other I choose here is a bouncing effect of interpolator interpolator
  Polator = new Bounceinterpolator ();
  Mscroller = new Scroller (Mcontext, polator);
  Get screen resolution WindowManager WM = (WindowManager) (Mcontext. Getsystemservice (Context.window_service));
  Displaymetrics dm = new Displaymetrics ();
  Wm.getdefaultdisplay (). Getmetrics (DM);
  Mscreenheigh = Dm.heightpixels;
  Mscreenwidth = Dm.widthpixels;
  Here you must set the transparent background, otherwise it will affect you to see the bottom layout this.setbackgroundcolor (Color.argb (0, 0, 0, 0));
  Mimgview = new ImageView (mcontext);
  Mimgview.setlayoutparams (New Layoutparams (Layoutparams.match_parent, layoutparams.match_parent)); Mimgview.setscaletype (ImageView.ScaleType.FIT_XY);/fill the entire screen mimgview.setimageresource (R.DRAWABLE.BG1); Default Background AddvieW (Mimgview);
 //Set push door background public void setbgimage (int id) {mimgview.setimageresource (ID);
 //Set push door background public void Setbgimage (drawable drawable) {mimgview.setimagedrawable (drawable); }//Push door animation public void Startbounceanim (int starty, int dy, int duration) {mscroller.startscroll (0, starty, 0, dy, du
  Ration);
 Invalidate ();
  @Override public boolean ontouchevent (Motionevent event) {int action = event.getaction ();
   Switch (action) {Case MotionEvent.ACTION_DOWN:mLastDownY = (int) event.gety ();
   System.err.println ("action_down=" + mlastdowny);
  return true;
   Case MotionEvent.ACTION_MOVE:mCurryY = (int) event.gety ();
   System.err.println ("action_move=" + mcurryy);
   mdely = Mcurryy-mlastdowny;
   Only the upper sliding valid if (mdely < 0) {Scrollto (0,-mdely) is allowed;
   } System.err.println ("-------------" + mdely);
  Break
   Case MotionEvent.ACTION_UP:mCurryY = (int) event.gety ();
   mdely = Mcurryy-mlastdowny; if (mdely < 0) {if (Math).ABS (mdely) > Mscreenheigh/2) {//slide up more than half a screen when opening up vanishing animation Startbounceanim (this.getscrolly (), Mscreenheigh,
     450);
    Mcloseflag = true;
    else {////slide up not more than half of the screen to open the downward motion animation Startbounceanim (this.getscrolly (),-this.getscrolly (), 1000);
  }} break;
 Return Super.ontouchevent (event); @Override public void Computescroll () {if (Mscroller.computescrolloffset ()) {Scrollto (Mscroller.getcurrx ()), mSc
   Roller.getcurry ());  LOG.I ("Scroller", "getcurrx () =" + Mscroller.getcurrx () + "Getcurry" () = "+ Mscroller.getcurry () +" getfinaly ()
   = "+ mscroller.getfinaly ());
  Don't forget to update the interface postinvalidate ();
   } else {if (Mcloseflag) {this.setvisibility (view.gone);

 }
  }
 }
}

View of the Scrollto function, so that the view has a scrolling effect, like ListView, its contents can be sliding, viewgroup inherit view, so relativelayout can do sliding effect, In addition to the downward-moving effect is used to scroller class, and in the construction of Scroller class when adding bounceinterpolator, you can also add other interpolation. In fact, Scroller is just a class to assist view sliding, to help view the class that stores the sliding data, and when the view slides, you can remove the sliding data from the scroller, and the real sliding motion effect is to use Scrollto to reach the destination in an instant, View combines scroller and scroller to achieve the effect of this push gate.

Run the demo program to see the effect

The image above is a screenshot running on the simulator and looks a bit card. In fact, the test on the real machine is very smooth. The effect of Zaker is basically like this.

If you want to use this class, if you want to achieve this effect, then please meet the following two conditions.

1. Pulldoorview Match_parent occupies a full screen like the following so the entire project parent ViewGroup can be used Framelayout

2.PullDoorView must be placed at the top of the interface to enable it to get touch events

 <com.manymore13.scrollerdemo.pulldoorview android:id= "@+id/myimage" Android: Layout_width= "Match_parent" android:layout_height= "match_parent" android:background= "#ddd" > <Button androi D:id= "@+id/btn_above" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_cen Terinparent= "true" android:text= "second layer"/> <textview android:id= "@+id/tv_hint" android:layout_width= Ontent "android:layout_height=" Wrap_content "android:layout_alignparentbottom=" true "Android:layout_centerhorizon Tal= "true" android:layout_marginbottom= "10DP" android:text= "on the slide can go to the home page" android:textcolor= "#ffffffff" Android:te Xtsize= "18sp"/> </com.manymore13.scrollerdemo.PullDoorView> 

Because Pulldoorview is a relativelayout, so you can play your own imagination to add any view or viewgroup in it, the XML above I added a button and a textview, I think these two view you can again above the dynamic picture should see. In addition Pulldoorview can change the background picture as needed
You can pulldoorview.setbgimage (picture)
All right, write so much, imitation zaker with the effect of pushing upward end of the implementation.

Full Instance code click here Download the site .

More interested readers of Android related content can view the site: "Summary of the use of Android controls," "The Summary of Android view tips," "Android File Operation tips Summary", "Android operation SQLite Database Skills Summary", " Android operations JSON format Data tips summary, "Android Database Operation skills Summary", "Android programming activity Operation Skills Summary", "Android programming development of SD card operation method Summary", "Android Development and advanced tutorial And the Android resource Operation Skills Summary

I hope this article will help you with the Android program.