自定义ViewGroup可折叠控件，类似CoordinatorLayout的效果

很多APP首页都是采用头部+列表的形式显示，但是首页的空间有限，这时就需要把头部布局折叠起来了，参考效果如下：

Google在Design库22+上面增加了CoordinatorLayout+Behavior可以实现这种效y果，但是实现起来相对比较复杂，下面我将用另一种方式实现。
工程已经上传aizuzi/FoldLayout，欢迎大家给start

效果图

实现步骤

第一步

我们自定义一个控件作为头部显示，实现复杂的折叠效果也是在该类完成，在这里我先放一个ImageView作为示例，具体代码如下

public class HeadView extends LinearLayout {
  private ImageView imageview;

  private float imagevViewY;
  public HeadView(Context context) {
    super(context);
    init();
  }

  public HeadView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  public HeadView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }

  /**
   * 初始化头部布局
   */
  private void init() {
    imageview = new ImageView(getContext());
    imageview.setImageResource(R.mipmap.ic_launcher);
    addView(imageview,new LayoutParams(UnitUtil.dp2px(getContext(),80),UnitUtil.dp2px(getContext(),80)));

    setGravity(Gravity.CENTER);
    setBackgroundColor(getResources().getColor(R.color.colorAccent));
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    if(imagevViewY ==0)
    imagevViewY = imageview.getY();
  }

  /**
   * 拖动时改变控件的位置
   * @param percentage
   */
  public void offsetPixel(float percentage) {
    int viewHeight = getHeight();
    imageview.setY(imagevViewY+(int) ((viewHeight-imageview.getHeight())/2*percentage));
  }
}

第二步

下面的列表用一个自定义的RecyclerView显示，如果是使用ListView或者GridView可以重写dispatchTouchEvent方法来分发触摸事件

public class CustomRecyclerView extends RecyclerView {
  private static final int TOUCH_IDLE = 0;
  private static final int TOUCH_DRAG_LAYOUT = 1;

  private int scrollMode;
  private float downY;
  private int minHeight;
  boolean isAtTop;

  public CustomRecyclerView(Context arg0) {
    super(arg0);
  }

  @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
    if (getTop() > minHeight) {
      getParent().requestDisallowInterceptTouchEvent(false);
      return false;
    }
    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
      downY = ev.getRawY();
      isAtTop = isReadyForPullStart();
      scrollMode = TOUCH_IDLE;
      getParent().requestDisallowInterceptTouchEvent(true);
    } else if (ev.getAction() == MotionEvent.ACTION_MOVE) {
      if (scrollMode == TOUCH_IDLE) {
        float yDistance = Math.abs(downY - ev.getRawY());
        if (yDistance > 0) {
          scrollMode = TOUCH_DRAG_LAYOUT;
          if (downY < ev.getRawY() && isAtTop) {
            getParent().requestDisallowInterceptTouchEvent(false);
            return false;
          }
        }
      }
    }

    return super.dispatchTouchEvent(ev);
  }

  //传入头部布局的最小高度，用于判断分发触摸事件
  public void setMinHeight(int minHeight) {
    this.minHeight = minHeight;
  }

  //判断RecyclerView是否滚动到顶部
  protected boolean isReadyForPullStart() {
    if (getChildCount() <= 0)
      return false;
    View view = getChildAt(0);
    int firstVisiblePosition = getChildAdapterPosition(view);
    if (firstVisiblePosition == 0) {
      return view.getTop() >= getPaddingTop();
    } else {
      return false;
    }
  }
}

第三步

实现折叠效果的关键在这里，采用自定义ViewGroup来管理上面两个空间的位置，在这里使用了support-v4包下的ViewDragHelper工具类来协调两个空间的位置。

核心代码在ViewDragHelper.Callback回调里，ViewDragHelper已经帮我们实现了拖拽控件，我们在回调里判断到了最小的高度则停止拖拽，并且通知子View实现自身的逻辑即可

  private class MDragCallback extends ViewDragHelper.Callback {

    @Override
    public void onViewPositionChanged(View changedView, int left, int top,
                                      int dx, int dy) {
      //控件正在拖拽中回调
    }

    @Override
    public boolean tryCaptureView(View child, int pointerId) {
      //是否需要捕获child的拖动，为false则不拖动
      return true;
    }

    @Override
    public void onViewReleased(View releasedChild, float xvel, float yvel) {
      //手指移开屏幕，这里需要做回弹的动画
    }

    @Override
    public int clampViewPositionVertical(View child, int top, int dy) {
     //返回拖动后控件的坐标，child为拖动中的子控件
      return top;
    }
  }

最后

第一次写教程还有很多地方写得不是很明白，还望大家体谅，如果大家有问题可以在后面留言或者发简信给我，我会尽快回复。

最后再重复一下，工程已经全部上传aizuzi/FoldLayout，欢迎大家去给start