[Digging] 支付宝首页交互三部曲 3 实现支付宝首页交互

发表于

cover_3

前言

这个系列源自前几天看到一篇使用CoordinatorLayout实现支付宝首页效果的文章，下载看了效果和源码，不敢苟同，所以打算自己动手。实现的过程有点曲折，但也发现了一些有意思的事情，用三篇文章来记录并分享给大家。

  • CoordinatorLayout和Behavior
  • 自定义CoordinatorLayout.Behavior
  • 支付宝首页效果实现

文中：CoL代表CoordinatorLayout，ABL表示AppBarLayout，CTL表示CollapsingToolbarLayout，SRL表示SwipeRefreshLayout，RV表示RecyclerView。

源码：Github

先看下最终效果：

效果分析

支付宝首页基本可以看成4个部分：

alipay_home_struct

折叠时QuickAction部分折叠，继续向上滑动，GridMenu移出屏幕。下拉时，刷新动画出现在GridMenu和MessageList之间。

结构设计

前一部分只是分析了一下结构，这里就要开始设计了。为了实现QuickAction折叠的效果，其实有好几种设计方法：

  1. 除SearchBar外，剩下的部分均使用RecyclerView实现。
  2. SearchBar和QuickAction作为Header，其他部分使用RecyclerView实现。
  3. SearchBar、QuickAction、GridMenu作为Header，MessageList使用RecyclerView实现。
  4. ……

为了方便摆放下拉刷新的位置，我选择了第三种结构，同时使用SwipeRefreshLayout实现下拉刷新，这种结构也是为了方便替换成其他下拉刷新控件。看下最终的实现效果：

视频

除了下拉刷新效果使用了SwipeRefreshLayout以及在GridMenu和QuickAction位置下拉不能触发下拉刷新外，其他的交互效果都和支付宝无异。

在开始动手之前，我还查看了支付宝的实现方法，很意外的是支付宝是使用ListView实现的这个页面，除了SearchBar，其他部分均为ListView。

alipay-home-uiviewer

实现

我们的效果实际上和AppBarLayout有很多相似之处，通过上篇文章，我们知道了AppBarLayout使用的两个Behavior使用了3个基类，如果能用就好了。不过这三个基类的访问权限是包可见，所以只好从Support中拷出来使用了。还有些步骤需要修改基类中的方法，以及增加方法可见性。

APHeaderView

APHeaderView包括除MessageList以外的其他部分，要实现的大致相当于AppBarLayout和CollapsingToolbarLayout结合的效果。

APHeaderView继承自ViewGroup。

首先在onFinishInflate()方法中获取子View的引用，mBar是SearchBar部分，mSnapView是QuickAction部分，mScrollableViews是其余的View。之所以没有使用上面的命名方式，是因为我不想把这个效果限制的那么死，这些变量就以他们的功能命名了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    final int childCount = getChildCount();
    if (childCount < 2) {
        throw new IllegalStateException("Child count must >= 2");
    }
    mBar = findViewById(R.id.alipay_bar);
    mSnapView = findViewById(R.id.alipay_snap);
    mScrollableViews = new ArrayList<>();
    for (int i = 0; i < childCount; i++) {
        View v = getChildAt(i);
        if (v != mBar && v != mSnapView) {
            mScrollableViews.add(v);
        }
    }
    mBar.bringToFront();
}

最后一行语句将mBar移至顶部，这样可以一直显示。

布局部分没啥好说的，实现的是类似LinearLayout的布局，子View顺次排列。偏移量的处理并不在此处。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    if (heightSize == 0) {
        heightSize = Integer.MAX_VALUE;
    }

    int height = 0;

    final int childCount = getChildCount();
    for (int i = 0; i < childCount; i++) {
        View c = getChildAt(i);
        measureChildWithMargins(
                c,
                MeasureSpec.makeMeasureSpec(widthSize - getPaddingLeft() - getPaddingRight(), MeasureSpec.EXACTLY),
                0,
                MeasureSpec.makeMeasureSpec(heightSize - getPaddingTop() - getPaddingBottom(), MeasureSpec.AT_MOST),
                height
        );
        height += c.getMeasuredHeight();
    }

    height += getPaddingTop() + getPaddingBottom();

    setMeasuredDimension(
            widthSize,
            height
    );
}

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    int childTop = getPaddingTop();
    int childLeft = getPaddingLeft();
    mBar.layout(childLeft, childTop, childLeft + mBar.getMeasuredWidth(), childTop + mBar.getMeasuredHeight());
    childTop += mBar.getMeasuredHeight();

    mSnapView.layout(childLeft, childTop, childLeft + mSnapView.getMeasuredWidth(), childTop + mSnapView.getMeasuredHeight());

    childTop += mSnapView.getMeasuredHeight();

    for (View sv : mScrollableViews) {
        sv.layout(childLeft, childTop, childLeft + sv.getMeasuredWidth(), childTop + sv.getMeasuredHeight());
        childTop += sv.getMeasuredHeight();
    }
}

