Android：实现一个酷炫的中秋主题上下拉自定义效果

大家好，我是似曾相识2022。不喜欢唱跳篮球，但对杰伦的Rap却情有独钟。

由于中秋将至，今天就给大家带来一款以中秋为主题的上下拉加载动画效果，咱们废话不多说直接上效果图：

效果是不是很熟悉？没错这里采用了一个备受欢迎的三方轮子： SmartRefreshLayout，在很多项目中相信都使用过它但基本都是使用轮子中自带的Header 和Footer，今天咱们就简单讲讲如何实现属于自己的上下拉效果。

既然脚手架别人已经给我们搭好了，那我们就站在巨人的肩膀上继续发光发彩。布局中仍然使用SmartRefreshLayout 作为父布局，我们只需要自定义Header 和Footer，那么如何实现呢？

通过熟读三方库文档得知SmartRefreshLayout具有非常高得自定义和扩展性，其中包含了如下结构：

RefreshLayout 下拉的基本功能，包括布局测量、滑动事件处理、参数设定等等
RefreshHeader 下拉头部的事件处理和显示接口
RefreshFooter 上拉底部的事件处理和显示接口
RefreshContent 对不同内容的统一封装，包括判断是否可滚动、回弹判断、智能识别

虽说我们可以直接在SmartRefreshLayout内部直接添加控件的方式达到效果，但缺少很多时机去控制动效或文字更改。我们需要去继承RefreshHeader接口以便更好的时机去控制各状态的效果。

ini 复制代码

<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中都有哪些重要的方法：

java 复制代码

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来自定义头部效果：

kotlin 复制代码

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秒结束：

scss 复制代码

smart.setOnRefreshListener {
    smart.finishRefresh(20000)
}
smart.setOnLoadMoreListener {
    smart.finishLoadMore(10000)
}

总结：

为了能更好的管控下拉动画的时机，在自定义的时候一定要去实现RefreshHeader 和RefreshFooter接口，在对应的回调处理对应的逻辑可以使动画效果更加丰富。
配合类似GifImageView 和Lottie等三方库来加载动画可以使我们的效果看起来更酷炫且非常简单。当然也可以自己使用属性动画来实现。

好了以上便是实现一个酷炫的中秋主题上下拉自定义效果的全部内容，实现起来是不是很简单？在此也提前祝大家双节快乐！如果对你有帮助的话千万别忘记一键三连哦！