TwinklingRefreshLayout实现原理深度解析：打造优雅的刷新加载控件-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00534/article/details/148549949

TwinklingRefreshLayout实现原理深度解析：打造优雅的刷新加载控件

TwinklingRefreshLayout RefreshLayout that support for OverScroll and better than iOS. 支持下拉刷新和上拉加载的RefreshLayout,自带越界回弹效果，支持RecyclerView,AbsListView,ScrollView,WebView 项目地址: https://gitcode.com/gh_mirrors/tw/TwinklingRefreshLayout

前言

在移动应用开发中，下拉刷新和上拉加载是最常见的交互模式之一。本文将深入解析TwinklingRefreshLayout的实现原理，帮助开发者理解如何从零开始构建一个功能完善、扩展性强的刷新控件。

核心设计思想

TwinklingRefreshLayout的核心设计目标有三个：

支持大多数列表控件（RecyclerView、ListView等）
同时具备下拉刷新和上拉加载功能
方便支持个性化Header和Footer

为了实现这些目标，作者选择了继承FrameLayout而非具体列表控件的方案，这样既保证了兼容性，又避免了重复实现列表功能。

关键技术实现

1. 生命周期管理与视图添加

View本身没有明确的生命周期，因此Header和Footer的添加时机选择非常重要。作者选择了onAttachedToWindow()方法作为初始化时机，原因如下：

保证在onDraw()之前完成视图添加
该方法在View被添加到窗体上时调用
对应onDetachedFromWindow()可用于清理资源

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    // 添加头部布局
    if (mHeadLayout == null) {
        FrameLayout headViewLayout = new FrameLayout(getContext());
        LayoutParams layoutParams = new LayoutParams(MATCH_PARENT, 0);
        layoutParams.gravity = Gravity.TOP;
        mHeadLayout = headViewLayout;
        this.addView(mHeadLayout);
    }
    // 类似添加底部布局...
}

注意事项：需要防止重复添加，特别是在Activity重建时。

2. 事件分发机制

刷新控件的核心在于正确处理触摸事件的分发：

public boolean dispatchTouchEvent(MotionEvenet ev){
    boolean consume = false;
    if (onInterceptTouchEvent(ev)) {
        consume = onTouchEvent(ev);
    }else{
        consume = child.dispatchTouchEvent(ev);
    }
    return consume;
}

关键拦截逻辑：

下拉时：dy > 0 && !canChildScrollUp()
上拉时：dy < 0 && !canChildScrollDown()

其中canChildScrollUp()使用ViewCompat.canScrollVertically()实现，兼容不同Android版本。

3. 平滑滚动与动画效果

当用户释放手指时，需要让视图平滑滚动到指定位置。作者使用了属性动画而非传统补间动画，因为：

属性动画真正改变View属性，而补间动画只改变显示效果
可以方便地添加更新监听器
支持更丰富的插值器效果

private void animChildView(float endValue, long duration) {
    ObjectAnimator oa = ObjectAnimator.ofFloat(mChildView, "translationY", 
        mChildView.getTranslationY(), endValue);
    oa.setDuration(duration);
    oa.setInterpolator(new DecelerateInterpolator());
    oa.addUpdateListener(animation -> {
        int height = (int) mChildView.getTranslationY();
        mHeadLayout.getLayoutParams().height = height;
        mHeadLayout.requestLayout();
    });
    oa.start();
}

4. 个性化Header/Footer接口设计

通过定义清晰的接口，使Header/Footer的实现完全开放：

public interface IHeaderView {
    View getView();
    void onPullingDown(float fraction, float maxHeadHeight, float headHeight);
    void onPullReleasing(float fraction, float maxHeadHeight, float headHeight);
    void startAnim(float maxHeadHeight, float headHeight);
    void onFinish();
}

关键参数说明：

fraction: 当前滑动距离与Header高度的比值
maxHeadHeight: 最大可滑动高度
headHeight: Header的固定高度

5. 越界回弹实现

对于快速滑动到边界的情况，TwinklingRefreshLayout实现了优雅的回弹效果。关键技术点：

使用GestureDetector检测快速滑动(Fling)动作
对于支持OnScrollListener的控件(如RecyclerView)，直接监听滚动状态
对于不支持回调的控件(如ScrollView)，采用延时计算策略

// 延时计算策略实现
private Handler mHandler = new Handler() {
    @Override
    public void handleMessage(Message msg) {
        switch (msg.what) {
            case MSG_START_COMPUTE_SCROLL:
                cur_delay_times = -1;
            case MSG_CONTINUE_COMPUTE_SCROLL:
                cur_delay_times++;
                if (mVelocityY >= 5000 && childScrollToTop()) {
                    animOverScrollTop();
                }
                // 类似处理底部情况...
                if (cur_delay_times < ALL_DELAY_TIMES) {
                    mHandler.sendEmptyMessageDelayed(MSG_CONTINUE_COMPUTE_SCROLL, 10);
                }
                break;
        }
    }
};

实战：实现新浪微博样式Header

创建自定义View实现IHeaderView接口
在XML中定义布局（箭头、加载动画、文字）
关键方法实现：

@Override
public void onPullingDown(float fraction, float maxHeadHeight, float headHeight) {
    if (fraction < 1f) {
        textView.setText("下拉刷新");
    } else {
        textView.setText("释放立即刷新");
    }
    // 箭头旋转效果
    arrowView.setRotation(fraction * headHeight / maxHeadHeight * 180);
}

@Override
public void startAnim() {
    textView.setText("正在刷新");
    arrowView.setVisibility(GONE);
    loadingView.setVisibility(VISIBLE);
}