SmartRefreshLayout自定义下拉刷新动画

需求是ui给的多张图片实现动画效果，并且下拉的时候动画不断变化，回退时，刷新动画效果也跟着回退，下拉刷新松手时，刷新动画循环播放，直至数据出来为止，话不多说，直接上效果图

首先，先添加依赖

implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.2'

自定义刷新动画，在res下drawable下创建一个animation_refresh.xml文件，代码如下，大家可以直接将我的图片替换掉

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@mipmap/ic_refresh1" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh2" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh3" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh4" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh5" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh6" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh7" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh8" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh9" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh10" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh11" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh12" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh13" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh14" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh15" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh16" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh17" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh18" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh19" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh20" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh21" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh22" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh23" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh24" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh25" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh26" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh27" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh28" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh29" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh30" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh31" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh32" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh33" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh34" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh35" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh36" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh37" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh38" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh39" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh40" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh41" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh42" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh43" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh44" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh45" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh46" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh47" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh48" android:duration="30" />
    <item android:drawable="@mipmap/ic_refresh49" android:duration="30" />

</animation-list>

在自己的application中配置；

public class BCApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();
        initRefreshViewLayout();
    }
     private void initRefreshViewLayout() {
        BCRefreshLayout.init();
    }
    }

揭下来创建自己的刷新布局BCRefreshLayout

public class BCRefreshLayout extends SmartRefreshLayout {

    public static void init() {
// 指定全局的下拉Header
        SmartRefreshLayout.setDefaultRefreshHeaderCreator(new DefaultRefreshHeaderCreator() {
            @Override
            public RefreshHeader createRefreshHeader(Context context, RefreshLayout layout) {
                return new BCRefreshHeader(context);
            }
        });

        // 指定全局的上拉Footer
        SmartRefreshLayout.setDefaultRefreshFooterCreator(new DefaultRefreshFooterCreator() {
            @NonNull
            @Override
            public RefreshFooter createRefreshFooter(Context context, RefreshLayout layout) {
                return new ClassicsFooter(context);
            }
        });

    }

    public BCRefreshLayout(Context context) {
        super(context);
        initView(context);
    }

    public BCRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    private void initView(Context context) {
        setReboundDuration(300); // 设置回弹动画时长
        setPrimaryColorsId(R.color.color_background_F5);  // 主题色
        setEnableAutoLoadMore(false); // 设置是否监听列表在滚动到底部时触发加载事件
    }

    // 下拉/上拉完成
    public void complete() {
        if (mState == RefreshState.Loading) {
            finishLoadMore();
        } else {
            finishRefresh();
        }
    }
    
}

自定义下拉刷新头部

public class BCRefreshHeader extends RelativeLayout implements RefreshHeader {

    private ImageView mIvHead;
    private ImageView mIvHand;
    AnimationDrawable animaition;
    int minimumHeight = 0;

    public BCRefreshHeader(Context context) {
        super(context);
        this.initView(context, null, 0);
    }

    public BCRefreshHeader(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.initView(context, attrs, 0);
    }

    public BCRefreshHeader(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.initView(context, attrs, defStyleAttr);
    }

    private void initView(Context context, AttributeSet attrs, int defStyleAttr) {
       //下拉刷新头部的大小
        setMinimumHeight(dp2px(context, 50));
        minimumHeight=dp2px(context, 50);

        LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.addRule(CENTER_IN_PARENT);
        View headerView = View.inflate(context, R.layout.refresh_header, null);
        mIvHead = headerView.findViewById(R.id.iv_head);
        mIvHand = headerView.findViewById(R.id.iv_hand);
        mIvHead.setBackgroundResource(R.drawable.animation_refresh);
        animaition = (AnimationDrawable) mIvHead.getBackground();
        mIvHead.setVisibility(GONE);
        addView(headerView, params);
    }

    @Override
    public void onInitialized(RefreshKernel kernel, int height, int extendHeight) { // 尺寸定义完成
    }

