侧滑效果[第五篇]：侧滑框架SmartSwipe之弹性留白效果

弹性留白，即侧滑时，有一段空白的区域，结束侧滑时，空白区域被View填充，整体的效果就和橡皮筋的拉伸效果类似。

首先看一下弹性留白效果：

278.gif

以上效果其实很常见，在SmartSwipe框架中使用SpaceConsumer可以做到弹性留白效果，代码如下：

SpaceConsumer.java

/**
 * @author billy.qi
 */
public class SpaceConsumer extends SwipeConsumer {

    public SpaceConsumer() {
        setSwipeDistanceCalculator(new ScaledCalculator(0.5F));
    }

    public SpaceConsumer(float scale) {
        setSwipeDistanceCalculator(new ScaledCalculator(scale));
    }

    @Override
    public void onDetachFromWrapper() {
        super.onDetachFromWrapper();
        View contentView = mWrapper.getContentView();
        if (contentView != null) {
            contentView.setTranslationX(0);
            contentView.setTranslationY(0);
        }
    }

    @Override
    public void onDisplayDistanceChanged(int distanceXToDisplay, int distanceYToDisplay, int dx, int dy) {
        View contentView = mWrapper.getContentView();
        if (contentView != null) {
            if (distanceXToDisplay >= 0 && isLeftEnable() || distanceXToDisplay <= 0 && isRightEnable()) {
                contentView.setTranslationX(distanceXToDisplay);
            }
            if (distanceYToDisplay >= 0 && isTopEnable() || distanceYToDisplay <= 0 && isBottomEnable()) {
                contentView.setTranslationY(distanceYToDisplay);
            }
        }
    }

}

ScaledCalculator.java

/**
 * The damping effect with scaled swipe distance
 * {@link SwipeConsumer} move distance = pointer move distance * scale
 * @author billy.qi
 */
public class ScaledCalculator implements SwipeDistanceCalculator {

    private float mScale;

    public ScaledCalculator(float scale) {
        if (scale <= 0) {
            throw new IllegalArgumentException("scale must be positive");
        }
        this.mScale = scale;
    }

    @Override
    public int calculateSwipeDistance(int swipeDistance, float progress) {
        return (int) (swipeDistance * mScale);
    }

    @Override
    public int calculateSwipeOpenDistance(int openDistance) {
        return (int) (openDistance / mScale);
    }
}

那么，该如何使用这个消费者呢？就以RecyclerView为例。

【让RecyclerView上边有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableTop();

【让RecyclerView下边有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableBottom();

【让RecyclerView左边有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableLeft();

【让RecyclerView右边有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableRight();

【让RecyclerView垂直方向有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableVertical();

【让RecyclerView水平方向有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableHorizontal();

【让RecyclerView所有方向有弹性空白效果】

代码实现：

SmartSwipe.wrap(mRecyclerView).addConsumer(new SpaceConsumer()).enableAllDirections();

效果如下：

280.gif

但是，从用户友好考虑，垂直方向的RecyclerView左右两边显然并不需要弹性留白效果，我们可以将弹性留白效果 加到Item上，用法也比较简单

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View itemView = LayoutInflater.from(mContext).inflate(R.layout.recycleview_item, parent, false);
    ViewHolder holder = new ViewHolder(SmartSwipe.wrap(itemView).addConsumer(new SpaceConsumer()).enableHorizontal().getWrapper());
    return holder;
}

效果如下：

281.gif

【滑动距离计算器】

在SpaceConsumer类中，有使用到ScaledCalculator类，ScaledCalculator是一个滑动距离计算器，我在SpaceConsumer中新增了一个构造方法：

public SpaceConsumer() {
    setSwipeDistanceCalculator(new ScaledCalculator(0.5F));
}

public SpaceConsumer(float scale) {
    setSwipeDistanceCalculator(new ScaledCalculator(scale));
}

不带参数的构造方法是框架自带的，带参数的构造方法是我新增的。

构造方法中有一个scale参数（阻力系数），scale的默认值是0.5，意思就是说，当滑动距离是10时，那么空白距离为10 * 0.5=5，所以，实际滑动距离和留白距离的计算工时如下：

distance = 实际滑动距离 * scale

[本章完...]