滚动区域是控制滚动的重要部分，这里涉及到两个方法。getScrollRange返回总的可滚动区域，getSnapRange返回折叠效果的区域。

1
2
3
4
5
6
7
8
9
10
11
12
13
public int getScrollRange() {
    int range = mSnapView.getMeasuredHeight();
    if (mScrollableViews != null) {
        for (View sv : mScrollableViews) {
            range += sv.getMeasuredHeight();
        }
    }
    return range;
}

private int getSnapRange() {
    return mSnapView.getHeight();
}

APHeaderView.Behavior

继承自HeaderBehavior，和AppBarLayout一样，天生自带Offset处理和Touch事件处理，需要实现的，是NestedScrolling和snap效果。比AppBarLayout更多的，APHeaderView.Behavior实现了精确地Fling效果。也就是说Fling效果和RecyclerView也是联动的。这里主要说一下我是怎么处理Fling效果的。

Header -> ScrollingView

fling效果的实现，是通过Scroller不断修改偏移量最终呈现出连贯的动画。如果不处理fling效果，结果就是ScrollingView在fling到顶端时，出现overscroll效果，也就是剩余了部分偏移量没有消费。所以，要实现fling的联动，就是消费多余的偏移量。

fling可能在两个方法中触发，一个是onTouchEvent，还有就是onNestedPreFling。我们在onNestedPreFling方法中，判断如果是向上滑动，就手动调用fling方法，和onTouchEvent一致。

1
2
3
4
5
6
7
8
9
@Override
public boolean onNestedPreFling(CoordinatorLayout coordinatorLayout, APHeaderView child, View target, float velocityX, float velocityY) {
    if (velocityY > 0 && getTopAndBottomOffset() > -child.getScrollRange()) {
        fling(coordinatorLayout, child, -child.getScrollRange(), 0, -velocityY);
        mWasFlung = true;
        return true;
    }
    return false;
}

HeaderBehavior类中的Scroller回调，最终调用setHeaderTopAndBottomOffset方法设置偏移量：

1
2
3
4
5
6
7
8
9
10
11
12
@Override
public void run() {
    if (mLayout != null && mScroller != null) {
        if (mScroller.computeScrollOffset()) {
            setHeaderTopBottomOffset(mParent, mLayout, mScroller.getCurrY());
            // Post ourselves so that we run on the next animation
            ViewCompat.postOnAnimation(mLayout, this);
        } else {
            onFlingFinished(mParent, mLayout);
        }
    }
}

APHeaderView.Behavior的实现，就是覆写这个方法，将没有消费的偏移量分发出去。我们先看覆写的fling方法：如果判断向上滑动，除了设置标记为为true，同时会修改边界值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Override
protected boolean fling(CoordinatorLayout coordinatorLayout, APHeaderView layout, int minOffset, int maxOffset, float velocityY) {
    int min = minOffset;
    int max = maxOffset;
    if (velocityY < 0) {
        // 向上滚动
        mShouldDispatchFling = true;
        mTempFlingDispatchConsumed = 0;
        mTempFlingMinOffset = minOffset;
        mTempFlingMaxOffset = maxOffset;
        min = Integer.MIN_VALUE;
        max = Integer.MAX_VALUE;
    }
    return super.fling(coordinatorLayout, layout, min, max, velocityY);
}