    @Override
    public void onMoving(boolean isDragging, float percent, int offset, int height, int maxDragHeight) {
//这里的操作是下拉，回退时，动画的变化，
        mIvHead.setVisibility(GONE);
        mIvHand.setVisibility(VISIBLE);

        float tmp = (float) (minimumHeight / 49);
        if (offset >= tmp * 0 && offset <= tmp * 1) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh1));
        } else if (offset >= tmp * 1 && offset <= tmp * 2) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh2));
        } else if (offset >= tmp * 2 && offset <= tmp * 3) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh3));
        } else if (offset >= tmp * 3 && offset <= tmp * 4) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh4));
        } else if (offset >= tmp * 4 && offset <= tmp * 5) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh5));
        } else if (offset >= tmp * 5 && offset <= tmp * 6) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh6));
        } else if (offset >= tmp * 6 && offset <= tmp * 7) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh7));
        } else if (offset >= tmp * 7 && offset <= tmp * 8) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh8));
        } else if (offset >= tmp * 8 && offset <= tmp * 9) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh9));
        } else if (offset >= tmp * 9 && offset <= tmp * 10) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh10));
        } else if (offset >= tmp * 10 && offset <= tmp * 11) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh11));
        } else if (offset >= tmp * 11 && offset <= tmp * 12) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh12));
        } else if (offset >= tmp * 12 && offset <= tmp * 13) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh13));
        } else if (offset >= tmp * 13 && offset <= tmp * 14) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh14));
        } else if (offset >= tmp * 14 && offset <= tmp * 15) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh15));
        } else if (offset >= tmp * 15 && offset <= tmp * 16) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh16));
        } else if (offset >= tmp * 16 && offset <= tmp * 17) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh17));
        } else if (offset >= tmp * 17 && offset <= tmp * 18) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh18));
        } else if (offset >= tmp * 18 && offset <= tmp * 19) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh19));
        } else if (offset >= tmp * 19 && offset <= tmp * 20) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh20));
        } else if (offset >= tmp * 20 && offset <= tmp * 21) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh21));
        } else if (offset >= tmp * 21 && offset <= tmp * 22) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh22));
        } else if (offset >= tmp * 22 && offset <= tmp * 23) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh23));
        } else if (offset >= tmp * 23 && offset <= tmp * 24) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh24));
        } else if (offset >= tmp * 24 && offset <= tmp * 25) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh25));
        } else if (offset >= tmp * 25 && offset <= tmp * 26) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh26));
        } else if (offset >= tmp * 26 && offset <= tmp * 27) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh27));
        } else if (offset >= tmp * 27 && offset <= tmp * 28) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh28));
        } else if (offset >= tmp * 28 && offset <= tmp * 29) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh29));
        } else if (offset >= tmp * 29 && offset <= tmp * 30) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh30));
        } else if (offset >= tmp * 30 && offset <= tmp * 31) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh31));
        } else if (offset >= tmp * 31 && offset <= tmp * 32) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh32));
        } else if (offset >= tmp * 32 && offset <= tmp * 33) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh33));
        } else if (offset >= tmp * 33 && offset <= tmp * 34) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh34));
        } else if (offset >= tmp * 34 && offset <= tmp * 35) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh35));
        } else if (offset >= tmp * 35 && offset <= tmp * 36) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh36));
        } else if (offset >= tmp * 36 && offset <= tmp * 37) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh37));
        } else if (offset >= tmp * 37 && offset <= tmp * 38) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh38));
        } else if (offset >= tmp * 38 && offset <= tmp * 39) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh39));
        } else if (offset >= tmp * 39 && offset <= tmp * 40) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh40));
        } else if (offset >= tmp * 40 && offset <= tmp * 41) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh41));
        } else if (offset >= tmp * 41 && offset <= tmp * 42) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh42));
        } else if (offset >= tmp * 42 && offset <= tmp * 43) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh43));
        } else if (offset >= tmp * 43 && offset <= tmp * 44) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh44));
        } else if (offset >= tmp * 44 && offset <= tmp * 45) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh45));
        } else if (offset >= tmp * 45 && offset <= tmp * 46) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh46));
        } else if (offset >= tmp * 46 && offset <= tmp * 47) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh47));
        } else if (offset >= tmp * 47 && offset <= tmp * 48) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh48));
        } else if (offset >= tmp * 48 && offset <= tmp * 49) {
            mIvHand.setBackground(getResources().getDrawable(R.mipmap.ic_refresh49));
        }


        if (animaition == null) return;
    }

    @Override
    public void onReleased(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {

    }

    @Override
    public void onStartAnimator(RefreshLayout layout, int headHeight, int extendHeight) {
        animaition.setOneShot(false);   //设置是否只播放一次，和上面xml配置效果一致
        animaition.start();
    }

    @Override
    public int onFinish(RefreshLayout layout, boolean success) {
        animaition.stop();
        return 100; // 动画结束,延迟多少毫秒之后再收回
    }

    @Override
    public void onHorizontalDrag(float percentX, int offsetX, int offsetMax) {

    }

    @Override
    public boolean isSupportHorizontalDrag() {
        return false;
    }

    @Override
    public void setPrimaryColors(int... colors) {
        setBackgroundColor(getResources().getColor(R.color.color_background_F5));
    }

    @NonNull
    public View getView() {
        return this;
    }

    @Override
    public SpinnerStyle getSpinnerStyle() {
        return SpinnerStyle.Translate;
    }

    @Override
    public void onStateChanged(RefreshLayout refreshLayout, RefreshState oldState, RefreshState newState) { // 状态改变事件
        switch (newState) {
            case None: // 无状态

                break;
            case PullDownToRefresh: // 可以下拉状态
//                animaition.setOneShot(true);
//                animaition.start();
                break;

            case PullDownCanceled://下拉取消状态

                break;
            case Refreshing: // 刷新中状态
                mIvHead.setVisibility(VISIBLE);
                mIvHand.setVisibility(GONE);
                animaition.start();
                animaition.setOneShot(false);
                break;
            case ReleaseToRefresh:  // 释放就开始刷新状态

                break;

        }
    }


    /**
     * dp转px
     */
    private int dp2px(Context context, float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
    }
}

自定义布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:id="@+id/iv_hand"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

好了，到这里自定义就已经完成了，我的代码拷贝上就可以用的，但是刷新动画的图片需要替换称自己的，其余的没有什么要说的，使用的话就跟我们平时用SmartRefreshLayout刷新是一样的，这里只是改变了他下拉刷新的动画。

本文地址：https://blog.csdn.net/qq_42221857/article/details/108996828