iOS喜欢Android上的滚动效果

Question

我想在我的应用程序中实现类似iOS的反弹过度滚动效果.

我遇到了这个链接,建议创建一个自定义ScrollView.但问题是,当我快速上下滚动它工作正常但是一旦我拉动屏幕的底部或顶部它就会卡住而且效果不再起作用.

作为我想要实现的那种动画的一个例子,你可以看看这个:

这是我目前的代码:

public class ObservableScrollView extends ScrollView
{
    private static final int MAX_Y_OVERSCROLL_DISTANCE = 150;

    private Context mContext;
    private int mMaxYOverscrollDistance;

    public ObservableScrollView(Context context)
    {
        super(context);
        mContext = context;
        initBounceScrollView();
    }

    public ObservableScrollView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        mContext = context;
        initBounceScrollView();
    }

    public ObservableScrollView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        mContext = context;
        initBounceScrollView();
    }

    private void initBounceScrollView()
    {
        //get the density of the screen and do some maths with it on the max overscroll distance
        //variable so that you get similar behaviors no matter what the screen size

        final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
        final float density = metrics.density;

        mMaxYOverscrollDistance = (int) (density * MAX_Y_OVERSCROLL_DISTANCE);
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent)
    {
        //This is where the magic happens, we have replaced the incoming maxOverScrollY with our own custom variable mMaxYOverscrollDistance;
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, mMaxYOverscrollDistance, isTouchEvent);
    }
}

Answer 1

我已经快速整理了一个基于a的简单解决方案CoordinatorLayout.Behavior.它并不完美,你可以花一些时间对它进行微调,但它并不坏.无论如何,结果看起来应该是这样的:

在我开始回答之前作为一个小旁注:我强烈建议您使用NestedScrollView支持库而不是正常ScrollView.它们在任何方面都是相同的,但NestedScrollView实现在较低的API级别上更正了嵌套的滚动行为.

无论如何,让我们从我的答案开始:我提出的解决方案将适用于任何可滚动的容器,无论如何ScrollView,ListView或者RecyclerView您不需要子类任何Views实现它.

首先,如果您尚未使用Google的设计支持库,则需要将其添加到项目中:

compile 'com.android.support:design:25.0.1'

请记住,如果您没有针对API级别25(顺便提一下),那么您需要包含API级别的最新版本(例如compile 'com.android.support:design:24.2.0'API级别24).

无论您使用哪种可滚动容器,都需要将其包裹在CoordinatorLayout布局中.在我的例子中,我使用的是NestedScrollView:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- content -->

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

将CoordinatorLayout允许你指定一个Behavior到它的直接子视图.在这种情况下,我们要分配Behavior到NestedScrollView这是会实现反弹时反弹的效果.

我们来看看代码Behavior:

public class OverScrollBounceBehavior extends CoordinatorLayout.Behavior<View> {

    private int mOverScrollY;

    public OverScrollBounceBehavior() {
    }

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

    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
        mOverScrollY = 0;
        return true;
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
        if (dyUnconsumed == 0) {
            return;
        }

        mOverScrollY -= dyUnconsumed;
        final ViewGroup group = (ViewGroup) target;
        final int count = group.getChildCount();
        for (int i = 0; i < count; i++) {
            final View view = group.getChildAt(i);
            view.setTranslationY(mOverScrollY);
        }
    }

    @Override
    public void onStopNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target) {
        final ViewGroup group = (ViewGroup) target;
        final int count = group.getChildCount();
        for (int i = 0; i < count; i++) {
            final View view = group.getChildAt(i);
            ViewCompat.animate(view).translationY(0).start();
        }
    }
}

解释它Behavior是什么以及它们如何工作超出了本答案的范围,因此我将快速解释上述代码的作用.在Behavior中截获的直接孩子发生的所有滚动事件CoordinatorLayout.在onStartNestedScroll()我们返回的方法中,true因为我们对任何滚动事件感兴趣.在onNestedScroll()我们看一下dyUnconsumed参数,它告诉我们滚动容器没有消耗多少垂直滚动(换句话说是过度滚动),然后将滚动容器的子节点转换为该数量.由于我们只是得到delta值,我们需要在mOverscrollY变量中总结所有这些值.onStopNestedScroll()在滚动事件停止时调用.这是我们将滚动容器的所有子项设置回原始位置的动画.

