Android中CollapsingToolbarLayout折叠后Toolbar自定义形状问题

我之前也踩过这个坑！普通Toolbar加自定义背景很容易，但放到CollapsingToolbarLayout里就会出现展开状态也显示背景的问题，核心原因是CollapsingToolbarLayout的折叠过程中，Toolbar的背景不会自动根据状态切换。下面给你两种靠谱的解决方案：

方法一：通过滚动监听动态切换Toolbar背景 #

利用AppBarLayout的偏移监听，根据折叠进度来控制Toolbar的背景显示：

1. 先在布局里给AppBarLayout和Toolbar设置id：

<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="wrap_content"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!-- 你的折叠内容，比如ImageView -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            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>

2. 在代码中添加偏移监听，计算折叠进度并切换背景：

val appBarLayout = findViewById<AppBarLayout>(R.id.app_bar)
val toolbar = findViewById<Toolbar>(R.id.toolbar)
val collapsingToolbar = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar)

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
    // 计算折叠进度：0=完全展开，1=完全折叠
    val scrollRange = appBarLayout.totalScrollRange
    val collapseProgress = Math.abs(verticalOffset).toFloat() / scrollRange.toFloat()

    // 当进度接近1（比如0.9）时，设置自定义背景；否则设为透明
    if (collapseProgress >= 0.9f) {
        toolbar.setBackgroundResource(R.drawable.your_custom_shape_background)
    } else {
        toolbar.setBackgroundColor(Color.TRANSPARENT)
    }
})

这种方法简单直接，适合大多数场景，你可以根据自己的需求调整阈值（比如0.8或0.9），让背景切换的时机更符合预期。

方法二：自定义Drawable实现平滑过渡 #

如果想要折叠过程中背景形状平滑变化（比如从透明渐变到自定义形状），可以自定义一个Drawable，根据折叠进度动态调整绘制：

1. 自定义Drawable类：

class CollapsibleToolbarBackground : Drawable() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var progress = 0f // 0=展开，1=折叠

    fun setProgress(progress: Float) {
        this.progress = progress
        invalidateSelf()
    }

    override fun draw(canvas: Canvas) {
        val bounds = bounds
        if (progress < 0.1f) {
            // 完全展开时不绘制
            return
        }

        // 根据进度调整背景的形状或透明度，这里示例是绘制圆角矩形
        val cornerRadius = 16f * progress // 折叠时圆角逐渐变大
        paint.color = ContextCompat.getColor(context, R.color.toolbar_background)
        canvas.drawRoundRect(
            bounds.left.toFloat(),
            bounds.top.toFloat(),
            bounds.right.toFloat(),
            bounds.bottom.toFloat(),
            cornerRadius,
            cornerRadius,
            paint
        )

        // 也可以添加透明度过渡
        paint.alpha = (255 * progress).toInt()
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        paint.colorFilter = colorFilter
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }
}

2. 在代码中关联这个Drawable并更新进度：

val customBackground = CollapsibleToolbarBackground()
toolbar.background = customBackground

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { _, verticalOffset ->
    val scrollRange = appBarLayout.totalScrollRange
    val collapseProgress = Math.abs(verticalOffset).toFloat() / scrollRange.toFloat()
    customBackground.setProgress(collapseProgress)
})

这种方法能实现更流畅的视觉过渡，适合对动画效果有要求的场景。

额外注意事项 #

• 确保CollapsingToolbarLayout的app:contentScrim属性不要和你的自定义背景冲突，必要时可以把它设为透明。
• 如果Toolbar有elevation，折叠时可以根据进度调整elevation，让样式更统一。

试试这两种方法，应该能完美实现你想要的折叠后特定样式效果！

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