如何在颤动中更改应用栏颜色

在 Android 应用程序中，我们经常需要自定义应用栏的颜色，以及在不同状态下的颜色变化，来提高用户体验。本文将介绍如何在颤动（CoordinatorLayout）中更改应用栏颜色。

步骤一：添加依赖

在您的 build.gradle 文件中添加依赖项：

implementation 'com.google.android.material:material:1.3.0'

步骤二：使用 CoordinatorLayout 布局

使用 CoordinatorLayout 布局作为根布局，并将 AppBarLayout 和 NestedScrollView 嵌套在其中。如下所示：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/primary_color"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="Demo App"
            app:titleEnabled="true"
            app:titleTextColor="@android:color/white">

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

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

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

    <androidx.core.widget.NestedScrollView
        android:id="@+id/nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Your content here -->

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

步骤三：更新应用栏颜色

在您的 Activity 或 Fragment 中，使用如下代码更新应用栏颜色：

AppBarLayout appBarLayout = findViewById(R.id.app_bar_layout);
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar_layout);
Toolbar toolbar = findViewById(R.id.toolbar);

// Set the color of the expanded toolbar
collapsingToolbarLayout.setContentScrimColor(getResources().getColor(R.color.primary_color));

// Change the color of the status bar
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    getWindow().setStatusBarColor(getResources().getColor(R.color.primary_color_dark));
}

// Listen to the scroll state of the NestedScrollView
NestedScrollView nestedScrollView = findViewById(R.id.nested_scroll_view);
nestedScrollView.setOnScrollChangeListener(
    new NestedScrollView.OnScrollChangeListener() {
        @Override
        public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            // Get the total scroll range
            int totalRange = v.getChildAt(0).getHeight() - v.getHeight();
            // Get the percentage of the scroll offset
            float percent = scrollY / (float) totalRange;

            // Update the color of the collapsed toolbar
            collapsingToolbarLayout.setCollapsedTitleTextColor(
                    blendColors(getResources().getColor(R.color.primary_color_dark),
                            getResources().getColor(R.color.secondary_color), percent)
            );

            // Set the color of the toolbar navigation icon
            Drawable navIcon = toolbar.getNavigationIcon();
            if (navIcon != null) {
                navIcon.setColorFilter(
                        blendColors(getResources().getColor(R.color.primary_color_dark),
                                getResources().getColor(R.color.secondary_color), percent),
                        PorterDuff.Mode.SRC_IN
                );
            }
        }
    }
);

// Blend two colors based on a percentage
public int blendColors(int color1, int color2, float percent) {
    int r = (int) ((Color.red(color1) * (1 - percent)) + (Color.red(color2) * percent));
    int g = (int) ((Color.green(color1) * (1 - percent)) + (Color.green(color2) * percent));
    int b = (int) ((Color.blue(color1) * (1 - percent)) + (Color.blue(color2) * percent));
    return Color.rgb(r, g, b);
}

上述代码中，您可以更改 primary_color 和 secondary_color 的值以适应您的应用程序。

至此，您已经学会了如何在颤动中更改应用栏颜色！