下拉刷新水滴Android android下拉刷新动画

转载

mob64ca14095513 2023-12-13 16:48:40

文章标签 下拉刷新水滴Android android listview scrollview 下拉刷新 文章分类 Android 移动开发

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

一，定义刷新动画的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水平居中

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，需要加载两张图片，控制图片的停留时间

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

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

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类下，变为

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. caseROTATE:  
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这个开源项目中的其他控件的下拉刷新动画也是这样的原理啦。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。