最近项目有个新的要求实现两个 View（分别记为 ViewA 和 ViewB ）的无限下拉效果，ViewA 和 ViewB 本身的内容完全不同，具体的要求有一下几点（最终最终的效果图在文章末尾）：
- 不可以上拉切换两个View，如果是在手指拖动的过程中，View 可以进行上滑，但此时不能将 ViewA 和 ViewB 滑出屏幕。
- 手指释放的时候，如果已经下拉了屏幕 1/3 的距离，则需要自动下拉切换 View。
- 如果不满足要求2 ，则需要将 View 自动滑动到开始的位置，此时没有 View 切换。
- 滑动时是两个 View 一起滑动，即 ViewA 被拉出了多少，ViewB 就要显示多少。
- 通过代码调用也可以有下拉的动画效果（其实就是没有了手指拖拽的过程）
- 上述操作可以无限操作（主要指下拉）
没有任何一个现成的控件能完全满足这些要求，所以还是自己手撸，自定义一个 ViewGroup 。主要的难点有两个：
- 无限下拉
我需要控制两个 View ，让他们能不停地向下滑动。于是我在完成一次 View 切换之后（比如在显示 ViewA 显示时 切换 ViewB），需要将 ViewB 布局到 ViewA 的上面，这样当用户继续下拉时，可以再将 ViewB 拉出来，而且在每次切换完毕后都要进行这个操作：
private void switchViewLayout(boolean changeView) {
incrementVertical = 0;
if(changeView) {
//交换两个View的顺序，重新布局两个View
childrens.add(0,childrens.remove(childrens.size()-1));
requestLayout();
showingView = childrens.get(childrens.size() - 1);
if (pullDownSwitchListener != null) pullDownSwitchListener.onViewSelected(showingView);
}
if (pullDownSwitchListener != null) pullDownSwitchListener.onSwitchState(SwitchState.STATE_IDLE);
}
@Override
protected void onLayout(boolean c, int l, int t, int r, int b) {
for (int i = 0; i < childrens.size(); i++) {
View view = childrens.get(i);
if (view.getVisibility() == GONE) continue;
int top = (b - t) * (i - 1) / 2 + incrementVertical;
int bottom = (b - t) * i / 2 + incrementVertical;
view.layout(l,
top,
r,
bottom);
}
}
注意在 onLayout 的时候，我始终将第二个 View布局到当前界面显示的位置 。
- 拖动和自动下拉
让 View 动起来有三个方案可以选择：- scrollTo/scrollBy
- offsetTopAndBottom
- requestLayout
一般会毫不犹豫选择方案一，但是我最终选择了第三个方案，而且也只有第三个方案能达到效果，因为其中一个 View 有个满屏的 GLSurfaceView。前两种原理是一样的，只是移动了 View 的内容，即通过移动 Canvas 将 View “滚动”起来，而 View 本身在 ViewGroup 中的位置没有发生改变。对于普通的 View 没有什么关系，但是 GLSurfaceView 就要区别对待了，因为它本身就是黑色的，如果只是内容滚动而位置不变，那么在滚动的过程中就会看到它的黑底（感觉就像衣服被扒了），这个黑底会把另一个被拉出的 View 给遮挡住（衣服被扒了不服气，非要耍流氓）。所以为了效果最终选择了效率不那么好的 requestLayout。
至于自动下拉，一开始，我是自己模拟 Scroller 写了个 AutoLayouter 实现，之所以要写个 AutoLayouter，主要是因为我懒得将 scroller.getCurrY() 转换为 layout 需要的值，最重要的是，我想自己控制 computeOffset 的计算方式。后来还是发现自己想多了，直接用 ValueAnimator 也能完美满足我的要求：
/**
* @param start 开始的偏移量
* @param end 最终的偏移量
* @param changeView 是否切换了View
* @param duration 动画时间
*/
private void startAnimator(int start, int end, final boolean changeView, int duration) {
ValueAnimator valueAnimator = ValueAnimator.ofInt(start,end);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
incrementVertical = (int) valueAnimator.getAnimatedValue();
if(pullDownSwitchListener != null) {
pullDownSwitchListener.onPullDownChanged(incrementVertical,onePageHeight);
}
requestLayout();
}
});
valueAnimator.setDuration(duration);
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
switchViewLayout(changeView);
isScrolling = false;
}
});
isScrolling = true;
valueAnimator.start();
}
做到这儿功能已经 OK 了，但还是有个小问题，就是在下拉 GLSurfaceView 时，和另一个 View 之间会有黑边闪烁，这个因为 GLSurafaceView 的绘制线程和 UI 线程没法同步的问题，目前也没有什么解决方案。所以在第二版，交互方式发生了改变，就是在下拉时，正在显示的 View 不动，只滚动隐藏的 View，就像拉窗帘一样，这样就规避了黑边的问题，于是另一个坑又来了。
其实在现有自定义控件的基础上修改达到新效果很容易，只需要稍微修改下 onLayout 方法即可：
@Override
protected void onLayout(boolean c, int l, int t, int r, int b) {
for (int i = 0; i < childrens.size(); i++) {
View view = childrens.get(i);
if (view.getVisibility() == GONE) continue;
//只移动之前没有显示的View，实现拉窗帘的效果
boolean isShowingView = childrens.get(i) == showingView;
int top = (b - t) * (i - 1) / 2 + (isShowingView ? 0 : incrementVertical);
int bottom = (b - t) * i / 2 + (isShowingView ? 0 : incrementVertical);
view.layout(l,
top,
r,
bottom);
}
}
修改后发现效果确实有了，但出现了一个很让人匪夷所思的问题，在通过代码调用切换的时候，没有 GLSurfaceView 的 View 是正常的，而有 GLSurfaceView 总是秒切，没有出现动画效果，不管切换时间设为多长。一开始我以为是什么操作导致该 View 的动画没有执行，可查看在 ValueAnimator 和 onLayout 两处的 log 信息，发现动画执行了（就是重新布局），两个 View 的代码表现完全一样，就是呈现的效果不同。
想了蛮久才搞明白是 View Z 轴顺序的问题，因为我先将 GLSurfaceView 添加进 ViewGroup，后添加普通 View ，所以普通 View 的 Z 轴顺序高于 GLSurfaceView，在我对 GLSurfaceView 进行不断 layout 的时候，它确实执行了，只不过是在普通 View 的下面执行了，所以在展示普通 View 的时候，看不到 GLSurfaceView 的拉窗帘效果，而之前的交互方式是两个都动，所以不关 Z 轴鸟事，WTF!
找到问题的原因就好解决了，只要我保证将要被拉出的 View 在 Z 轴的最上方就行了，于是 bingToFront 派上用场：
@Override
public boolean onTouchEvent(MotionEvent event) {
float curY = event.getY();
switch (event.getAction()) {
...
case MotionEvent.ACTION_MOVE:
if (isScrolling) return false;
final float interval = curY - preY;
preY = curY;
incrementVertical = (int) (curY - startY);
if(incrementVertical < 0) {
//不支持在原位置的基础上上拉
incrementVertical = 0;
}
if (interval <= 0) {
if (!isDragging) {
//不支持直接上滑操作,除非在已经 处于drag中
incrementVertical = 0;
return false;
}
}else {
if (!isDragging) {
isDragging = true;
//保证看到动画效果
childrens.get(0).bringToFront();
}
}
if(pullDownSwitchListener != null) {
pullDownSwitchListener.onPullDownChanged(incrementVertical,onePageHeight);
}
requestLayout();
break;
...
}
return true;
}
最后的效果图如下：
OK，希望这些坑能给大家带来帮助。
我已经把自定义的 ViewGroup 上传到 Github , 也有相应的例子，欢迎 Star。
