Android UI-PullToRrefresh custom pull-down refresh animation,

Source: Internet
Author: User

Android UI-PullToRrefresh custom pull-down refresh animation,

Android UI-PullToRrefresh custom pull-down refresh Animation


If you think this article is good, please vote, 2014 blog star voting address: http://vote.blog.csdn.net/blogstar2014/details? Username = wwj_748 # content

This blog post will share with you how to use the PullToRrefresh pull-down animation for modifying open-source projects to meet our specific development needs, A common pull-down refresh style may be as follows:

The two arrows flip up and down during the drop-down list to change the date text and refresh status. This is the most common mode.

Another type of rotation animation is the constant rotation of a circle during the refresh process, similar to the Southern Weekend reader (Note: it is a product of xiaowu. You can support O (others _ rotate) a lot) O ):


Github address: https://github.com/devilWwj/Android-PullToRefresh


After downloading it, import it to the workspace and import it to the target project. If you are not sure how to import the relevant project's shoes, Baidu.


One of the effects I want to achieve here is to play a frame animation during pull-down refresh.

Add an animation list:

<? Xml version = "1.0" encoding = "UTF-8"?> <! -- The root tag is animation-list. oneshot indicates whether to display the animation only once. If it is set to false, the animation root tag is continuously played, android: duration represents the length of time used to display each image in the animation through the item tag --> <animation-list xmlns: android = "http://schemas.android.com/apk/res/android" android: oneshot = "false"> <item android: drawable = "@ drawable/loading1" android: duration = "150"> </item> <item android: drawable = "@ drawable/loading2" android: duration = "150"> </item> <item android: drawable = "@ drawable/loading3" android: duration = "150"> </item> <item android: drawable = "@ drawable/loading4" android: duration = "150"> </item> </animation-list>

Modify the pull-down refresh layout:

/PullToRefresh/res/layout/pull_to_refresh_header_simple.xml

<?xml version="1.0" encoding="utf-8"?><merge xmlns:android="http://schemas.android.com/apk/res/android" >    <FrameLayout        android:id="@+id/fl_inner"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:paddingBottom="@dimen/header_footer_top_bottom_padding"        android:paddingLeft="@dimen/header_footer_left_right_padding"        android:paddingRight="@dimen/header_footer_left_right_padding"        android:paddingTop="@dimen/header_footer_top_bottom_padding" >        <FrameLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_horizontal" >            <ImageView                android:id="@+id/pull_to_refresh_image"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:src="@drawable/loading1"                 />        </FrameLayout>    </FrameLayout></merge>


Add custom loading layout

/PullToRefresh/src/com/handmark/pulltorefresh/library/internal/TweenAnimLoadingLayout. java

