PullToRrefresh自定义下拉刷新动画

原文地址：PullToRrefresh自定义下拉刷新动画

参考自 http://blog.csdn.net/wwj_748/article/details/42523611

首先，下载著名的刷新框架https://github.com/chrisbanes/Android-PullToRefresh，其中simple为demo，library和extras作为项目包导入到simple中

一，定义刷新动画的layout

在library下的com.handmark.pulltorefresh.library.internal包中的FlipLoadingLayout和RotateLoadingLayout

FlipLoadingLayout为ios风格的箭头颠倒的刷新动画

RotateLoadingLayout为android风格的图片旋转动画

共同的设置方法是

1，getDefaultDrawableResId()

动画默认图片，可以替换为自己的图片

2，refreshingImpl()

正在刷新时的回调方法，可以设置开始动画

3，resetImpl()

重置

二，正在刷新时为图片居中旋转的效果

1，首先修改library中的pull_to_refresh_header_vertical.xml，去除文字的layout，图片layout水平居中

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <merge xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <FrameLayout  
5.         android:id="@+id/fl_inner"  
6.         android:layout_width="fill_parent"  
7.         android:layout_height="wrap_content"  
8.         android:paddingBottom="@dimen/header_footer_top_bottom_padding"  
9.         android:paddingLeft="@dimen/header_footer_left_right_padding"  
10.         android:paddingRight="@dimen/header_footer_left_right_padding"  
11.         android:paddingTop="@dimen/header_footer_top_bottom_padding" >  
12.   
13.         <FrameLayout  
14.             android:layout_width="wrap_content"  
15.             android:layout_height="wrap_content"  
16.             android:layout_gravity="center_horizontal" >  
17.   
18.             <ImageView  
19.                 android:id="@+id/pull_to_refresh_image"  
20.                 android:layout_width="wrap_content"  
21.                 android:layout_height="wrap_content"  
22.                 android:layout_gravity="center" />  
23.   
24.             <ProgressBar  
25.                 android:id="@+id/pull_to_refresh_progress"  
26.                 style="?android:attr/progressBarStyleSmall"  
27.                 android:layout_width="wrap_content"  
28.                 android:layout_height="wrap_content"  
29.                 android:layout_gravity="center"  
30.                 android:indeterminate="true"  
31.                 android:visibility="gone" />  
32.         </FrameLayout>  
33.   
34.      <!--    <LinearLayout  
35.             android:layout_width="wrap_content"  
36.             android:layout_height="wrap_content"  
37.             android:layout_gravity="center"  
38.             android:gravity="center_horizontal"  
39.             android:orientation="vertical" >  
40.   
41.             <TextView  
42.                 android:id="@+id/pull_to_refresh_text"  
43.                 android:layout_width="wrap_content"  
44.                 android:layout_height="wrap_content"  
45.                 android:singleLine="true"  
46.                 android:textAppearance="?android:attr/textAppearance"  
47.                 android:textStyle="bold" />  
48.   
49.             <TextView  
50.                 android:id="@+id/pull_to_refresh_sub_text"  
51.                 android:layout_width="wrap_content"  
52.                 android:layout_height="wrap_content"  
53.                 android:singleLine="true"  
54.                 android:textAppearance="?android:attr/textAppearanceSmall"  
55.                 android:visibility="gone" />  
56.         </LinearLayout> -->  
57.     </FrameLayout>  
58.   
59. </merge>  

2，去除LoadingLayout中的关于textview的代码

3，可以在RotateLoadingLayout中的getDefaultDrawableResId()方法替换成自己的图片

三，设置自定义动画效果

1，首先设置一个简单的小人走的动画效果，在anim文件夹下新建一个xml，需要加载两张图片，控制图片的停留时间

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>    
2. <animation-list xmlns:android="http://schemas.android.com/apk/res/android"    
3.     android:oneshot="false" >    
4.     
5.     <item    
6.         android:drawable="@drawable/app_loading0"    
7.         android:duration="150"/>    
8.     <item    
9.         android:drawable="@drawable/app_loading1"    
10.         android:duration="150"/>    
11.     
12. </animation-list>    

2，新建刷新动画的layout，TweenAnimLoadingLayout，类似于之前的源码中的FlipLoadingLayout和RotateLoadingLayout

主要设置初始化，和那几个关键方法就行

[java] view plain copy

1. package com.handmark.pulltorefresh.library.internal;  
2.   
3.   
4. import com.handmark.pulltorefresh.library.R;  
5. import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;  
6. import com.handmark.pulltorefresh.library.PullToRefreshBase.Orientation;  
7.   
8. import android.content.Context;  
9. import android.content.res.TypedArray;  
10. import android.graphics.drawable.AnimationDrawable;  
11. import android.graphics.drawable.Drawable;  
12. import android.view.View;  
13.   
14. /** 
15.  * @date 2015/1/8 
16.  * @author wuwenjie 
17.  * @desc 帧动画加载布局 
18.  */  
19. public class TweenAnimLoadingLayout extends LoadingLayout {  
20.   
21.     private AnimationDrawable animationDrawable;  
22.   
23.     public TweenAnimLoadingLayout(Context context, Mode mode,  
24.             Orientation scrollDirection, TypedArray attrs) {  
25.         super(context, mode, scrollDirection, attrs);  
26.         // 初始化  
27.         mHeaderImage.setImageResource(R.anim.loading);  
28.         animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();  
29.     }  
30.     // 默认图片  
31.     @Override  
32.     protected int getDefaultDrawableResId() {  
33.         return R.drawable.app_loading0;  
34.     }  
35.       
36.     @Override  
37.     protected void onLoadingDrawableSet(Drawable imageDrawable) {  
38.         // NO-OP  
39.     }  
40.       
41.     @Override  
42.     protected void onPullImpl(float scaleOfLayout) {  
43.         // NO-OP  
44.     }  
45.     // 下拉以刷新  
46.     @Override  
47.     protected void pullToRefreshImpl() {  
48.         // NO-OP  
49.     }  
50.     // 正在刷新时回调  
51.     @Override  
52.     protected void refreshingImpl() {  
53.         // 播放帧动画  
54.         animationDrawable.start();  
55.     }  
56.     // 释放以刷新  
57.     @Override  
58.     protected void releaseToRefreshImpl() {  
59.         // NO-OP  
60.     }  
61.     // 重新设置  
62.     @Override  
63.     protected void resetImpl() {  
64.         mHeaderImage.setVisibility(View.VISIBLE);  
65.         mHeaderImage.clearAnimation();  
66.     }  
67.   
68. }  

