Listview_android with parallax effect on Android

What is the parallax effect?

The so-called parallax effect is very common in web design and mobile applications, and we can find it in some of the main platforms, from Windows Phone to iOS and even Android. According to Wikipedia, Parallax Scrolling is a special rolling technique in computer graphics, where the camera moves the background image slower than the foreground image, causing the illusion of visual depth.

So what is the parallax effect? Look at the effect map together to know:

We can see ListView the HeaderView sliding that will follow ListView and get bigger, and HeaderView the picture in it will have a scaling effect. These can be implemented by using property animations. Then let's do it!

Start by customizing several properties, which you can then use:

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
 <declare-styleable name= "Zoomlistview" >
 <!--headerview height--> <attr name= "header_height" format= "dimension|reference" ></attr
  >
  <!--headerview maximum height-->
 <attr name= "header_max_height" format= "Dimension|reference" >< /attr>
 <!--Headerview inside the picture of the largest scale-->
  <attr name= "Header_max_scale" format= "float" ></ attr>
 </declare-styleable>
</resources>

ZoomListView The class is then created and inherits from ListView :

public class Zoomlistview extends ListView {//maximum amount of scalability private final float Defaultheadermaxscale = 1.2f;
 Head of the largest height private float headermaxheight;
 Head Initial height private float headerheight;
 Head default initial height private float defaultheaderheight;
 Head defaults to maximum height private float defaultheadermaxheight;
 Private ImageView Headerview;
 Private Viewgroup.layoutparams Layoutparams;
 Private LinearLayout LinearLayout;

 Maximum zoom value private float Headermaxscale;
 Public Zoomlistview {This (context, NULL);
 Public Zoomlistview (context, AttributeSet attrs) {This (context, attrs, 0);
  Public Zoomlistview (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr); Defaultheaderheight = Typedvalue.applydimension (Typedvalue.complex_unit_dip, 160, Context.getresources ().
  Getdisplaymetrics ()); Defaultheadermaxheight = Typedvalue.applydimension (Typedvalue.complex_unit_dip, Context.getresources ().
  Getdisplaymetrics ()); TypedArray A = Context.obtainstyledattributes (Attrs, R.styleable.zoomlistview);
  Headerheight = A.getdimension (R.styleable.zoomlistview_header_height, defaultheaderheight);
  Headermaxheight = A.getdimension (R.styleable.zoomlistview_header_max_height, defaultheadermaxheight);
  Headermaxscale = A.getfloat (R.styleable.zoomlistview_header_max_scale, Defaultheadermaxscale);
  A.recycle ();
 Initview (); }
 ...
}

Here is the step-by-step, set the original value of the custom attribute, then call initView() , then look at the initView() method:

private void Initview () {
 Headerview = new ImageView (GetContext ());
 Headerview.setscaletype (ImageView.ScaleType.CENTER_CROP);
 LinearLayout = new LinearLayout (GetContext ());
 Linearlayout.addview (Headerview);
 Layoutparams = Headerview.getlayoutparams ();
 if (Layoutparams = = null) {
  layoutparams = new Viewgroup.layoutparams (ViewGroup.LayoutParams.MATCH_PARENT, (int) headerheight);
 } else {
  layoutparams.width = ViewGroup.LayoutParams.MATCH_PARENT;
  Layoutparams.height = (int) headerheight;
 }
 Headerview.setlayoutparams (layoutparams);
 Addheaderview (LinearLayout);
}

public void Setdrawableid (int id) {
 headerview.setimageresource (ID);
}

Can be seen in the initView() inside we created and headerView added to the ListView head. And setDrawableId(int id) is to headerView set the relevant picture.

Here is the main implementation code for Parallax effects:

@Override
protected Boolean overscrollby (int deltax, int deltay, int scrollx, int scrolly, int scrollrangex, int scrol Lrangey, int maxoverscrollx, int maxoverscrolly, Boolean istouchevent) {
 if (DeltaY < 0 && istouchevent) { C3/>if (Headerview.getheight () < headermaxheight) {
   int newheight = Headerview.getheight ()
     + math.abs ( DELTAY/3);
   Headerview.getlayoutparams (). height = newheight;
   Headerview.requestlayout ();
   float temp = 1 + (headermaxscale-1f) * (Headerview.getheight ()-headerheight)/(headermaxheight-headerheight);
   Headerview.animate (). ScaleX (temp).
     ScaleY (temp). Setduration (0). Start ();
  }
 }
 Return Super.overscrollby (DeltaX, DeltaY, Scrollx, scrolly, Scrollrangex, Scrollrangey, MAXOVERSCROLLX, MaxOverScrollY , istouchevent);
}

We rewrote the overScrollBy() method, when the DeltaY is less than 0 o'clock (that is ListView , to the top, but the user gestures or pulls down) to dynamically set headerView the height and headerView the scale value. This can result headerView in higher and larger images.

The next thing to consider is that when the user releases his or her finger, it's back to the original. So we should be in there onTouchEvent(MotionEvent ev) to implement the relevant operations:

@Override public boolean ontouchevent (motionevent ev) {switch (ev.getaction ()) {case MotionEvent.ACTION_UP:star
   Tanim ();
 Break
return super.ontouchevent (EV); //Start animation private void Startanim () {Valueanimator animator = Valueanimator.offloat (Headerview.getheight (), Headerheig
 HT); Animator.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void onanimationupdate (Valu
   Eanimator animation) {Float fraction = (float) animation.getanimatedvalue ();
   Headerview.getlayoutparams (). Height = (int) fraction;
  Headerview.requestlayout ();
 }
 });
 Animator.setduration (500);

 Animator.setinterpolator (New Linearinterpolator ());
 Valueanimator Animator2 = Valueanimator.offloat (Headerview.getscalex (), 1f); Animator2.addupdatelistener (New Valueanimator.animatorupdatelistener () {@Override public void onanimationupdate (Val
   Ueanimator animation) {Float fraction = (float) animation.getanimatedvalue (); Headerview.setscalex (fraction);
  Headerview.setscaley (fraction);
 }
 });
 Animator2.setduration (500);
 Animator2.setinterpolator (New Linearinterpolator ());
 Animator.start ();
Animator2.start (); }

The above code simple point, is in Action_up, to start two attribute animation, one property animation is to headerView restore the height of the original value, another property animation is to headerView scale back to 1f. I believe we all can understand.

Summarize

The above is the entire content of this article, I hope this article content for your Android developers can help, if you have questions you can message exchange.