要分配Behavior给NestedScrollView我们需要使用layout_behaviorxml属性并传入Behavior我们想要使用的完整类名.在我的例子中,上面的类在包中,com.github.wrdlbrnft.testapp所以我必须设置com.github.wrdlbrnft.testapp.OverScrollBounceBehavior为值.layout_behavior是一个自定义属性,CoordinatorLayout所以我们需要为它添加正确的命名空间:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.github.wrdlbrnft.testapp.OverScrollBounceBehavior">

        <!-- content -->

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

注意我添加的命名空间和我添加CoordinatorLayout的app:layout_behavior属性NestedScrollView.

这就是你要做的一切!虽然这个答案比我预想的要长,但我跳过了一些基于这个CoordinatorLayout和Behaviors.的基础知识.因此,如果您对这些不熟悉或有任何其他问题,请随时提出.

Answer 2

感谢Xaver Kapeller ，我使用kotlin和androidx编写了带有重写 fling 和少量添加的解决方案

添加协调器依赖

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

创建一个扩展 CoordinatorLayout.Behavior 的新类

import android.content.Context
import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import android.view.animation.AccelerateDecelerateInterpolator
import androidx.coordinatorlayout.widget.CoordinatorLayout
import androidx.core.view.ViewCompat

class OverScrollBehavior(context: Context, attributeSet: AttributeSet)
: CoordinatorLayout.Behavior<View>() {

companion object {
    private const val OVER_SCROLL_AREA = 4
}

private var overScrollY = 0

override fun onStartNestedScroll(
    coordinatorLayout: CoordinatorLayout,
    child: View,
    directTargetChild: View,
    target: View,
    axes: Int,
    type: Int
): Boolean {
    overScrollY = 0
    return true
}

override fun onNestedScroll(
    coordinatorLayout: CoordinatorLayout,
    child: View,
    target: View,
    dxConsumed: Int,
    dyConsumed: Int,
    dxUnconsumed: Int,
    dyUnconsumed: Int,
    type: Int,
    consumed: IntArray
) {
    if (dyUnconsumed == 0) {
        return
    }

    overScrollY -= (dyUnconsumed/OVER_SCROLL_AREA)
    val group = target as ViewGroup
    val count = group.childCount
    for (i in 0 until count) {
        val view = group.getChildAt(i)
        view.translationY = overScrollY.toFloat()
    }
}

override fun onStopNestedScroll(
    coordinatorLayout: CoordinatorLayout,
    child: View,
    target: View,
    type: Int
) {
    // Smooth animate to 0 when the user stops scrolling
    moveToDefPosition(target)
}

override fun onNestedPreFling(
    coordinatorLayout: CoordinatorLayout,
    child: View,
    target: View,
    velocityX: Float,
    velocityY: Float
): Boolean {
    // Scroll view by inertia when current position equals to 0
    if (overScrollY == 0) {
        return false
    }
    // Smooth animate to 0 when user fling view
    moveToDefPosition(target)
    return true
}

private fun moveToDefPosition(target: View) {
    if (overScrollY == 0) {
        return
    }
    val group = target as ViewGroup
    val count = group.childCount
    for (i in 0 until count) {
        val view = group.getChildAt(i)
        ViewCompat.animate(view)
            .translationY(0f)
            .setInterpolator(AccelerateDecelerateInterpolator())
            .start()
    }
}

}

使用 CoordinatorLayout 和 NestedScrollView 创建 XML 文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <androidx.core.widget.NestedScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior=".OverScrollBehavior">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textAlignment="center"
            android:padding="10dp"
            android:text="@string/Lorem"/>
    </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

并且不要忘记添加

app:layout_behavior=".OverScrollBehavior" // Or your file name

字段到您的 NestedScrollView XML 标记