High imitation ink weather Lara stretched pictures

Brief introduction

Recently more busy, on the study of the next, the key is not to watch things, on the sleepy Ah. Ink Weather This application has a lot of places to learn, this article, said his "I"tab under the picture to show the effect, if you pay attention to, like QQ Friends Dynamic also have similar effect.

Code Analysis

The code is relatively simple, rewrite a ScrollView class, first of all, say his principle, I was the ID to get this ImageView, And then get his TopMargin , that is, the offset value of the mask , in the touch of the ImageView of the TopMargin Make a change to the effect, let go of a property animation to make him revert to the previous position is Ok . All right. That's the way it works.

Let's look at the layout XML first .

<com.wjj.imagepull.pullscrollview xmlns:android= "Http://schemas.android.com/apk/res/android" Android:layout_ Width= "Match_parent" android:background= "@android: Color/white" android:id= "@+id/scroll_view" android:scrollbars= " None "android:layout_height=" Match_parent "> <linearlayout android:orientation=" vertical "Androi D:layout_width= "Match_parent" android:layout_height= "match_parent" > <relativelayout androi                D:layout_width= "Match_parent" android:layout_height= "wrap_content" > <imageview Android:id= "@+id/pull_img" android:layout_margintop= " -50DP" android:src= "@drawable/personal _back "android:layout_width=" match_parent "android:scaletype=" Fitxy "Android: layout_height= "250DP"/> <imageview android:layout_width= "Wrap_content" an Droid:layout_height= "Wrap_contenT "android:src=" @drawable/feed_fengfeng "android:scaletype=" Fitxy "Android:la Yout_centerinparent= "true"/> </relativelayout>//omitted here ... </linearlayout></com.wjj.imagepull . Pullscrollview>

You see this setting?android:layout_margintop= " -50DP"This is how much to hide, and thisandroid:id= "@+id/pull_img"thisIDdon't change it, that's what I'm going to get.ImageViewthe.

On the code.

public class Pullscrollview extends ScrollView implements Viewtreeobserver.ongloballayoutlistener {view view;    int srctopmargion;    float lasty;     float OffsetY;        Public Pullscrollview (context context, AttributeSet Attrs) {Super (context, attrs);        Viewtreeobserver observer = Getviewtreeobserver ();    if (NULL! = observer) Observer.addongloballayoutlistener (this);        } @Override protected void Onfinishinflate () {super.onfinishinflate ();    View = Findviewbyid (r.id.pull_img);        } @Override public boolean ontouchevent (motionevent ev) {int action = ev.getaction ();        Float y = ev.gety ();        LOG.D ("Ontouchevent", "action=" + Action + ", y=" + y);        Marginlayoutparams params = (marginlayoutparams) view.getlayoutparams ();                Switch (action) {case MotionEvent.ACTION_DOWN:lastY = y;            Break    Case Motionevent.action_move://Calculates the sliding y-direction offset value            OffsetY = Y-lasty; Move Down if (OffsetY > 0) {//swipe to see all pictures displayed, hand over to the original logic handle if (PARAMS.TOPMA                    Rgin = = 0) {return super.ontouchevent (EV);  }//When not in the drop-down picture, move down to the original logic handle if (getscrolly ()! = 0) {return                    Super.ontouchevent (EV);                    }//Can drop the picture in case params.topmargin + = OFFSETY/10;                    LOG.D ("Ontouchevent", "topMargin" + Params.topmargin + ", lasty=" + Lasty + ", y=" + y + ", OffsetY" + OffsetY ");                    if (params.topmargin >= 0) {params.topmargin = 0;                    } view.setlayoutparams (params);                Invalidate ();                } lasty = y;            Break Case MOTIONEVENT.ACTION_UP://Not at the same time as the original margion offset if (paramS.topmargin! =-srctopmargion) {log.d ("action_up", "movey=" + (Srctopmargion + params.topmargin)); Scroll the difference between the original offset value and the now offset value eg:3~10 objectanimator animator = Objectanimator.ofint (this, "mov                    EY ", Params.topmargin,-srctopmargion);                    Animator.setduration (200);                    Animator.setinterpolator (New Linearinterpolator ());                Animator.start ();        } break;    } return super.ontouchevent (EV); }/** * Set y value in Move * * @param value */public void Setmovey (int value) {Marginlayoutparams PA        Rams = (marginlayoutparams) view.getlayoutparams ();        Params.topmargin = value;        LOG.D ("Computescroll", "topmargin=" + params.topmargin);        View.setlayoutparams (params);    Invalidate (); } @Override public void Ongloballayout () {marginlayoutparams params = (marginlayoutparams) view.getlayoutpa        Rams (); SrctoPmargion =-params.topmargin;        LOG.D ("Srctopmargion", "" "+ srctopmargion);    Getviewtreeobserver (). Removeglobalonlayoutlistener (this); }}

InPullscrollviewconstructs the method inside registers theOngloballayoutlistenerto monitorTreea callback after the tree is changed to getImageViewof theTopMarginas a target value for later restore, theonfinishinflateget this inside .View,view = Findviewbyid (r.id.pull_img);

Ontouchevent is our main battlefield, the logic is here, first judge in the action_move , is not sliding downward, if so, there are 2 The situation is to be excluded, is not to make topMargin Change, what is it?

The first one is that the topMargin are sliding to 0 , so don't skate.

The second is to slide in other places, for example, it is normal to decline, do not do the processing.

In addition to these 2 cases, here is the change of topMargin, here I added a offsety/10 divided by 10 The resistance is to prevent slipping too fast, which you can customize.

When I lift my lift, if I say my topMargin is different from the original value of the previous, remember, the value that we obtained in ongloballayout , All you need to do is start an animated panning slide to the top.

When the automatic sliding, here with the objectanimator Property animation, in fact, the use of the Scroll, why do not have him, because the rewritten The Computescroll method, if handled in the inside, will be in conflict with their own scrolling, interested can try.

There is also a Setmovey method, which is the method that the property animation calls, the value returned according to the linear interpolation, and then used to change the topMarginuntil the first state isrestored.

Conclusion

OK, this project is finished, but I only in my millet phone test, other resolutions do not know if there will be problems, we can test to see.

Github Address

Https://github.com/wu928320442/ImagePull

High imitation ink weather Lara stretched pictures