Question

Android 怎么实现支持所有View的通用的下拉刷新控件

Answer 1

下拉刷新对于一个app来说是必不可少的一个功能，在早期大多数使用的是chrisbanes的PullToRefresh，或是修改自该框架的其他库。而到现在已经有了更多的选择，github上还是有很多体验不错的下拉刷新。
而下拉刷新主要有两种实现方式：
1. 在ListView中添加header和footer，监听ListView的滑动事件，动态设置header/footer的高度，但是这种方式只适用于ListView，RecyclerView。
2. 第二种方式则是继承ViewGroup或其子类，监听事件，通过scroll或Layout的方式移动child。如图（又分两种情况）

Layout时将header放到屏幕外面，target则填充满屏幕。这个也是SwipeRefreshLayout的实现原理（第二种，只下拉header）

这两种（指的是继承ListView或继承ViewGroup）下拉刷新的实现方式主要有以下区别

继承ListView/RecyclerView

继承ViewGroup或其子类

适用范围
ListView/Recycler
理论支持所有View和ViewGroup

加载更多
实现简单，体验好
可以实现，看需求了，做不出ListView那种加载效果的,体验比较一般

多点触控
可以完美支持
header下拉状态中是完美支持的，但是回去之后，很难将多点触控事件传递给child

案例
QQ好友列表
美团、京东等

而今天，咱打算先讲第二种方式实现方式，继承ViewGroup，代码可以直接参考SwipeRefreshLayout，或者pullToRefresh，或者ultra-pull-to-refresh

一、思考和需求

下拉刷新需要几个状态：Reset–> Pull – > Refreshing – >Completed –>Reset

为了应对各式各样的下拉刷新设计，咱们应该提供设置自定义的Header，开发者可以通过实现接口从而自定义自己的header。

而且header可以有两种显示方式，一种是只下拉header，另外一种则是header和target一起下拉。

二、着手实现代码

2.1 定义Header的接口，创建自定义Layout

<code class="hljs java">/**
* Created by AItsuki on 2016/6/13.
*
*/
public enum State {
RESET, PULL, LOADING, COMPLETE
}</code>

<code class="hljs java">/**
* Created by AItsuki on 2016/6/13.
*
*/
public interface RefreshHeader {

/**
* 松手，头部隐藏后会回调这个方法
*/
void reset();

/**
* 下拉出头部的一瞬间调用
*/
void pull();

/**
* 正在刷新的时候调用
*/
void refreshing();

/**
* 头部滚动的时候持续调用
* @param currentPos target当前偏移高度
* @param lastPos target上一次的偏移高度
* @param refreshPos 可以松手刷新的高度
* @param isTouch 手指是否按下状态（通过scroll自动滚动时需要判断）
* @param state 当前状态
*/
void onPositionChange(float currentPos, float lastPos, float refreshPos, boolean isTouch, State state);

/**
* 刷新成功的时候调用
*/
void complete();
}</code>
package com.aitsuki.custompulltorefresh;

import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.widget.ImageView;

/**
* Created by AItsuki on 2016/6/13.
* -
*/
public class RefreshLayout extends ViewGroup {

private View refreshHeader;
private View target;
private int currentTargetOffsetTop; // target偏移距离
private boolean hasMeasureHeader; // 是否已经计算头部高度
private int touchSlop;
private int headerHeight; // header高度
private int totalDragDistance; // 需要下拉这个距离才进入松手刷新状态，默认和header高度一致

public RefreshLayout(Context context) {
this(context, null);
}

public RefreshLayout(Context context, AttributeSet attrs) {
super(context, attrs);

touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

// 添加默认的头部，先简单的用一个ImageView代替头部
ImageView imageView = new ImageView(context);
imageView.setImageResource(R.drawable.one_piece);
imageView.setBackgroundColor(Color.BLACK);
setRefreshHeader(imageView);
}

/**
* 设置自定义header
*/
public void setRefreshHeader(View view) {
if (view != null && view != refreshHeader) {
removeView(refreshHeader);

// 为header添加默认的layoutParams
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
if (layoutParams == null) {
layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
view.setLayoutParams(layoutParams);
}
refreshHeader = view;
addView(refreshHeader);
}
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (target == null) {
ensureTarget();
}

if (target == null) {
return;
}

// ----- measure target -----
// target占满整屏
target.measure(MeasureSpec.makeMeasureSpec(
getMeasuredWidth() - getPaddingLeft() - getPaddingRight(),
MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(
getMeasuredHeight() - getPaddingTop() - getPaddingBottom(), MeasureSpec.EXACTLY));

// ----- measure refreshView-----
measureChild(refreshHeader, widthMeasureSpec, heightMeasureSpec);
if (!hasMeasureHeader) { // 防止header重复测量
hasMeasureHeader = true;
headerHeight = refreshHeader.getMeasuredHeight(); // header高度
totalDragDistance = headerHeight; // 需要pull这个距离才进入松手刷新状态
}
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
final int width = getMeasuredWidth();
final int height = getMeasuredHeight();
if (getChildCount() == 0) {
return;
}

if (target == null) {
ensureTarget();
}
if (target == null) {
return;
}

// onLayout执行的时候，要让target和header加上偏移距离（初始0），因为有可能在滚动它们的时候，child请求重新布局，从而导致target和header瞬间回到原位。

// target铺满屏幕
final View child = target;
final int childLeft = getPaddingLeft();
final int childTop = getPaddingTop() + currentTargetOffsetTop;
final int childWidth = width - getPaddingLeft() - getPaddingRight();
final int childHeight = height - getPaddingTop() - getPaddingBottom();
child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);

// header放到target的上方，水平居中
int refreshViewWidth = refreshHeader.getMeasuredWidth();
refreshHeader.layout((width / 2 - refreshViewWidth / 2),
-headerHeight + currentTargetOffsetTop,
(width / 2 + refreshViewWidth / 2),
currentTargetOffsetTop);
}

/**
* 将第一个Child作为target
*/
private void ensureTarget() {
// Don't bother getting the parent height if the parent hasn't been laid
// out yet.
if (target == null) {
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
if (!child.equals(refreshHeader)) {
target = child;
break;
}
}
}
}
}</code>