iOS喜欢在安卓上滚动效果

我想在我的应用中实现类似 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);
    }
}

答案 1

我快速地将一个简单的解决方案放在一起,基于.它并不完美,你可以花一些时间对它进行微调,但它还不错。无论如何,结果应该看起来像这样:CoordinatorLayout.Behavior

enter image description here

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

无论如何,让我们从我的答案开始:我想出的解决方案可以与任何可滚动的容器一起使用,无论是 ,还是您不需要子类化任何容器即可实现它。ScrollViewListViewRecyclerViewViews

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

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

请记住,如果您的目标不是API级别25(顺便说一句,您应该这样做),那么您需要包含API级别的最新版本(例如。 对于 API 级别 24)。compile 'com.android.support:design:24.2.0'

无论您使用什么可滚动容器,都需要包装在布局中。在我的示例中,我使用:CoordinatorLayoutNestedScrollView

<?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>

允许您将 a 分配给其直接子视图。在这种情况下,我们将为将要实现的超滚动反弹效果分配一个。CoordinatorLayoutBehaviorBehaviorNestedScrollView

让我们来看看代码: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();
        }
    }
}

解释a是什么以及它们是如何工作的超出了这个答案的范围,所以我只是要快速解释上面的代码的作用。拦截 在 的直接子级中发生的所有滚动事件。在方法中,我们返回,因为我们对任何滚动事件感兴趣。在我们查看参数中,它告诉我们滚动容器没有消耗多少垂直滚动(换句话说,overscroll),然后按该量转换滚动容器的子级。由于我们只是获得增量值,因此我们需要在变量中对所有这些值进行求和。 在滚动事件停止时调用。这是当我们将滚动容器的所有子级动画化回其原始位置时。BehaviorBehaviorCoordinatorLayoutonStartNestedScroll()trueonNestedScroll()dyUnconsumedmOverscrollYonStopNestedScroll()

要将 分配给 ,我们需要使用 xml 属性并传入要使用的 的完整类名。在我的示例中,上面的类在包中,因此我必须设置为值。 是 的自定义属性,因此我们需要在它前面加上正确的命名空间:BehaviorNestedScrollViewlayout_behaviorBehaviorcom.github.wrdlbrnft.testappcom.github.wrdlbrnft.testapp.OverScrollBounceBehaviorlayout_behaviorCoordinatorLayout

<?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>

请注意我在 上添加的命名空间和在 上添加的属性。CoordinatorLayoutapp:layout_behaviorNestedScrollView

这就是你所要做的!虽然这个答案比我预期的要长,但我跳过了一些基础知识,包括和。因此,如果您不熟悉这些或有任何其他进一步的问题,请随时提问。CoordinatorLayoutBehaviors


答案 2

感谢Xaver Kapeller,我用kotlinandroidx编写了我的解决方案,其中包含覆盖的甩动和少量添加

enter image description here

添加协调器依赖项

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) {
    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 标记


推荐