3，替换之前的刷新layout为TweenAnimLoadingLayout

找到library项目com.handmark.pulltorefresh.library包下的PullToRefreshListView，发现头脚的layout用的都是LoadingLayout，找到头脚layout的创建方法createLoadingLayout进入，在createLoadingLayout方法中再进入createLoadingLayout，找到最原始的新建动画layout的地方，把默认的RotateLoadingLayout改成TweenAnimLoadingLayout就行了

在PullToRefreshBase类下，变为

[java] view plain copy

1. //在最原始的地方把新建动画layout换成TweenAnimLoadingLayout  
2.         LoadingLayout createLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) {  
3.             switch (this) {  
4.                 case ROTATE:  
5.                 default:  
6. //                  return new RotateLoadingLayout(context, mode, scrollDirection, attrs);  
7.                     return new TweenAnimLoadingLayout(context, mode, scrollDirection, attrs);  
8.                 case FLIP:  
9.                     return new FlipLoadingLayout(context, mode, scrollDirection, attrs);  
10.             }  
11.         }  

4，去除LoadingLayout中的关于textview的代码

代码下载 http://download.csdn.net/detail/superjunjin/8589827

以上内容为作者原有内容，我在实际应用中对TweenAnimLoadingLayout的写法有些不同。因为根据打印Log可以发现，松手刷新的时候，refreshingImpl和resetImpl会被反复调用多次，(显示一次refreshingImpl，然后紧跟着一次resetImpl，随后是正式的调用refreshingImpl方法刷新，随后又连续调用两次restImpl。推测原因是下拉时，拉的太多了，所以松手的时候，先回弹到争取的下拉位置，然后再开始正式刷新。所以个人感觉将控制动画的代码写到restImpl中不太合适，因为随即在refreshImpl中又要开始调用)，以下是我在自己的项目中的改写：

[java] view plain copy

1. public class MyLoadingLayout extends LoadingLayout{  
2.   
3.     private AnimationDrawable animationDrawable;    
4.     private int[] resId = new int[]{R.drawable.dropdown_anim_00,  
5.             R.drawable.dropdown_anim_01,  
6.             R.drawable.dropdown_anim_02,  
7.             R.drawable.dropdown_anim_03,  
8.             R.drawable.dropdown_anim_04,  
9.             R.drawable.dropdown_anim_05,  
10.             R.drawable.dropdown_anim_06,  
11.             R.drawable.dropdown_anim_07,  
12.             R.drawable.dropdown_anim_08,  
13.             R.drawable.dropdown_anim_09,  
14.             R.drawable.dropdown_anim_10,};  
15.     public MyLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) {  
16.         super(context, mode, scrollDirection, attrs);  
17.         mHeaderImage.setImageDrawable(getResources().getDrawable(R.drawable.loading_anim));  
18.         animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();  
19.     }  
20.   
21.     @Override  
22.     protected int getDefaultDrawableResId() {  
23.         return R.drawable.dropdown_anim_00;  
24.     }  
25.   
26.     @Override  
27.     protected void onLoadingDrawableSet(Drawable imageDrawable) {  
28.         Log.d("TAG", "onLoadingDrawableSet");  
29.     }  
30.   
31.     @Override  
32.     protected void onPullImpl(float scaleOfLayout) {  
33.         if(scaleOfLayout<=1){  
34.             int idx = (int) Math.ceil(scaleOfLayout*10);  
35.             Drawable d = getResources().getDrawable(resId[idx]);  
36.             d.setLevel(100);  
37.             ScaleDrawable sd = new ScaleDrawable(d, Gravity.CENTER, (10-idx)/10.0f,(10-idx)/10.0f);  
38.             mHeaderImage.setImageDrawable(sd);  
39.         }else{  
40.             mHeaderImage.setImageDrawable(getResources().getDrawable(resId[10]));  
41.         }  
42.     }  
43.   
44.     @Override  
45.     protected void pullToRefreshImpl() {  
46.         Log.d("TAG", "pullToRefreshImpl");  
47.     }  
48.   
49.     @Override  
50.     protected void refreshingImpl() {  
51.         Log.d("TAG", "refreshingImpl");  
52.         if(animationDrawable.isRunning()){return;}  
53.         animationDrawable.start();    
54.     }  
55.   
56.     @Override  
57.     protected void releaseToRefreshImpl() {  
58.         Log.d("TAG", "releaseToRefreshImpl");  
59.     }  
60.   
61.     @Override  
62.     protected void resetImpl() {  
63.         Log.d("TAG", "resetImpl");  
64.     }  
65.   
66. }