iOS喜欢Android上的滚动效果

nvbavucw  于 2023-01-28  发布在  Android
关注(0)|答案(5)|浏览(130)

我想在我的应用中实现类似iOS的弹跳过卷效果。
我遇到了这个link，它建议创建一个自定义的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);
    }
}
android

5条答案

按热度按时间
eimct9ow

eimct9ow1#

我很快就基于CoordinatorLayout.Behavior设计了一个简单的解决方案。它并不完美，你也许可以花些时间对它进行微调，但它并不坏。无论如何，结果应该是这样的：

在我开始回答这个问题之前，请注意一点：我强烈建议您使用支持库中的NestedScrollView而不是普通的ScrollView。它们在任何方面都是相同的，但是NestedScrollView在较低的API级别上实现了正确的嵌套滚动行为。
无论如何，让我们从我的回答开始：我提出的解决方案适用于任何可滚动容器，无论是ScrollView、ListView还是RecyclerView，并且不需要子类化任何Views来实现它。
首先，如果您尚未使用Google的设计支持库，则需要将其添加到您的项目中：

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

请记住，如果您的目标不是API级别25（顺便说一句，您应该这样做），那么您需要包含API级别的最新版本（例如，API级别24的compile 'com.android.support:design:24.2.0'）。
无论你使用什么样的可滚动容器，都需要在布局中 Package 成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，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的直接子对象中的所有scroll事件。在onStartNestedScroll()方法中，我们返回true，因为我们对任何scroll事件都感兴趣。在onNestedScroll()中，我们查看dyUnconsumed参数，该参数告诉我们滚动容器没有消耗多少垂直滚动（换句话说，overscroll），然后将滚动容器的子容器平移该量。由于我们只是获取delta值，因此需要在mOverscrollY变量中对所有delta值求和。onStopNestedScroll()在滚动事件停止时被调用，这是当我们将滚动容器的所有子容器动画化回到它们的原始位置时。
要将Behavior赋值给NestedScrollView，我们需要使用layout_behavior xml属性，并传入我们要使用的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上添加的名称空间和NestedScrollView上添加的app:layout_behavior属性。
这就是你所要做的！虽然这个答案比我预期的要长，但我跳过了一些关于CoordinatorLayout和Behaviors的基础知识。所以如果你不熟悉这些，或者有任何其他问题，请随时提问。

赞(0）分享  回复(0）举报  2023-01-28
kyxcudwk

kyxcudwk2#

多亏了Xaver Kapeller，我用Kotlin和androidx编写了我的解决方案，覆盖了fling并添加了一些内容

添加协调器依赖项

implementation "androidx.coordinatorlayout:coordinatorlayout:1.1.0"

创建扩展CoordinatorLayout的新类。

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

赞(0）分享  回复(0）举报  2023-01-28
zrfyljdw

zrfyljdw3#

如果要使用库，则此**Bouncy**是最符合您要求的最佳库。

赞(0）分享  回复(0）举报  2023-01-28
mctunoxg

mctunoxg4#

这对我来说再合适不过了

滚动装饰-安卓
将以下内容添加到模块的build.gradle文件：

dependencies {

  // ...

 compile 'me.everything:overscroll-decor-android:1.0.4' 
}

然后导入

import me.everything.android.ui.overscroll.OverScrollDecoratorHelper;

现在，您可以使用以下命令设置为任何视图

OverScrollDecoratorHelper.setUpStaticOverScroll(scrollView, OverScrollDecoratorHelper.ORIENTATION_VERTICAL);
赞(0）分享  回复(0）举报  2023-01-28
zlhcx6iw

zlhcx6iw5#

用这个

Private ScrollView scrMain;

scrMain = (ScrollView) v.findViewbyId(R.id.scrMain);

OverScrollDecorHandler.setScrollView(scrMain);
赞(0）分享  回复(0）举报  2023-01-28
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com