折叠工具栏展开与折叠时状态栏颜色切换实现方案咨询

1. 基础配置与布局设置 #

首先确保应用主题支持状态栏透明及内容延伸：

<!-- styles.xml 中定义主题 -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="colorPrimary">@color/your_theme_primary</item>
    <item name="colorPrimaryDark">@color/your_theme_primary_dark</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
</style>

然后搭建包含CollapsingToolbar的布局，核心是给AppBarLayout和CollapsingToolbarLayout设置fitsSystemWindows="true"：

<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"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

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

            <!-- 折叠头部的背景图 -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:src="@drawable/header_bg"/>

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

    <!-- 滚动内容区域 -->
    <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>

2. 监听折叠状态，动态切换状态栏颜色 #

在Activity中给AppBarLayout添加滚动偏移监听，根据折叠比例判断切换时机：

class MainActivity : AppCompatActivity() {
    private lateinit var appBarLayout: AppBarLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        appBarLayout = findViewById(R.id.app_bar)
        // 初始状态栏设为透明
        window.statusBarColor = Color.TRANSPARENT

        appBarLayout.addOnOffsetChangedListener { _, verticalOffset ->
            val scrollRange = appBarLayout.totalScrollRange
            // 计算折叠比例：绝对值越大，折叠程度越高
            val collapseRatio = Math.abs(verticalOffset).toFloat() / scrollRange.toFloat()

            // 自定义切换阈值，这里以0.5为例（折叠过半时切换）
            if (collapseRatio > 0.5) {
                // 折叠状态：状态栏设为主题深色
                window.statusBarColor = ContextCompat.getColor(this, R.color.your_theme_primary_dark)
                // 切换状态栏文字为浅色（适配深色背景）
                ViewCompat.getWindowInsetsController(window.decorView)?.isAppearanceLightStatusBars = false
            } else {
                // 展开状态：状态栏保持透明
                window.statusBarColor = Color.TRANSPARENT
                // 切换状态栏文字为深色（适配浅色头部背景）
                ViewCompat.getWindowInsetsController(window.decorView)?.isAppearanceLightStatusBars = true
            }
        }
    }
}

3. 关键注意事项 #

• 确保依赖Material Components库：

  implementation 'com.google.android.material:material:1.9.0' // 可使用最新稳定版
  

• 阈值0.5可根据视觉需求调整，比如改为0.3提前切换，0.7延迟切换；
• Android 10及以上用WindowInsetsController处理状态栏文字颜色，替代旧API保证兼容性；
• 若头部图片被状态栏遮挡，可给ImageView添加android:paddingTop="?attr/statusBarSize"调整显示区域。

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