在 Android 应用开发中，精美的用户界面可以显著提升应用品质和用户体验。Material Design 组件中的 CollapsingToolbarLayout 能够为应用添加动态、流畅的折叠效果，让标题栏不再是静态的元素。本文将深入探讨如何使用 CollapsingToolbarLayout 创建令人惊艳的可折叠标题栏效果。

 一、什么是 CollapsingToolbarLayout？

CollapsingToolbarLayout 是 Android Material Design 库中的一个专用布局容器，它扩展了普通 Toolbar 的功能，允许标题栏在用户滚动内容时产生丰富的折叠动画效果。这种效果常见于许多现代 Android 应用，如新闻详情页、商品展示页等场景，能够提供更加沉浸式的用户体验。

二、使用步骤

环境配置

在开始之前，请确保你的项目中已添加 Material Design 依赖：

dependencies {implementation 'com.google.android.material:material:1.8.0'// 其他依赖...
}

基础布局结构

要正确使用 CollapsingToolbarLayout，必须遵循特定的布局层级结构：

<androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/appBar"android:layout_width="match_parent"android:layout_height="250dp"android:fitsSystemWindows="true"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginStart="64dp"app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"><!-- 这里放置标题栏内容 --></com.google.android.material.appbar.CollapsingToolbarLayout></com.google.android.material.appbar.AppBarLayout><!-- 可滚动内容区域 --><androidx.core.widget.NestedScrollViewandroid: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>

层级关系说明：

  • CoordinatorLayout 是根容器，负责协调子视图的交互行为
  • AppBarLayout 必须是 CoordinatorLayout 的直接子布局
  • CollapsingToolbarLayout 必须作为 AppBarLayout 的直接子布局
  • 可滚动内容（如 NestedScrollView、RecyclerView）需要设置 app:layout_behavior="@string/appbar_scrolling_view_behavior"

关键属性详解

layout_scrollFlags
控制 CollapsingToolbarLayout 的滚动行为，常用值组合：

  • scroll：允许布局随滚动事件滚动（必须包含）
  • exitUntilCollapsed：布局折叠完成后保留在界面上，不再移出屏幕
  • enterAlways：任何向下滚动操作都会使布局展开
  • enterAlwaysCollapsed：类似 enterAlways，但布局以折叠状态开始展开
  • snap：滚动结束时，布局会自动折叠或展开到最接近的状态

示例：app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"

contentScrim
指定 CollapsingToolbarLayout 在折叠状态及折叠后的背景色，通常设置为应用的主题色：

app:contentScrim="?attr/colorPrimary"

标题相关属性

  • app:title：设置标题文本
  • app:expandedTitleTextAppearance：展开状态下的标题文字样式
  • app:collapsedTitleTextAppearance：折叠状态下的标题文字样式
  • app:expandedTitleMargin：展开状态下标题的边距

定义标题栏内容

在 CollapsingToolbarLayout 中，我们可以添加多种视图组件来创建丰富的视觉效果：

<com.google.android.material.appbar.CollapsingToolbarLayout...><!-- 背景图片 --><ImageViewandroid:id="@+id/backdrop"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@drawable/header_image"android:contentDescription="@string/header_image_desc"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7"/><!-- 工具栏 --><androidx.appcompat.widget.Toolbarandroid: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.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="@dimen/fab_margin"android:src="@drawable/ic_favorite"app:layout_anchor="@id/appBar"app:layout_anchorGravity="bottom|end"app:backgroundTint="?attr/colorPrimary"app:layout_collapseMode="pin"/></com.google.android.material.appbar.CollapsingToolbarLayout>

layout_collapseMode 属性详解

  • pin：在折叠过程中元素位置始终保持不变，适合用于工具栏和重要操作按钮
  • parallax：元素在折叠过程中会产生视觉差偏移效果，增强视觉层次感
  • 对于 parallax 模式，可以使用 layout_collapseParallaxMultiplier 属性控制视差效果的程度（0.0-1.0）

