需求是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刷新是一样的，这里只是改变了他下拉刷新的动画。