Android imitation netease One-dollar treasure pull the animation effect of a client Drop-down (i) _android

Source: Internet
Author: User
Tags gety

Last week to write a demo, modeled on NetEase a dollar of the drop-pull refresh effect.

The original effect is (part one) a little sun pulled down and then loosened up and bounced back up,

(Part II) drop another coin to rotate in the middle axis.

The effect of this article is the first part, the effect of the demonstration diagram is as follows:

GIF looks more like Carol ... In fact, the real machine demo effect is still very smooth.

The following analyzes the implementation process:

Because time is limited did not write in the Drop-down refresh component, also did not encapsulate into a separate component, just write a view behind the main layout and then implement the corresponding operation, encapsulation is not difficult, here does not take time BB, the following is the layout file:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Tools:context" = ". Aty. Mainactivity "> <location.haidian.com.wypulltoreflush.view.ngimgview android:id=" @+id/ngimg_main "Android: Layout_width= "Match_parent" android:layout_height= "match_parent"/> <imageview android:id= "@+id/img_main_sun" "Android:layout_width=" 50DP "android:layout_height=" 50DP "android:layout_centerhorizontal=" true "Android:layout_ margintop= "5DP" android:src= "@drawable/ic_sun1"/> <linearlayout android:layout_width= "Match_parent" Android: 
layout_height= "Match_parent" android:background= "#00123456" android:orientation= "vertical" > <relativelayout Android:layout_width= "Match_parent" android:layout_height= "55DP" android:background= "#FF4081" > </ relativelayout> <view android:layout_width= "Match_parent" android:layout_height= "0.5DP" android:background= "@android: Color/darker_gray" ></View> < Location.haidian.com.wypulltoreflush.view.NGReFlashListView android:id= "@+id/lv_main" android:layout_width= "fill _parent "android:layout_height=" 0DP "android:layout_weight=" 1 "android:cachecolorhint=" #00000000 "/> </ Linearlayout> </RelativeLayout>

Layout file preview:

Because it's transparent, you can see the layout behind without the item.

Code implementation:

The event is judged by the ngreflashlistview of the class, and then the corresponding event is passed to the Ngimageview by the callback to change the view display.

The following are the source code for two classes:

Ngreflashlistview class:

