大家好,我是似曾相识2022。不喜欢唱跳篮球,但对杰伦的Rap却情有独钟。
因为中秋将至,今日就给大家带来一款以中秋为主题的上下拉加载动画作用,咱们废话不多说直接上作用图:
作用是不是很熟悉?没错这儿采用了一个备受欢迎的三方轮子: SmartRefreshLayout,在许多项目中相信都运用过它但基本都是运用轮子中自带的Header和Footer,今日咱们就简略讲讲如何完成归于自己的上下拉作用。
已然脚手架他人已经给咱们搭好了,那咱们就站在伟人的膀子上继续发光发彩。布局中依然运用SmartRefreshLayout作为父布局,咱们只需要自定义Header和Footer,那么如何完成呢?
经过熟读三方库文档得知SmartRefreshLayout具有十分高得自定义和扩展性,其中包含了如下结构:
- RefreshLayout下拉的基本功能,包含布局测量、滑动事情处理、参数设定等等
- RefreshHeader下拉头部的事情处理和显现接口
- RefreshFooter上拉底部的事情处理和显现接口
- RefreshContent对不同内容的一致封装,包含判别是否可翻滚、回弹判别、智能辨认
虽说咱们能够直接在SmartRefreshLayout内部直接增加控件的办法达到作用,但缺少许多机遇去控制动效或文字更改。咱们需要去继承RefreshHeader接口以便更好的机遇去控制各状况的作用。
<com.scwang.smart.refresh.layout.SmartRefreshLayout
android:id="@+id/smart"
android:layout_width="match_parent"
android:layout_height="match_parent">
//第一个控件被认为是Header
<TextView
android:text="header"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
......
</com.scwang.smart.refresh.layout.SmartRefreshLayout>
咱们来看看RefreshHeader中都有哪些重要的办法:
public interface RefreshHeader {
//获取实在视图(必须返回,不能为null)
@NonNull
View getView();
//获取改换办法(必须指定一个:平移、拉伸、固定、全屏)
SpinnerStyle getSpinnerStyle();
// 设置主题颜色 (如果自定义的Header没有注意颜色,本办法能够什么都不处理)
void setPrimaryColors(@ColorInt int ... colors);
// 尺寸定义初始化完成
void onInitialized(RefreshKernel kernel, int height, int maxDragHeight);
//开端动画(开端改写或许开端加载动画)
void onStartAnimator(RefreshLayout layout, int height, int maxDragHeight);
//动画完毕
int onFinish(RefreshLayout layout, boolean success);
//手指拖动下拉(会接连屡次调用,用于实时控制动画关键帧)
void onPulling(float percent, int offset, int headerHeight, int maxDragHeight);
//手指释放之后的继续动画(会接连屡次调用,用于实时控制动画关键帧)
void onReleasing(float percent, int offset, int headerHeight, int maxDragHeight);
}
这儿咱们经过继承LinearLayout再完成RefreshHeader来自定义头部作用:
class MidAutumnHeader constructor(context: Context, attrs: AttributeSet) :LinearLayout(context, attrs),RefreshHeader{
//内部增加一个gif展示控件
private val img by lazy { GifImageView(context).apply {
setImageResource(R.mipmap.threes)
} }
//初始化就增加
init {
addView(img)
}
//下拉作用分为Translate(平行移动)、Scale(拉伸形变)、FixedBehind(固定在背后)、FixedFront(固定在前面)、MatchLayout(填满布局)
override fun getSpinnerStyle() = SpinnerStyle.Translate
//开端动画 下拉的时分开端触发
override fun onStartAnimator(refreshLayout: RefreshLayout, height: Int, maxDragHeight: Int) {
}
//动画完毕后
override fun onFinish(refreshLayout: RefreshLayout, success: Boolean): Int {
//这儿咱们能够操作一些动画完毕后的状况
return 1000
}
......
}
就这样一个简略的Header就完成了,Footer的完成也是相同,只是为了方便运用了另一个三方库GifImageView来加载Gif动画。咱们只需要将MidAutumnHeader替换掉XML中的TextView就完成了Header的装备。本以为这样就完美了,谁知道一运行下拉的时分动画瞬间即逝。
最终找了半响原因才发现需要给SmartRefreshLayout增加上下拉监听,默许是3秒完毕:
smart.setOnRefreshListener {
smart.finishRefresh(20000)
}
smart.setOnLoadMoreListener {
smart.finishLoadMore(10000)
}
总结:
- 为了能更好的管控下拉动画的机遇,在自定义的时分必定要去完成RefreshHeader和RefreshFooter接口,在对应的回调处理对应的逻辑能够使动画作用更加丰富。
- 配合相似GifImageView和Lottie等三方库来加载动画能够使咱们的作用看起来更酷炫且十分简略。当然也能够自己运用属性动画来完成。
好了以上就是完成一个酷炫的中秋主题上下拉自定义作用的全部内容,完成起来是不是很简略?在此也提早祝大家双节高兴!如果对你有协助的话千万别忘记一键三连哦!