如何动态调整CollapsingToolbarLayout的内容

当然有办法解决这个问题！我之前也踩过类似的折叠工具栏内容遮挡的坑，通过监听折叠状态动态调整视图边距就能完美解决，给你分享几个实用的方案：

这是最灵活的方案，能让边距随着工具栏的折叠过程平滑变化，不会有突兀的跳转：

• 第一步：先获取目标视图和AppBarLayout实例

// Kotlin示例
val logoView = findViewById<ImageView>(R.id.your_logo_id)
val appBarLayout = findViewById<AppBarLayout>(R.id.app_bar_layout)

如果用Java的话：

// Java示例
ImageView logoView = findViewById(R.id.your_logo_id);
AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);

• 第二步：添加滚动监听，根据折叠百分比计算边距

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
    // 获取工具栏的总滚动范围
    val totalScrollRange = appBarLayout.totalScrollRange
    // 计算折叠进度（0=完全展开，1=完全折叠）
    val collapsePercent = Math.abs(verticalOffset).toFloat() / totalScrollRange.toFloat()

    // 定义展开/折叠状态下的目标边距（单位：dp）
    val expandedMarginDp = 20
    val collapsedMarginDp = 8 // 可根据实际UI调整
    // 转成像素值
    val expandedMarginPx = dpToPx(expandedMarginDp)
    val collapsedMarginPx = dpToPx(collapsedMarginDp)

    // 计算当前应该设置的边距
    val currentMargin = expandedMarginPx - ((expandedMarginPx - collapsedMarginPx) * collapsePercent).toInt()

    // 给Logo视图更新边距
    val layoutParams = logoView.layoutParams as CollapsingToolbarLayout.LayoutParams
    layoutParams.bottomMargin = currentMargin
    logoView.layoutParams = layoutParams
})

// 工具方法：dp转像素
private fun dpToPx(dp: Int): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        dp.toFloat(),
        resources.displayMetrics
    ).toInt()
}

如果不需要平滑过渡，只需要在两种极端状态下切换边距，这个方法更简单：

appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
    val isFullyExpanded = verticalOffset == 0
    val isFullyCollapsed = Math.abs(verticalOffset) >= appBarLayout.totalScrollRange

    val layoutParams = logoView.layoutParams as CollapsingToolbarLayout.LayoutParams
    layoutParams.bottomMargin = if (isFullyCollapsed) {
        dpToPx(8)
    } else {
        dpToPx(20)
    }
    logoView.layoutParams = layoutParams
})

// 同样需要dp转像素的工具方法
private fun dpToPx(dp: Int): Int {
    return TypedValue.applyDimension(
        TypedValue.COMPLEX_UNIT_DIP,
        dp.toFloat(),
        resources.displayMetrics
    ).toInt()
}

如果你的Logo直接放在CollapsingToolbarLayout内，也可以尝试调整它的折叠模式属性，配合视差系数控制滚动偏移：

<ImageView
    android:id="@+id/your_logo_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/reader_logo"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.5" />

layout_collapseParallaxMultiplier的取值范围是0-1，0表示完全不跟随滚动，1表示完全跟随滚动，你可以微调这个值让Logo在折叠时的位置更合理。

记得把代码里的your_logo_id、app_bar_layout换成你布局中对应的ID，边距数值也可以根据实际UI效果随时调整~

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