XRecyclerView_For_QQ_Refresh_Header

介绍

本项目是根据 IPHONE 版 QQ 的下拉刷新布局，基于 XRecyclerView 实现的 Android版 QQ 下拉刷新布局。项目地址，欢迎使用，PR，喜欢的话请 star 一下。效果如下：（录屏软件比较渣，大家可以自我运行观察一下效果）

大家再对比一下 QQ 的下拉刷新，发现是不是很相似，既然发现了这个，那么接下来就是考虑怎么移植到下拉刷新的头部了（这里用的是我自己写的 XRecyclerView 控件，并稍微对齐改造了一下）

实现

实现上面的效果需要的知识储备有

• 贝赛尔曲线：这次的实现就是和它有关系
• XRecyclerView：一款自己写的，为 RecyclerView 添加下拉刷新和上拉加载的控件（欢迎大家使用，PR，喜欢的可以 star 一下）

第一步

如何利用贝塞尔曲线绘制出上图显示的效果呢？核心代码如下：

float offsetX = mRadius;

float x1 = mStartX - offsetX;
float y1 = mStartY;
float x4 = mStartX + offsetX;
float y4 = mStartY;

float x2 = mStartX - offsetX;
float y2 = y;
float x3 = mStartX + offsetX;
float y3 = y;

mPath.reset();
mPath.moveTo(x1, y1);
mPath.quadTo(mStartX, mStartY, x2 + mStep, y2);
mPath.lineTo(x3 - mStep, y3);
mPath.quadTo(mStartX, mStartY, x4, y4);
mPath.lineTo(x1, y1);

代码很少，其实就是找到贝塞尔曲线关键的两点：控制点和坐标点

第二步

如何将布局放到 XRecyclerView 中呢？

XRecyclerview 添加头部布局很简单，下面代码就可以实现

 mHeaderView = LayoutInflater.from(this).inflate(R.layout.qq_header_view, null);
mXRecyclerView.addHeaderView(mHeaderView, 50);

但是，有一个问题，QQ 的下拉刷新，会随着向下拉的距离增大而变化，而 XRecyclerView 中并没有实现这样的接口，所以，需要对 XRecyclerView 进行改造，为 XRecyclerView 添加两个接口回调，分别为

/** 用于监控是否刷新完成，用于隐藏布局*/
public interface OnRefreshCompleteListenter {
    void refreshComplete();
}
/** 用于记录下拉头部的距离，方便形成圆抽长的效果*/
public interface OnRefreshDistanceListener {
    void refreshDistance(int dy);
}

有了上面两个接口，接下来就好办了

第三步

根据接口实现功能

mXRecyclerView.setOnRefreshListener(new OnRefreshListener() {
        @Override
        public void onRefresh() {
            refreshData();
            qqRefreshView.start();
        }
});
mXRecyclerView.setOnRefreshDistanceListener(new OnRefreshDistanceListener() {
        @Override
        public void refreshDistance(int dy) {
            qqRefreshView.setVY(dy);
        }
});
mXRecyclerView.setOnRefreshCompleteListenter(new OnRefreshCompleteListenter() {
        @Override
        public void refreshComplete() {
            qqRefreshView.stop();
        }
});

其中， qqRefreshView.start() 和 qqRefreshView.stop() 用于实现 QQ 水滴断裂后的圆盘旋转的效果

qqRefreshView.setVY(dy) 是将下滑的距离传入布局中，方便让圆逐渐抽长至断裂

至此，就可以实现类似 QQ 下拉刷新的布局和操作。

不足

虽然实现了大概的样貌，但是还有很多细节没有完善好

• 下拉刷新的圆抽长的过度效果和 QQ 其实是有差距的，主要还是贝塞尔曲线公式没有调整到完美
• QQ 的下拉刷新是等圆全部出来后，继续往下拉才会变的修长；而目前实现的是，下拉的时候就开始便修长，这点在细节体验上会差一些

总结

虽然效果差强人意，但是在实现过程中，还是有很多的收获，同时也发现了自己编写的 XRecyclerView 的一些不足，学习永无止境，For Google & Android，I Do。