Android Kotlin实现CollapsingToolbarLayout中图片随滚动缩放求助

Hey there! 我看你想实现AppBar滚动时动态调整CollapsingToolbarLayout里图片的尺寸，这个需求其实挺常见的，我来帮你搞定它～

首先，你已经设置了AppBarLayout的偏移监听，但可能没正确计算滚动比例或者对图片布局参数做正确修改。下面是完整的实现方案：

第一步：确保布局结构正确 #

首先要保证你的ImageView是直接放在CollapsingToolbarLayout下，并且设置合适的scaleType（推荐用matrix来手动控制缩放）：

<androidx.coordinatorlayout.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">

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="matrix" <!-- 关键：允许手动控制缩放 -->
                android:src="@drawable/your_header_image"
                app:layout_collapseMode="parallax"/> <!-- 可选：配合视差效果 -->

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 滚动内容，比如NestedScrollView -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 你的内容布局 -->
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

第二步：完善偏移监听的逻辑 #

接下来修改你的Kotlin代码，通过计算滚动比例来动态调整图片的尺寸和缩放：

val mAppBarLayout = findViewById<AppBarLayout>(R.id.app_bar)
val headerImage = findViewById<ImageView>(R.id.header_image)

mAppBarLayout.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener {
    private var scrollRange = -1
    private var initialImageHeight = 0

    override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) {
        // 第一次初始化滚动范围和图片初始高度
        if (scrollRange == -1) {
            scrollRange = appBarLayout.totalScrollRange
            initialImageHeight = headerImage.height
        }

        // 计算滚动比例：0=完全展开，1=完全折叠
        val scrollRatio = Math.abs(verticalOffset).toFloat() / scrollRange.toFloat()

        // 1. 动态调整图片高度：比如折叠时高度变为初始的60%，可自定义比例
        val targetHeight = (initialImageHeight * (1 - 0.4f * scrollRatio)).toInt()
        val layoutParams = headerImage.layoutParams as CollapsingToolbarLayout.LayoutParams
        layoutParams.height = targetHeight
        headerImage.layoutParams = layoutParams

        // 2. 同步调整图片缩放比例，避免拉伸变形（可选）
        val scaleFactor = 1 + 0.2f * scrollRatio // 折叠时稍微放大图片内容
        val matrix = Matrix()
        // 以图片中心为基准缩放
        matrix.postScale(scaleFactor, scaleFactor, 
                        headerImage.width / 2f, headerImage.height / 2f)
        headerImage.imageMatrix = matrix
    }
})

几个关键点要注意哦： #

• scaleType设置：必须把ImageView的scaleType设为matrix，这样才能通过imageMatrix手动控制缩放逻辑；如果只需要调整高度，用centerCrop也可以，但matrix灵活性更高。
• 滚动比例计算：verticalOffset是负数，所以要取绝对值，除以totalScrollRange得到0到1之间的比例，代表折叠的进度。
• LayoutParams类型：因为ImageView是CollapsingToolbarLayout的子View，所以布局参数必须强转为CollapsingToolbarLayout.LayoutParams，否则修改不会生效。
• CollapsingToolbarLayout的scrollFlags：要确保设置了scroll|exitUntilCollapsed这类滚动标记，这样AppBar才能正常产生偏移。

这样调整后，你就能在滚动AppBar时看到图片尺寸和缩放的动态变化啦～

内容的提问来源于stack exchange，提问作者JhonJTO