Android PullToRrefresh 自定义下拉刷新动画 （listview、scrollview等）

前半部分参考自http://blog.csdn.net/superjunjin/article/details/45022595，转载过来记录学习情况，后半部分记录下

PullToRefreshScrollView 自定义下拉刷新动画，只需改一处。

以下部分转载自http://blog.csdn.net/superjunjin/article/details/45022595

一，定义刷新动画的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的代码

下面记录关于scrollview的自定义动画，其实之前的部分已经为我们铺垫好了，我们只需要将

ptr:ptrAnimationStyle="flip"

改为

ptr:ptrAnimationStyle="<span style="color:#ff0000;"><strong>rotate</strong></span>"

即可

此时再运行程序，下拉刷新时会发现，下拉刷新由箭头变成了我们之前自定义的动画，为什么会这样？为什么不是旋转图标呢？？？

具体原因我们可以查看源码：

打开com.handmark.pulltorefresh.library里面的PullToRefreshScrollView.java

我们可以看到PullToRefreshScrollView是继承自PullToRefreshBase<ScrollView>

public class PullToRefreshScrollView extends PullToRefreshBase<ScrollView> {

而我们刚刚自定义PullToRefreshListView 的下拉刷新动画时，就是在PullToRefreshBase<T> 中进行修改的，而且我们进入 PullToRefreshBase<T>类中，找到

public abstract class PullToRefreshBase<T extends View> extends LinearLayout implements IPullToRefresh<T> {

...
<span style="white-space:pre">	</span>private LoadingLayout <span style="color:#ff0000;">mHeaderLayout</span>;
	private LoadingLayout <span style="color:#ff0000;">mFooterLayout</span>;

... 

<span style="font-family: Arial;">}</span>

然后我们去看它被引用的位置

<span style="font-family: Arial;">public abstract class PullToRefreshBase<T extends View> extends LinearLayout implements IPullToRefresh<T> {</span><span style="white-space:pre"></span><pre name="code" class="java" style="line-height: 26px;">
...

<span style="white-space:pre">	</span>// We need to create now layouts now
	mHeaderLayout = <span style="color:#ff0000;">createLoadingLayout</span>(context, Mode.PULL_FROM_START, a);
	mFooterLayout = <span style="color:#ff0000;">createLoadingLayout</span>(context, Mode.PULL_FROM_END, a);

...

}

我们会发现，这就是我们之前自定义下拉刷新的时候看到过的，我们一直进入 createLoadingLayout方法，找到最原始的新建动画layout的地方，会发现，其实就是之前改过的地方!!!

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.         }  

看到了吧，这就是为什么我们设置PullToRefreshScrollView的ptr:ptrAnimationStyle属性为rotate，下拉刷新动画会变成我们之前定义的动画的原因

然后PullToRrefesh这个开源项目中的其他控件的下拉刷新动画也是这样的原理啦。