沉浸式状态栏实现

为了实现背景图片延伸到状态栏的沉浸式效果，需要完成以下步骤：

步骤一：设置 fitsSystemWindows
将需要延伸到状态栏的控件及其所有父布局的 android:fitsSystemWindows 属性设为 true

步骤二：设置透明状态栏主题
在 values/styles.xml 和 values-v21/styles.xml 中定义透明状态栏主题：

values/styles.xml

<resources><style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar"><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="colorAccent">@color/colorAccent</item></style>
</resources>

values-v21/styles.xml

<resources><style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar"><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@android:color/transparent</item><item name="colorAccent">@color/colorAccent</item><item name="android:statusBarColor">@android:color/transparent</item><item name="android:windowLightStatusBar">true</item></style>
</resources>

三、完整示例代码

以下是一个完整的可折叠标题栏实现示例：

<androidx.coordinatorlayout.widget.CoordinatorLayoutxmlns: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"android:fitsSystemWindows="true"><com.google.android.material.appbar.AppBarLayoutandroid:id="@+id/app_bar"android:layout_width="match_parent"android:layout_height="@dimen/appbar_height"android:fitsSystemWindows="true"><com.google.android.material.appbar.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginEnd="64dp"app:expandedTitleMarginStart="48dp"app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"app:statusBarScrim="@android:color/transparent"><ImageViewandroid:id="@+id/backdrop"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"app:layout_collapseMode="parallax"app:layout_collapseParallaxMultiplier="0.7" /><androidx.appcompat.widget.Toolbarandroid: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.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:padding="16dp"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="@string/lorem_ipsum"android:textSize="16sp" /></LinearLayout></androidx.core.widget.NestedScrollView><com.google.android.material.floatingactionbutton.FloatingActionButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="16dp"android:src="@drawable/ic_share"app:layout_anchor="@id/app_bar"app:layout_anchorGravity="bottom|end" /></androidx.coordinatorlayout.widget.CoordinatorLayout>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/96563.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/96563.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/96563.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Debian13下使用 Vim + Vimspector + ST-LINK v2.1 调试 STM32F103 指南

Debian13下使用 Vim + Vimspector + ST-LINK v2.1 调试 STM32F103 指南

1. 硬件准备与连接 1.1 所需硬件 STM32F103C8T6 最小系统板ST-LINK v2.1 调试器连接线&#xff08;杜邦线&#xff09; 1.2 硬件连接 ST-LINK v2.1 ↔ STM32F103C8T6 连接方式&#xff1a;ST-LINK v2.1 引脚STM32F103C8T6 引脚功能说明SWDIOPA13数据线SWCLKPA14时钟线GNDGND共地…
阅读更多...
第21课：成本优化与资源管理

第21课：成本优化与资源管理