Package com. handmark. pulltorefresh. library. internal; import com. handmark. pulltorefresh. library. r; import com. handmark. pulltorefresh. library. pullToRefreshBase. mode; import com. handmark. pulltorefresh. library. pullToRefreshBase. orientation; import android. content. context; import android. content. res. typedArray; import android. graphics. drawable. animationDrawable; import android. graphics. drawable. drawable; import android. view. view;/*** @ date 2015/1/8 * @ author wuwenjie * @ desc Frame Animation loading layout */public class extends LoadingLayout {private AnimationDrawable animationDrawable; public Context (context Context, mode mode, Orientation scrollDirection, TypedArray attrs) {super (context, mode, scrollDirection, attrs); // initialize mHeaderImage. setImageResource (R. drawable. refresh_anim); animationDrawable = (AnimationDrawable) mHeaderImage. getDrawable ();} // default image @ Overrideprotected int getdefadradrawableresid () {return R. drawable. loading1 ;}@ override void Merge (Drawable imageDrawable) {// NO-OP} @ Overrideprotected void onPullImpl (float scaleOfLayout) {// NO-OP} // pull down to refresh @ Overrideprotected void Merge () {// NO-OP} // callback @ Overrideprotected void refreshingImpl () {// play Frame Animation animationDrawable. start ();} // release to refresh @ Overrideprotected void releaseToRefreshImpl () {// NO-OP} // reset @ Overrideprotected void resetImpl () {mHeaderImage. setVisibility (View. VISIBLE); mHeaderImage. clearAnimation ();}}

We only need to modify the LodingLayout code in the open-source project:

/PullToRefresh/src/com/handmark/pulltorefresh/library/internal/LoadingLayout. java

/*************************************** **************************************** * Copyright 2011,201 2 Chris Banes. ** Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file License t in compliance with the License. * You may obtain a copy of the License at ** http://www.apache.org/licenses/LICENSE-2.0 ** Unless required by applicable law or agreed to in writin G, software * distributed under the License is distributed on an "as is" BASIS, * without warranties or conditions of any kind, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. **************************************** ***************************************/ package com. handmark. pulltorefresh. library. internal; import and Roid. annotation. suppressLint; import android. content. context; import android. content. res. colorStateList; import android. content. res. typedArray; import android. graphics. typeface; import android. graphics. drawable. animationDrawable; import android. graphics. drawable. drawable; import android. text. textUtils; import android. util. typedValue; import android. view. gravity; import android. view. layoutInflater; import and Roid. view. view; import android. view. viewGroup; import android. view. animation. interpolator; import android. view. animation. linearInterpolator; import android. widget. frameLayout; import android. widget. imageView; import android. widget. linearLayout; import android. widget. progressBar; import android. widget. textView; import com. handmark. pulltorefresh. library. ILoadingLayout; import com. handmark. pulltorefresh. librar Y. pullToRefreshBase. mode; import com. handmark. pulltorefresh. library. pullToRefreshBase. orientation; import com. handmark. pulltorefresh. library. r; @ override ("ViewConstructor") public abstract class LoadingLayout extends implements ILoadingLayout {static final String LOG_TAG = "Your-LoadingLayout"; static final Interpolator vertex = new LinearInterpolator (); private Incluminnerlayout; protected final ImageView mHeaderImage; protected final ProgressBar placement; private boolean placement; private final TextView placement; protected final Mode mMode; protected final Orientation mscrollrollction; private CharSequence mPullLabel; private CharSequence mRefreshingLabel; private CharSequence mReleaseLabel; pub Lic LoadingLayout (Context context, final Mode mode, final Orientation scrollDirection, TypedArray attrs) {super (context); mMode = mode; mScrollDirection = scrollDirection; switch (scrollDirection) {case HORIZONTAL: layoutInflater. from (context ). inflate (R. layout. pull_to_refresh_header_horizontal, this); break; case VERTICAL: default: // LayoutInflater. from (context ). inflate (R. layout. pull_to_refresh_header_ver Tical, this); // modify the code LayoutInflater. from (context ). inflate (R. layout. pull_to_refresh_header_simple, this); break;} mInnerLayout = (FrameLayout) findViewById (R. id. fl_inner); mHeaderText = (TextView) mInnerLayout. findViewById (R. id. pull_to_refresh_text); mHeaderProgress = (ProgressBar) mInnerLayout. findViewById (R. id. pull_to_refresh_progress); mSubHeaderText = (TextView) mInnerLayout. findViewById (R. id. pull_t O_refresh_sub_text); mHeaderImage = (ImageView) mInnerLayout. findViewById (R. id. pull_to_refresh_image); FrameLayout. layoutParams lp = (FrameLayout. layoutParams) mInnerLayout. getLayoutParams (); switch (mode) {case PULL_FROM_END: lp. gravity = scrollDirection = Orientation. VERTICAL? Gravity. TOP: Gravity. LEFT; // Load in labelsmPullLabel = context. getString (R. string. pull_to_refresh_from_bottom_pull_label); mRefreshingLabel = context. getString (R. string. pull_to_refresh_from_bottom_refreshing_label); mReleaseLabel = context. getString (R. string. pull_to_refresh_from_bottom_release_label); break; case PULL_FROM_START: default: lp. gravity = scrollDirection = Orientation. VERTICAL? Gravity. BOTTOM: Gravity. RIGHT; // Load in labelsmPullLabel = context. getString (R. string. pull_to_refresh_pull_label); mRefreshingLabel = context. getString (R. string. pull_to_refresh_refreshing_label); mReleaseLabel = context. getString (R. string. pull_to_refresh_release_label); break;} if (attrs. hasValue (R. styleable. pullToRefresh_ptrHeaderBackground) {Drawable background = attrs. getDrawable (R. styleable. pul LToRefresh_ptrHeaderBackground); if (null! = Background) {ViewCompat. setBackground (this, background) ;}// if (attrs. hasValue (R. styleable. pullToRefresh_ptrHeaderTextAppearance) {// TypedValue styleID = new TypedValue (); // attrs. getValue (R. styleable. pullToRefresh_ptrHeaderTextAppearance, styleID); // setTextAppearance (styleID. data); //} // if (attrs. hasValue (R. styleable. pullToRefresh_ptrSubHeaderTextAppearance) {// TypedValue styleID = new TypedValu E (); // attrs. getValue (R. styleable. pullToRefresh_ptrSubHeaderTextAppearance, styleID); // setSubTextAppearance (styleID. data); //} // Text Color attrs need to be set after TextAppearance attrs // if (attrs. hasValue (R. styleable. pullToRefresh_ptrHeaderTextColor) {// ColorStateList colors = attrs. getColorStateList (R. styleable. pullToRefresh_ptrHeaderTextColor); // if (null! = Colors) {// setTextColor (colors); //} // if (attrs. hasValue (R. styleable. pullToRefresh_ptrHeaderSubTextColor) {// ColorStateList colors = attrs. getColorStateList (R. styleable. pullToRefresh_ptrHeaderSubTextColor); // if (null! = Colors) {// setSubTextColor (colors); //} // Try and get defined drawable from AttrsDrawable imageDrawable = null; if (attrs. hasValue (R. styleable. pullToRefresh_ptrDrawable) {imageDrawable = attrs. getDrawable (R. styleable. pullToRefresh_ptrDrawable);} // Check Specific Drawable from Attrs, these overrite the generic // drawable attr aboveswitch (mode) {case PULL_FROM_START: default: if (attrs. hasValue (R. Styleable. pullToRefresh_ptrDrawableStart) {imageDrawable = attrs. getDrawable (R. styleable. pullToRefresh_ptrDrawableStart);} else if (attrs. hasValue (R. styleable. pullToRefresh_ptrDrawableTop) {Utils. warnDeprecation ("ptrDrawableTop", "ptrDrawableStart"); imageDrawable = attrs. getDrawable (R. styleable. pullToRefresh_ptrDrawableTop);} break; case PULL_FROM_END: if (attrs. hasValue (R. styleable. pullToRefresh_p TrDrawableEnd) {imageDrawable = attrs. getDrawable (R. styleable. pullToRefresh_ptrDrawableEnd);} else if (attrs. hasValue (R. styleable. pullToRefresh_ptrDrawableBottom) {Utils. warnDeprecation ("ptrDrawableBottom", "ptrDrawableEnd"); imageDrawable = attrs. getDrawable (R. styleable. pullToRefresh_ptrDrawableBottom);} break;} // If we don't have a user defined drawable, load the defaultif (null = imageDrawable) {ImageDrawable = context. getResources (). getDrawable (getdefadradrawableresid ();} // Set Drawable, and save width/heightsetLoadingDrawable (imageDrawable); reset ();} public final void setHeight (int height) {ViewGroup. layoutParams lp = getLayoutParams (); lp. height = height; requestLayout ();} public final void setWidth (int width) {ViewGroup. layoutParams lp = getLayoutParams (); lp. width = width; requestLayou T ();} public final int getContentSize () {switch (mScrollDirection) {case HORIZONTAL: return mInnerLayout. getWidth (); case VERTICAL: default: return mInnerLayout. getHeight () ;}} public final void hideAllViews () {// if (View. VISIBLE = mHeaderText. getVisibility () {// mHeaderText. setVisibility (View. INVISIBLE); //} // if (View. VISIBLE = mHeaderProgress. getVisibility () {// mHeaderProgress. setVisibility (View. INVI SIBLE); //} // if (View. VISIBLE = mHeaderImage. getVisibility () {// mHeaderImage. setVisibility (View. INVISIBLE); //} // if (View. VISIBLE = mSubHeaderText. getVisibility () {// mSubHeaderText. setVisibility (View. INVISIBLE); //} public final void onPull (float scaleOfLayout) {if (! MUseIntrinsicAnimation) {onPullImpl (scaleOfLayout) ;}} public final void pullToRefresh () {// if (null! = MHeaderText) {// mHeaderText. setText (mPullLabel); //} // call the callbackpullToRefreshImpl ();} public final void refreshing () {if (null! = MHeaderText) {mHeaderText. setText (mRefreshingLabel);} if (mUseIntrinsicAnimation) {(AnimationDrawable) mHeaderImage. getDrawable ()). start ();} else {// Now call the callbackrefreshingImpl ();} // if (null! = MSubHeaderText) {// mSubHeaderText. setVisibility (View. GONE); //} public final void releaseToRefresh () {// if (null! = MHeaderText) {// mHeaderText. setText (mReleaseLabel); //} // Now call the callbackreleaseToRefreshImpl ();} public final void reset () {// if (null! = MHeaderText) {// mHeaderText. setText (mPullLabel); //} mHeaderImage. setVisibility (View. VISIBLE); if (mUseIntrinsicAnimation) {(AnimationDrawable) mHeaderImage. getDrawable ()). stop ();} else {// Now call the callbackresetImpl ();} // if (null! = MSubHeaderText) {// if (TextUtils. isEmpty (mSubHeaderText. getText () {// mSubHeaderText. setVisibility (View. GONE); //} else {// mSubHeaderText. setVisibility (View. VISIBLE); //} @ Overridepublic void setLastUpdatedLabel (CharSequence label) {// setSubHeaderText (label);} @ Overridepublic final void setLoadingDrawable (Drawable imageDrawable) {// Set DrawablemHeaderImage. setImageDrawable (imageDrawable); mUseIn TrinsicAnimation = (imageDrawable instanceof AnimationDrawable); // Now call the vertex (imageDrawable) ;}@ Overridepublic void setPullLabel (CharSequence pullLabel) {mPullLabel = pullLabel ;} @ Overridepublic void setRefreshingLabel (CharSequence refreshingLabel) {mRefreshingLabel = refreshingLabel;} @ Overridepublic void setReleaseLabel (CharSequence releaseLabel) {mReleaseLabel = rele AseLabel;} @ Overridepublic void setTextTypeface (Typeface tf) {mHeaderText. setTypeface (tf);} public final void showInvisibleViews () {// if (View. INVISIBLE = mHeaderText. getVisibility () {// mHeaderText. setVisibility (View. VISIBLE); //} // if (View. INVISIBLE = mHeaderProgress. getVisibility () {// mHeaderProgress. setVisibility (View. VISIBLE); //} if (View. INVISIBLE = mHeaderImage. getVisibility () {mHeaderImag E. setVisibility (View. VISIBLE);} // if (View. INVISIBLE = mSubHeaderText. getVisibility () {// mSubHeaderText. setVisibility (View. VISIBLE); //}/*** Callbacks for derivative Layouts */protected abstract int getdefadradrawableresid (); protected abstract void onLoadingDrawableSet (Drawable imageDrawable ); protected abstract void onPullImpl (float scaleOfLayout); protected abstract void pullToRefreshImpl (); prot Ected abstract void refreshingImpl (); protected abstract void releaseToRefreshImpl (); protected abstract void resetImpl (); private void setSubHeaderText (CharSequence label) {if (null! = MSubHeaderText) {if (TextUtils. isEmpty (label) {mSubHeaderText. setVisibility (View. GONE);} else {mSubHeaderText. setText (label); // Only set it to Visible if we're GONE, otherwise VISIBLE will/be set soonif (View. GONE = mSubHeaderText. getVisibility () {mSubHeaderText. setVisibility (View. VISIBLE) ;}}} private void setSubTextAppearance (int value) {if (null! = MSubHeaderText) {mSubHeaderText. setTextAppearance (getContext (), value) ;}} private void setSubTextColor (ColorStateList color) {if (null! = MSubHeaderText) {mSubHeaderText. setTextColor (color) ;}} private void setTextAppearance (int value) {if (null! = MHeaderText) {mHeaderText. setTextAppearance (getContext (), value);} if (null! = MSubHeaderText) {mSubHeaderText. setTextAppearance (getContext (), value) ;}} private void setTextColor (ColorStateList color) {if (null! = MHeaderText) {mHeaderText. setTextColor (color);} if (null! = MSubHeaderText) {mSubHeaderText. setTextColor (color );}}}


In the end, don't let me provide the source code. Here I just provide an idea to change the refreshed header layout to our custom layout.

The final result is that there will be a non-stop flashing light during the pull-down refresh process. Here, there is no GIF animation recorded, just one:





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.