Android-如何根据NestedScrollView的滚动方向进行图像缩放？

Question

我是 Android 应用程序开发新手，正在尝试根据滚动方向获取图像缩放动画/效果，如本视频所示。如果需要，请提供 kotlin 代码。提前致谢🙂[这是我想要的效果： ]()

这是我的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"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@color/transparent"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/scrollingImageView"
                android:layout_width="match_parent"
                android:layout_height="360dp"
                android:alpha="0.7"
                android:src="@drawable/live_events_category_img"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:background="@color/transparent"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="1"
                app:layout_scrollFlags="exitUntilCollapsed">

            </androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:background="@color/black"
        android:isScrollContainer="true"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Answer 1

经过长时间的研究，我发现我们可以通过在 appBarLayout 上调用 addOnOffsetChangedListener 来实现这种效果，它将为我们提供每个滚动位置的偏移值，基于此我们可以根据需要对 imageview 的缩放参数进行计算。这是我在 kotlin 文件中添加的内容，而 xml 保持不变：

var isCollapsed = false
var scaleFactor = 1.0f // Initialize the scale factor
var lastVerticalOffset = 0
binding.appBarLayout.addOnOffsetChangedListener { appBarLayout, verticalOffset ->
// Calculate the total scroll range of the CollapsingToolbarLayout
val totalScrollRange = appBarLayout.totalScrollRange

// Calculate the percentage of collapse (0 to 1)
val collapseRatio = -verticalOffset.toFloat() / totalScrollRange.toFloat()

// Calculate the target scale factor based on the collapse ratio
// Adjust the scaleFactor range as needed
val targetScaleFactor = 1.0f - collapseRatio * 0.5f

// Use ValueAnimator to smoothly interpolate the scale factor
val animator = ValueAnimator.ofFloat(scaleFactor, targetScaleFactor)
animator.duration = 100 // Adjust the duration as needed
animator.addUpdateListener { animation ->
    val animatedValue = animation.animatedValue as Float

    // Apply the interpolated scale factor to the ImageView
    binding.scrollingImageView.scaleX = animatedValue
    binding.scrollingImageView.scaleY = animatedValue
}
animator.start()

// Update the scale factor
scaleFactor = targetScaleFactor

// Check if the CollapsingToolbarLayout is fully collapsed
if (verticalOffset == -totalScrollRange) {
    if (!isCollapsed) {
        // The CollapsingToolbarLayout is now fully collapsed
        // Perform actions or call methods here
        isCollapsed = true
    }
} else {
    // The CollapsingToolbarLayout is not fully collapsed
    isCollapsed = false
}

// Update the last vertical offset
lastVerticalOffset = verticalOffset
}