修改边界值是因为我们希望即使达到边界，fling效果依然不能停止，因为我们要把多余的偏移量再次分发给ScrollingView。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@Override
public int setHeaderTopBottomOffset(CoordinatorLayout parent, APHeaderView header, int newOffset, int minOffset, int maxOffset) {
    final int curOffset = getTopAndBottomOffset();
    final int min;
    final int max;
    if (mShouldDispatchFling) {
        min = Math.max(mTempFlingMinOffset, minOffset);
        max = Math.min(mTempFlingMaxOffset, maxOffset);
    } else {
        min = minOffset;
        max = maxOffset;
    }

    int consumed = super.setHeaderTopBottomOffset(parent, header, newOffset, min, max);
    // consumed 的符号和 dy 相反

    header.dispatchOffsetChange(getTopAndBottomOffset());

    int delta = 0;

    if (mShouldDispatchFling && header.mOnHeaderFlingUnConsumedListener != null) {
        int unconsumedY = newOffset - curOffset + consumed - mTempFlingDispatchConsumed;
        if (unconsumedY != 0) {
            delta = header.mOnHeaderFlingUnConsumedListener.onFlingUnConsumed(header, newOffset, unconsumedY);
        }
        mTempFlingDispatchConsumed += -delta;
    }

    return consumed + delta;
}

首先修正边界值，然后调用父类的setHeaderTopBottomOffset实现，这个方法返回父类消费的偏移量。然后计算剩余的偏移量：

1
int unconsumedY = newOffset - curOffset + consumed - mTempFlingDispatchConsumed;

注意这里的mTempFlingDispatchConsumed变量，因为不能直接获取总的dy，在使用newOffset-curOffset获取dy时，当到达实际边界时，因为curOffset不会继续变小，所以获取到的dy实际上是累计的，所以使用mTempFlingDispatchConsumed变量存储额外消费的掉的偏移量。

当unconsumedY不为0时，说明有剩余未消费的偏移量，我们把它分发出去，同时记录Listener消费的值，把这个值加上header本身消费的值，作为总消费量返回。

1
2
3
4
5
6
7
8
9
10
11
mHeaderView.setOnHeaderFlingUnConsumedListener(new APHeaderView.OnHeaderFlingUnConsumedListener() {
    @Override
    public int onFlingUnConsumed(APHeaderView header, int targetOffset, int unconsumed) {
        APHeaderView.Behavior behavior = mHeaderView.getBehavior();
        int dy = -unconsumed;
        if (behavior != null) {
            mRecyclerView.scrollBy(0, dy);
        }
        return dy;
    }
});

在listener中，直接调用RecyclerView的scrollBy方法进行滑动（注意符号）。

这样就完成了Header向ScrollingView的fling分发。

ScrollingView -> Header

ScrollingView需要在向下触发fling效果时，将未消费的偏移量交给Header处理。RecyclerView依赖LayoutManager进行滚动。具体为scrollVerticallyBy方法，我们需要覆写这个方法，分发未消费的偏移量，这里直接使用匿名内部类进行覆写。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
final LinearLayoutManager lm = new LinearLayoutManager(mActivity, LinearLayoutManager.VERTICAL, false) {

    @Override
    public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
        int scrolled = super.scrollVerticallyBy(dy, recycler, state);
        if (dy < 0 && scrolled != dy) {
            // 有剩余
            APHeaderView.Behavior behavior = mHeaderView.getBehavior();
            if (behavior != null) {
                int unconsumed = dy - scrolled;
                int consumed = behavior.scroll((CoordinatorLayout) mHeaderView.getParent(), mHeaderView, unconsumed, -mHeaderView.getScrollRange(), 0);
                scrolled += consumed;
            }
        }
        return scrolled;
    }
};

和RecyclerView类似，调用HeaderBehavior.scroll方法进行滚动，注意边界的处理。

虽然scroll也会调用到setHeaderTopBottomOffset，但是因为此时mShouldDispatchFling一定是为false的，所以不会造成循环调用。

这样就实现了fling事件的双向分发。

APScrollingBehavior

因为APScrollingBehavior和AppBarLayout.ScrollingBehavior并没有特别不同，这里就不赘述了。

总结

虽然实现这个效果没用多少时间，但是借此机会又完整的分析了AppBarLayout、CoordinatorLayout、Behavior等官方的实现，让这个效果变得有意义了一些。

如果单独评价这个交互的话，我倒觉得下拉刷新应该出现在GridMenu上面，这样页面看起来重心就比较稳了，不至于头重脚轻。