怎么自定义android 下拉刷新动画

Posted 2023-04-10

参考技术A 　　我这里要实现的一种效果是下拉刷新时播放一个帧动画
　　增加动画列表：
　　[html] view plaincopy在CODE上查看代码片派生到我的代码片
　　<?xml version="1.0" encoding="utf-8"?>
　　<!--
　　根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
　　根标签下，通过item标签对动画中的每一个图片进行声明
　　android:duration 表示展示所用的该图片的时间长度
　　-->
　　<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>

　　修改下拉刷新布局：
　　/PullToRefresh/res/layout/pull_to_refresh_header_simple.xml
　　[java] view plaincopy在CODE上查看代码片派生到我的代码片
　　<?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>

　　增加自定义的加载布局
　　/PullToRefresh/src/com/handmark/pulltorefresh/library/internal/TweenAnimLoadingLayout.java
　　[java] view plaincopy在CODE上查看代码片派生到我的代码片
　　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.drawable.refresh_anim);
　　animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();
　　
　　// 默认图片
　　@Override
　　protected int getDefaultDrawableResId()
　　return R.drawable.loading1;
　　
　　
　　@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();
　　
　　
　　本回答被提问者采纳

PullToRrefresh自定义下拉刷新动画

首先，下载著名的刷新框架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水平居中

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

<?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

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

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

//在最原始的地方把新建动画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