仿IOS版QQ下拉刷新布局

介绍

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

QQ 的下拉刷新样式（原来是大 Twitter 的专利）

缘由

实现这个的原因也没啥，就是好奇（其实最近在看 贝赛尔曲线）。大家可以拿出自己的苹果手机（非常抱歉，Android 版的 QQ 下拉刷新的实现和苹果版不一样，就忽略 Android 了。如果没有苹果手机，我也没有办法。。。），下来刷新看一下 QQ 下拉刷新时的样貌。

How

本项目的实现是基于以下博客的帮助

三次贝塞尔曲线练习之弹性的圆

Path之贝塞尔曲线：这个讲的比较全面，可以运行一下样例，对学习贝塞尔曲线有帮助

Android 贝塞尔曲线的魅力

BezierDemo：这个是上面博客提到的一个项目，也正是这个项目，才发现，QQ 的实现可能和贝塞尔曲线有关系（个人猜测而已，毕竟我就是利用贝塞尔曲线完成的）

其中，我在学习上面的Demo时，通过自己稍微的改动，发下了如下的效果

大家再对比一下 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。