【Android】可折疊式標題欄

在 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