PullToRrefresh自定义下拉刷新动画

最新推荐文章于 2024-04-26 09:05:28 发布

哦...

最新推荐文章于 2024-04-26 09:05:28 发布

阅读量3.6k

点赞数 1

原文地址：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

<?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" />
<ProgressBar
android:id="@+id/pull_to_refresh_progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"
android:visibility="gone" />
</FrameLayout>
<!-- <LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:orientation="vertical" >
<TextView
android:id="@+id/pull_to_refresh_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearance"
android:textStyle="bold" />
<TextView
android:id="@+id/pull_to_refresh_sub_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:visibility="gone" />
</LinearLayout> -->
</FrameLayout>
</merge>

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

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

三，设置自定义动画效果

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

[html] view plain copy

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false" >
<item
android:drawable="@drawable/app_loading0"
android:duration="150"/>
<item
android:drawable="@drawable/app_loading1"
android:duration="150"/>
</animation-list>

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

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

[java] view plain copy

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 帧动画加载布局
*/
public class TweenAnimLoadingLayout extends LoadingLayout {
private AnimationDrawable animationDrawable;
public TweenAnimLoadingLayout(Context context, Mode mode,
Orientation scrollDirection, TypedArray attrs) {
super(context, mode, scrollDirection, attrs);
// 初始化
mHeaderImage.setImageResource(R.anim.loading);
animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();
}
// 默认图片
@Override
protected int getDefaultDrawableResId() {
return R.drawable.app_loading0;
}
@Override
protected void onLoadingDrawableSet(Drawable imageDrawable) {
// NO-OP
}
@Override
protected void onPullImpl(float scaleOfLayout) {
// NO-OP
}
// 下拉以刷新
@Override
protected void pullToRefreshImpl() {
// NO-OP
}
// 正在刷新时回调
@Override
protected void refreshingImpl() {
// 播放帧动画
animationDrawable.start();
}
// 释放以刷新
@Override
protected void releaseToRefreshImpl() {
// NO-OP
}
// 重新设置
@Override
protected void resetImpl() {
mHeaderImage.setVisibility(View.VISIBLE);
mHeaderImage.clearAnimation();
}
}

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

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

在PullToRefreshBase类下，变为

[java] view plain copy

//在最原始的地方把新建动画layout换成TweenAnimLoadingLayout
LoadingLayout createLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) {
switch (this) {
case ROTATE:
default:
// return new RotateLoadingLayout(context, mode, scrollDirection, attrs);
return new TweenAnimLoadingLayout(context, mode, scrollDirection, attrs);
case FLIP:
return new FlipLoadingLayout(context, mode, scrollDirection, attrs);
}
}

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

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

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

public class MyLoadingLayout extends LoadingLayout{

	private AnimationDrawable animationDrawable;  
	private int[] resId = new int[]{R.drawable.dropdown_anim_00,
			R.drawable.dropdown_anim_01,
			R.drawable.dropdown_anim_02,
			R.drawable.dropdown_anim_03,
			R.drawable.dropdown_anim_04,
			R.drawable.dropdown_anim_05,
			R.drawable.dropdown_anim_06,
			R.drawable.dropdown_anim_07,
			R.drawable.dropdown_anim_08,
			R.drawable.dropdown_anim_09,
			R.drawable.dropdown_anim_10,};
	public MyLoadingLayout(Context context, Mode mode, Orientation scrollDirection, TypedArray attrs) {
		super(context, mode, scrollDirection, attrs);
		mHeaderImage.setImageDrawable(getResources().getDrawable(R.drawable.loading_anim));
		animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();
	}

	@Override
	protected int getDefaultDrawableResId() {
		return R.drawable.dropdown_anim_00;
	}

	@Override
	protected void onLoadingDrawableSet(Drawable imageDrawable) {
		Log.d("TAG", "onLoadingDrawableSet");
	}

	@Override
	protected void onPullImpl(float scaleOfLayout) {
		if(scaleOfLayout<=1){
			int idx = (int) Math.ceil(scaleOfLayout*10);
			Drawable d = getResources().getDrawable(resId[idx]);
			d.setLevel(100);
			ScaleDrawable sd = new ScaleDrawable(d, Gravity.CENTER, (10-idx)/10.0f,(10-idx)/10.0f);
			mHeaderImage.setImageDrawable(sd);
		}else{
			mHeaderImage.setImageDrawable(getResources().getDrawable(resId[10]));
		}
	}

	@Override
	protected void pullToRefreshImpl() {
		Log.d("TAG", "pullToRefreshImpl");
	}

	@Override
	protected void refreshingImpl() {
		Log.d("TAG", "refreshingImpl");
		if(animationDrawable.isRunning()){return;}
		animationDrawable.start();  
	}

	@Override
	protected void releaseToRefreshImpl() {
		Log.d("TAG", "releaseToRefreshImpl");
	}

	@Override
	protected void resetImpl() {
		Log.d("TAG", "resetImpl");
	}

}

哦...

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
PullToRrefresh自定义下拉刷新动画

原文地址：PullToRrefresh自定义下拉刷新动画参考自 http://blog.csdn.net/wwj_748/article/details/42523611首先，下载著名的刷新框架https://github.com/chrisbanes/Android-PullToRefresh，其中simple为demo，library和extras作为项目包导入到sim
复制链接

扫一扫