前言
在移动应用开发中，UI 设计是十分关键的一环。而 Material Design 是 Google 推出的一种视觉设计规范，它倡导简洁、轻盈、有深度和有层次的设计风格。其中 FloatingActionButton 是 Material Design 中必不可少的组件之一，而 CoordinatorLayout 则是用来实现可折叠 Toolbar 的关键。
在本文中，将会详细介绍如何使用 FloatingActionButton 和 CoordinatorLayout 实现可折叠 Toolbar。
实现步骤
1. 添加依赖
在项目的 build.gradle 文件中添加以下依赖：
implementation 'com.google.android.material:material:1.4.0'
2. 创建布局文件
在布局文件中，需要包含以下几个组件：
CoordinatorLayout：用来实现 Toolbar 的折叠效果；AppBarLayout：用来包含 Toolbar 和 CollapsingToolbarLayout；CollapsingToolbarLayout：用来实现 Toolbar 的折叠效果；Toolbar：用来显示标题和操作；NestedScrollView：用来显示内容；FloatingActionButton：悬浮按钮。
示例代码如下：
-- -------------------- ---- ------- ----- ------------- ------------------ ---------------------------------------------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------- ------------------------------------------------ -------------------------------- ----------------------------------- ------------------------------------ --------------------------------- ----------------------------------------------------------- ----------------------------------- ------------------------------------ --------------------------------- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- --------------------------------------- -------------------------- ---------- ------------------------------------------------------------- -------------------------------------------------- -------------------------------------- ----------------------------------- ------------------------------------ ---------------------------------------------- ----------------------------- --------------------------- ------------------------------------------------------------- --------- ----------------------------------- ------------------------------------ ------------------- ----- ----- --- ----- ----------- ---------- ----- -------- -------- ------ --- --- --------- ------ -------- ------- ----- -- -------- ------ ------- --------- -- ----- ---------- --- --------- --------- ---- -- -------- -- ---------- --- ---------- -------- ----------- -------- -- --------- --------- --------- ------------------------- ---------------------------------------- ---------------------------------------------------------------------- ----------------------------------- ------------------------------------ ------------------------------ ---------------------------- -------------------------------------- --------------------------------------- ------------------------------------------------------展开代码
3. 实现折叠效果
在 Toolbar 的布局文件中，将 CollapsingToolbarLayout 的 app:layout_scrollFlags 属性设置为 scroll|exitUntilCollapsed。这样，当用户向上滚动内容时，Toolbar 会向上折叠，并且在完全折叠之前不会消失。
<com.google.android.material.appbar.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:layout_scrollFlags="scroll|exitUntilCollapsed">
在 AppBarLayout 的布局文件中，将 NestedScrollView 的 app:layout_behavior 属性设置为 @string/appbar_scrolling_view_behavior，这样，当用户向上滚动内容时，Toolbar 会折叠并滑出视图。
<androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize" android:clipToPadding="false" android:fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior">
4. 实现悬浮按钮
在 FloatingActionButton 的布局文件中，将 app:layout_anchor 属性设置为 @id/app_bar_layout，将 app:layout_anchorGravity 属性设置为 bottom|end。这样，悬浮按钮会出现在可折叠 Toolbar 的底部。
<com.google.android.material.floatingactionbutton.FloatingActionButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_add" android:layout_margin="16dp" app:layout_anchor="@id/app_bar_layout" app:layout_anchorGravity="bottom|end"/>
总结
通过本文的介绍，相信大家已经了解了如何使用 FloatingActionButton 和 CoordinatorLayout 实现可折叠 Toolbar。这种布局方式可以让应用更加美观、更有层次感。如果你有其他关于前端开发的问题，欢迎在下方留言，我会尽快回复。
参考代码：https://github.com/catchonme/CoordinatorLayoutDemo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65422d667d4982a6ebbd5764