Package Location.haidian.com.wypulltoreflush.view; 
Import Android.content.Context; 
Import Android.util.AttributeSet; 
Import Android.view.LayoutInflater; 
Import android.view.MotionEvent; 
Import Android.view.View; 
Import Android.view.ViewGroup; 
Import Android.widget.AbsListView; 
Import Android.widget.AbsListView.OnScrollListener; 
Import Android.widget.ListView; 
Import LOCATION.HAIDIAN.COM.WYPULLTOREFLUSH.R; 
public class Ngreflashlistview extends ListView implements Onscrolllistener {private View header; 
private int headerheight; 
private int firstvisibleitem; 
private int scrollstate; 
Private final int NONE = 0; 
Private final int PULL = 1; 
Private final int relese = 2; 
Private final int reflashing = 3; 
Public Ngreflashlistview {Super (context); 
Initview (context); 
Public Ngreflashlistview (context, AttributeSet attrs) {Super (context, attrs); 
Initview (context); Public Ngreflashlistview, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle); 
Initview (context); }/** * @param context */private void Initview (context context) {Layoutinflater inflater = Layoutinflater.from (cont 
EXT); 
Header = Inflater.inflate (R.layout.layout_heard, NULL); 
Measureview (header); 
Headerheight = Header.getmeasuredheight (); 
TopPadding (-headerheight); 
This.addheaderview (header); 
This.setonscrolllistener (this); 
}/** * @param view/private void Measureview (view view) {Viewgroup.layoutparams p = view.getlayoutparams (); if (p = = null) {p = new Viewgroup.layoutparams (ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTEN 
T); 
int width = viewgroup.getchildmeasurespec (0, 0, p.width); 
int height; 
int tempheight = P.height; 
if (Tempheight > 0) {height = Measurespec.makemeasurespec (tempheight, measurespec.exactly); 
else {height = measurespec.makemeasurespec (0, measurespec.unspecified); 
} view.measure (width, height); /** * @param toppadding * * Private VOID toppadding (int toppadding) {header.setpadding (Header.getpaddingleft (), toppadding, Header.getpaddingright (), 
Header.getpaddingbottom ()); 
Header.invalidate (); @Override public void Onscroll (Abslistview view, int firstvisibleitem, int visibleitemcount, int totalitemcount) {T 
His.firstvisibleitem = Firstvisibleitem; 
@Override public void onscrollstatechanged (Abslistview view, int scrollstate) {this.scrollstate = scrollstate; 
Boolean isremark;//initializes the identity int starty; 
int state; @Override public boolean ontouchevent (motionevent ev) {switch (ev.getaction ()) {Case MotionEvent.ACTION_DOWN:if (fi 
Rstvisibleitem = = 0) {onrlvscrolllistener.onscrollychangged (0, 0); 
Isremark = true; 
Starty = (int) ev.gety (); 
} break; 
Case MotionEvent.ACTION_MOVE:onMove (EV); 
Break 
Case MotionEvent.ACTION_UP:if (state = = Relese) {onrlvscrolllistener.onscrollychangged (0, 3); 
state = reflashing; 
Reflashviewbystate (); 
Ireflashlistener.onreflash (); ' Else if ' (state = Pull) {state = NONE; 
Onrlvscrolllistener.onscrollychangged (0, 0); 
Isremark = false; 
Reflashviewbystate (); 
} break; 
return super.ontouchevent (EV); int space; spacing int toppadding; 
Headview distance from the top, initial -200/** * @param EV/private void OnMove (Motionevent ev) {if (!isremark) {return; 
int tempy = (int) ev.gety (); 
Space = Tempy-starty; 
if (space >= 230) {space = 230; 
} toppadding = Space-headerheight; 
Onrlvscrolllistener.onscrollychangged (space, state); 
Switch (state) {case none:if (Spaces > 0) {state = PULL; 
Reflashviewbystate (); 
} break; 
Case Pull:toppadding (toppadding); 
if (space = = Headerheight + && scrollstate = = scroll_state_touch_scroll) {state = Relese; 
Reflashviewbystate (); 
} break; 
Case Relese:if (Spaces < Headerheight +) {state = PULL; 
Reflashviewbystate (); 
else if (space <= 0) {state = NONE; 
Isremark = false; 
Reflashviewbystate (); 
} break; }/** * Control dropdown Refresh Image text Display * * Private VOID reflashviewbystate () {switch (state) {case NONE://Slow sliding up toppadding (-headerheight); 
Break 
Case Pull:break; 
Case Relese:break; 
Case Reflashing:break; 
}/** * Refresh complete */public void Reflashcomplete () {state = NONE; 
Onrlvscrolllistener.onscrollychangged (0, state); 
Isremark = false; 
Reflashviewbystate (); 
}//Draw the Background interface public interface Onrlvscrolllistener {void onscrollychangged (int Y, int state); 
Private Onrlvscrolllistener Onrlvscrolllistener; public void Setonrlvscrolllistener (Onrlvscrolllistener onrlvscrolllistener) {This.onrlvscrolllistener = 
Onrlvscrolllistener; } 
}

Ngimgview.java

The implementation is relatively simple, according to the callback state to change the small sun and two golfers and the arm of the drawing on it.