第21课：成本优化与资源管理 课程目标 掌握计算资源优化 学习成本控制策略 了解资源调度算法 实践实现成本优化系统 课程内容 21.1 成本分析框架 成本分析系统 class CostAnalysisFramework {constructor(config) {this.config
阅读更多...
SAP HANA Scale-out 04：CalculationView优化

SAP HANA Scale-out 04：CalculationView优化

CV执行过程计算视图激活时&#xff0c;生成Stored ModelSELECT查询时&#xff1a;首先将Stored Model实例化为runtime Model 计算引擎执行优化&#xff0c;将runtime Model转换为Optimized Runtime ModelOptimized Runtime Model通过SQL Optimizer进行优化计算引擎优化特性说明…
阅读更多...
鸿蒙审核问题——Scroll中嵌套了List/Grid时滑动问题

鸿蒙审核问题——Scroll中嵌套了List/Grid时滑动问题

文章目录背景原因解决办法1、借鉴Flutter中的解决方式&#xff0c;如下图2、鸿蒙Next中对应的解决方式&#xff0c;如下图3、官方文档回访背景 来源一次审核被拒的情况。也是出于粗心导致的。之前在flutter项目中也是遇到过这种问题的。其实就是滚动视图内嵌滚动视图造成的&am…
阅读更多...
测试电商购物车功能，设计测试case

测试电商购物车功能，设计测试case

在电商场景中&#xff0c;购物车是连接商品浏览与下单支付的关键环节&#xff0c;需要从功能、性能、兼容性、安全性等多维度进行测试。以下是购物车功能的测试用例设计&#xff1a; 一、功能测试 1. 商品添加到购物车 - 未登录状态下&#xff0c;添加商品到购物车&#xff08;…
阅读更多...
Linux --- 常见的基本指令

Linux --- 常见的基本指令

一. 前言本篇博客使用的 Linux 操作系统是 centos &#xff0c;用来学习Linux 的 Linux 系统的内核版本和系统架构信息版本如下所示&#xff1a;上图的主要结构为&#xff1a;主版本号-次版本号 修正次数&#xff0c;3.10.0 是操作系统的主版本号&#xff1b;当我们在维护一段L…
阅读更多...
微信小程序 -开发邮箱注册验证功能

微信小程序 -开发邮箱注册验证功能

一、前端验证&#xff1a;正则表达式与插件结合正则表达式设计 使用通用邮箱格式校验正则&#xff0c;并允许中文域名&#xff08;如.中国&#xff09;&#xff1a; const emailReg /^[a-zA-Z0-9._%-][a-zA-Z0-9-](?:\.[a-zA-Z0-9-])*\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2})?$/i;…
阅读更多...
docker 部署 code-server

docker 部署 code-server

docker 部署 code-servercode-serverError response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headersdocker 配置正确步骤 阿里云源permission de…
阅读更多...
网络编程专题：从源码解析网络编程常用方法（基于6.16.3内核）

网络编程专题：从源码解析网络编程常用方法（基于6.16.3内核）

前言 本文是因为作者在研究下面这个代码时发现的问题&#xff1a; int main() {// 1. 创建 IPv4 专用地址结构体 sockaddr_instruct sockaddr_in ipv4_addr;memset(&ipv4_addr, 0, sizeof(ipv4_addr)); // 初始化清零// 2. 填充 IPv4 专属信息ipv4_addr.sin_family AF_IN…
阅读更多...
2025年数字公共治理专业重点学什么内容？（详细指南）

2025年数字公共治理专业重点学什么内容？（详细指南）

数字公共治理作为一个新兴的跨学科领域&#xff0c;近年来受到越来越多高校和学生的关注。这个专业融合了多个学科的知识体系&#xff0c;旨在培养掌握现代治理理念和技术应用能力的复合型人才。对于在校大学生而言&#xff0c;了解这一专业的学习内容和发展方向&#xff0c;有…
阅读更多...
一招解决 win 下 终端打印中文乱码问题

一招解决 win 下 终端打印中文乱码问题

适合所有终端 cmd powershell git bash&#xff0c; 原理&#xff1a;修改电脑的区域设置&#xff0c;勾选使用 UTF-8 1.电脑搜索 区域&#xff0c; 打开区域设置2. 打开相关设置3. 点击更改 日期、时间或数字格式4. 选则管理-点击更改系统区域设置&#xff0c;在弹出框中勾选 …
阅读更多...
Elasticsearch面试精讲 Day 13：索引生命周期管理ILM

Elasticsearch面试精讲 Day 13：索引生命周期管理ILM

【Elasticsearch面试精讲 Day 13】索引生命周期管理ILM 在“Elasticsearch面试精讲”系列的第13天&#xff0c;我们将深入探讨 索引生命周期管理&#xff08;Index Lifecycle Management, ILM&#xff09; 这一核心运维机制。作为大规模日志、监控和时序数据场景下的必备功能&…
阅读更多...
Python快速入门专业版（二十八）：函数参数进阶：默认参数与可变参数（*args/**kwargs）

Python快速入门专业版（二十八）：函数参数进阶：默认参数与可变参数（*args/**kwargs）

目录引一、默认参数&#xff1a;给函数参数设置“默认值”1. 基本语法与使用示例示例1&#xff1a;带默认参数的乘法函数2. 默认参数的核心规则&#xff1a;必须放在非默认参数之后示例2&#xff1a;默认参数位置错误&#xff08;报错&#xff09;3. 默认参数的“可变对象陷阱”…
阅读更多...
FreeRTOS 知识点

FreeRTOS 知识点

一、配置过程二、基本知识点2.1 抢占优先级和响应优先级在 FreeRTOS 中&#xff0c;任务的调度方式主要有 ​​抢占式&#xff08;Preemptive&#xff09;​​ 和 ​​协作式&#xff08;Cooperative&#xff09;​​ 两种模式&#xff0c;它们的核心区别在于 ​​任务如何释放…
阅读更多...
SQL注入漏洞手动测试详细过程

SQL注入漏洞手动测试详细过程

这是一次详细的、基于真实手动测试思维的SQL注入漏洞测试过程记录。我们将以一个假设的Web应用程序为例&#xff0c;进行逐步探测和利用。测试目标假设我们正在测试一个名为 example.com 的电商网站&#xff0c;其有一个查看商品详情的页面&#xff0c;URL 为&#xff1a; http…
阅读更多...
机器人控制器开发(通讯——ros话题转为websocket)

机器人控制器开发(通讯——ros话题转为websocket)

1 为什么要实现ROS话题转WebSocket 主要有如下5个优点&#xff1a;跨平台通信需求 WebSocket作为一种标准的Web通信协议&#xff0c;允许任何支持WebSocket的客户端&#xff08;网页、移动应用、其他系统&#xff09;与ROS机器人进行实时通信&#xff0c;打破了ROS传统通信方式…
阅读更多...
SQL-字符串函数、数值函数、日期函数

SQL-字符串函数、数值函数、日期函数

字符串函数1. 字符串拼接concat-- 拼接字符串hello和mysql&#xff0c;结果为hellomysql -- 格式&#xff1a;concat(str1, str2, ...)&#xff1a;拼接多个字符串 select concat(hello, mysql);注意事项&#xff1a;若任一参数为null&#xff0c;结果为null&#xff08;如conc…
阅读更多...
JAVA高级工程师--Redis持久化详细版

JAVA高级工程师--Redis持久化详细版

一、Redis DBRedis 数据库的数量在单机和集群模式下有根本性的区别。1. 单机模式 (Standalone)在单机模式下&#xff0c;Redis 默认提供 16 个逻辑数据库&#xff0c;索引编号为 0 到 15。选择数据库&#xff1a; 使用 SELECT <index> 命令进行切换。例如&#xff0c;SE…
阅读更多...
hexo文章

hexo文章

文章目录Tag的使用勾选框图片的组合站内文章引用注意&#xff1a;1、关于中括号的问题目录总结 Tag的使用 在 markdown 中加入如下的代码来使用便签&#xff1a; {% note success %} 文字 或者 markdown 均可 {% endnote %}或者使用 HTML 形式&#xff1a; <p class&quo…
阅读更多...
技术面：Spring (bean的生命周期、创建方式、注入方式、作用域)

技术面：Spring (bean的生命周期、创建方式、注入方式、作用域)

Spring Bean的生命周期是什么样的&#xff1f; 在Spring容器里一个Bean的从创建到销毁一般都是经历了以下几个阶段&#xff1a; 定义阶段&#xff08;Bean元信息配置&#xff09;>实例化阶段&#xff08;创建Bean对象&#xff09;>初始化阶段&#xff08;执行初始化逻辑&…
阅读更多...
最新文章

Copyright @ 2022~2023