Android CollapsingToolbarLayout 标题背景

Android

Android CollapsingToolbarLayout 标题背景是一个常用的设计元素，可以帮助我们实现具有动态效果的标题栏。当用户向下滚动时，标题栏可以逐渐收缩，并且可以在折叠状态下显示背景图片或颜色。这种设计风格可以为应用程序增添一些新颖的视觉效果，提升用户体验。

在使用 CollapsingToolbarLayout 之前，我们需要先在项目的 build.gradle 文件中添加以下依赖：

groovy
implementation 'com.Google.Android.material:material:1.4.0'

接下来，我们需要在布局文件中定义 CollapsingToolbarLayout，例如在 CoordinatorLayout 中添加一个 AppBarLayout，并在其中放置一个 Toolbar 和一个 CollapsingToolbarLayout：

XML
<Androidx.coordinatorlayout.widget.CoordinatorLayout</p>    ...
    >
    <com.Google.Android.material.appbar.AppBarLayout</p>        ...
        >
        <com.Google.Android.material.appbar.CollapsingToolbarLayout</p>            ...
            >
            <Androidx.appcompat.widget.Toolbar</p>                ...
                />
            <!-- 内容布局 -->
        </com.Google.Android.material.appbar.CollapsingToolbarLayout>
    </com.Google.Android.material.appbar.AppBarLayout>
    <!-- 其他布局 -->
</Androidx.coordinatorlayout.widget.CoordinatorLayout>

在 Toolbar 中设置标题和菜单项，可以使用 setSupportActioNBAr 方法将 Toolbar 设置为 ActioNBAr，并在 onCreateOptionsMenu 方法中添加菜单项。在 CollapsingToolbarLayout 中，可以通过 app:title 属性设置标题，app:contentScrim 属性设置折叠状态下的背景颜色或图片。

CollapsingToolbarLayout 还提供了一些其他属性，可以用于自定义标题栏的行为和样式。例如，通过 app:collapsedTitleTextAppearance 和 app:expandedTitleTextAppearance 属性可以设置标题在折叠和展开状态下的样式。

案例代码：

下面是一个简单的示例代码，演示了如何使用 CollapsingToolbarLayout 实现标题背景效果。

XML
<Androidx.coordinatorlayout.widget.CoordinatorLayout</p>    ...
    >
    <com.Google.Android.material.appbar.AppBarLayout</p>        ...
        >
        <com.Google.Android.material.appbar.CollapsingToolbarLayout</p>            ...
            app:contentScrim="@color/primary"
            app:title="My Collapsing Toolbar"
            app:collapsedTitleTextAppearance="@style/CollapsedTitleStyle"
            app:expandedTitleTextAppearance="@style/ExpandedTitleStyle"
            >
            <Androidx.appcompat.widget.Toolbar</p>                ...
                />
            <!-- 内容布局 -->
        </com.Google.Android.material.appbar.CollapsingToolbarLayout>
    </com.Google.Android.material.appbar.AppBarLayout>
    <!-- 其他布局 -->
</Androidx.coordinatorlayout.widget.CoordinatorLayout>

在 styles.XML 文件中定义标题样式：

XML
<style name="CollapsedTitleStyle" parent="TextAppearance.AppCompat.Widget.ActioNBAr.Title">
    <item name="Android:textSize">20sp</item>
    <item name="Android:textColor">@Android:color/white</item>
</style>
<style name="ExpandedTitleStyle" parent="TextAppearance.AppCompat.Widget.ActioNBAr.Title">
    <item name="Android:textSize">28sp</item>
    <item name="Android:textColor">@Android:color/black</item>
</style>

在这个示例中，我们使用了一个叫做 "My Collapsing Toolbar" 的标题，并在折叠状态下将背景颜色设置为 primary 颜色。同时，我们还定义了两种不同状态下的标题样式，分别是 CollapsedTitleStyle 和 ExpandedTitleStyle。

通过以上代码，我们可以实现一个具有动态标题背景效果的 CollapsingToolbarLayout。用户在向下滚动时，标题栏会逐渐收缩，并在折叠状态下显示设定的背景颜色或图片。这种交互式设计可以为应用程序增添一些动感和吸引力，提升用户的体验感。