Package Location.haidian.com.wypulltoreflush.view; 
Import Android.content.Context; 
Import Android.graphics.Bitmap; 
Import Android.graphics.Canvas; 
Import Android.graphics.Color; 
Import Android.graphics.Paint; 
Import Android.graphics.RectF; 
Import android.graphics.drawable.BitmapDrawable; 
Import Android.util.AttributeSet; 
Import Android.util.Log; 
Import Android.widget.ImageView; 
Import LOCATION.HAIDIAN.COM.WYPULLTOREFLUSH.R; 
/** * Created by Nangua on 2016/8/28. 
* * public class Ngimgview extends ImageView implements Ngreflashlistview.onrlvscrolllistener {private float scale; 
Private final int NONE = 0; 
Private final int PULL = 1; 
Private final int relese = 2; 
Private final int reflashing = 3; 
public int state = 0; private float with; 
Screen total width private float scrolly; 
Private Bitmap sun0; 
public float = 0; 
Public Ngimgview (context, AttributeSet attrs) {Super (context, attrs); 
Initview (); private void Initview () {sun0 = (bitmapdrawable) getresOurces (). getdrawable (R.drawable.ic_sun0)). Getbitmap (); 
Scale = This.getresources (). Getdisplaymetrics (). density; 
} @Override protected void OnDraw (Canvas Canvas) {Paint Paint = new Paint (); 
Paint.setantialias (TRUE);//Anti-aliasing Paint.setcolor (Color.parsecolor ("#C4885A")); 
LOG.D ("Xiaojingyu", "state:" + state); 
if (state!=3) {time = 0;//reset times//Draw two golfers canvas.drawcircle (WITH/2-scale, scale, 5 * scale); 
Canvas.drawcircle (WITH/2 + * scale, scale, 5 * scale, paint); Picture Smiley Canvas.drawbitmap (sun0, NULL, new RECTF (WITH/2-M, scale + scrolly-(scrolly/230) *, WITH/2 + 
Scale + scrolly-(scrolly/230) * +), NULL); 
Draw Arm Paint.setstrokewidth (1); 
Canvas.drawline (WITH/2-scale, scale, WITH/2-m, scale scrolly + paint); 
Canvas.drawline (WITH/2 + * scale, scale, WITH/2 +, * scale + scrolly, paint); else if (state = = 3) {//1 seconds pull up, 2 seconds rotate//First second if (time <) {TIME + 1; 
Draw two golfers canvas.drawcircle (WITH/2-scale, scale, 5 * scale, paint); 
Canvas.drawcircle (WITH/2 + * scale, scale, 5 * scale, paint);  Picture Smiley Canvas.drawbitmap (sun0, NULL, new RECTF (WITH/2-m, scale + 180-(TIME/30) * 230, WITH/2 + 50, 55 
* scale + 280-(TIME/30) * 230), NULL); 
Draw Arm Paint.setstrokewidth (1); 
Canvas.drawline (WITH/2-scale, scale, WITH/2-m, scale + 230-(TIME/30) * 230, paint); 
Canvas.drawline (WITH/2 + * scale, scale, WITH/2 +, * scale + 230-(TIME/30) * 230, paint); 
Postinvalidatedelayed (1); 
} else {if (!isbeginmainanimation) {isbeginmainanimation = true; 
Ireflashlistener.onreflash (); 
}} super.ondraw (canvas); 
public static Boolean isbeginmainanimation = false; @Override protected void OnLayout (Boolean changed, int left, int. top, int right, int bottom) {super.onlayout (changed, l 
EFT, top, right, bottom); 
with = This.getwidth (); } 
@Override public void onscrollychangged (int Y, int state) {this.state = state; 
Switch (state) {case none:break; 
Case PULL://dropdown scrolly = Y; 
Break 
Case Relese:break; 
Case Reflashing:break; } private Ireflashlistener Ireflashlistener; 
Callback Interface public void Setinterface (Ireflashlistener ireflashlistener) {this.ireflashlistener = Ireflashlistener; 
}/** * @author Administrator/public interface Ireflashlistener {void Onreflash (); } 
}

The above is a small set to introduce the Android imitation NetEase one dollar treasure client pull the animation effect (a), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!

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.