Material Design 是 Google 推出的一种设计语言，在移动应用和 web 应用开发中都被广泛应用。其中最为常见的两个元素就是 Toolbar 和 App Bar，它们被广泛应用于 Android 系统和 web 应用中的顶部导航栏。本文将介绍如何利用 Material Design 实现 Toolbar 和 App Bar 动画效果，包括滚动时隐藏和显示、扩展和收缩等。
1. Toolbar 和 App Bar
Toolbar 是 Google 在 Material Design 中引入的一个控件，用于在应用中显示一个固定的标题和一些操作按钮。Toolbar 的设计旨在取代旧版本 Android 系统中的 ActionBar，同时提供更大的自定义化能力和更简单的使用方式。
App Bar 跟 Toolbar 类似，也是显示在应用顶部、包含标题和操作按钮的一个控件。但是，App Bar 的高度可以根据应用需要自由调整，可以包含更多的内容，例如滑动菜单。
2. Material Design 中的动画效果
Material Design 中的动画效果是其设计语言的一部分，它们被用来增强用户体验，提高应用的易用性和可读性。动画效果要求简单明了，具有自然和流畅的感觉，并且遵循一定的规律和设计原则。
在 Material Design 中，Toolbar 和 App Bar 的动画效果有以下几种：
2.1 滚动时隐藏和显示
当用户向下滚动页面时，Toolbar 和 App Bar 可以在一定的滚动距离后自动隐藏，以增加屏幕可用空间。当用户向上滚动页面时，Toolbar 和 App Bar 可以重新显示。
2.2 扩展和收缩
App Bar 可以在进行某些操作时扩展开来，例如弹出一个滑动菜单。在操作完成后，App Bar 可以收缩回来，以增加屏幕空间和减少干扰。
3. 实现滚动时隐藏和显示
在 Material Design 中，Toolbar 和 App Bar 的滚动效果可以通过使用 CoordinatorLayout、AppBarLayout 和 CollapsingToolbarLayout 来实现。具体步骤如下：
3.1 在 build.gradle 文件中添加依赖
dependencies {
implementation 'com.google.android.material:material:1.0.0'
}3.2 在布局中添加控件
在布局文件中，添加一个 CoordinatorLayout，其中包含一个 AppBarLayout 和一个 CollapsingToolbarLayout，例如：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
-----------------------------------
------------------------------------
--------------------------------------------
---- ----- ------- ----- ---
-------------------------------------------------------------
--------------------------------------------------
---- --------- ---
------------------------------------------------------其中，CollapsingToolbarLayout 的 layout_scrollFlags 属性用于指定在滚动时应该隐藏和显示 Toolbar。
3.3 在代码中处理滚动事件
为了实现滚动时隐藏和显示 Toolbar 和 App Bar，我们需要在代码中监听滚动事件，并通过代码来控制 Toolbar 和 App Bar 的隐藏和显示。具体步骤如下：
（1）实现 AppBarLayout.OnOffsetChangedListener 接口：
public class MainActivity extends AppCompatActivity implements AppBarLayout.OnOffsetChangedListener {
// ...
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
// 在这里处理滚动事件
}
}（2）在 onCreate() 方法中添加监听器：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
------------ ------------ - ----------------------------------
----------------------------------------------
-
-（3）在 onOffsetChanged() 方法中实现滚动逻辑：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- ---------- ------------------------------------ -
------- ------- ---------- - -----
-- ---
---------
------ ---- ---------------------------- ------------- --- --------------- -
--- ---------------- - -----------------------------------
--- ------ - -------------------------
-- ------- -- - -- ------------ -
-- --- --- ------- ------- ----
---------- - -----
--------------
- ---- -- ------- -- ---------------- -- ----------- -
-- --- --- ------- ------- ---
---------- - ------
--------------
-
-
------- ---- ------------- -
-- -- ------- ------------- ---------
----------------------------------------------------
-------------------------------------------------------
-
------- ---- ------------- -
-- -- ------- ------------- ---------
-------------------------------------------------------
----------------------------------------------------------
-
-3.4 在 styles.xml 中添加样式
为了显示和隐藏 Toolbar 和 App Bar 时动画更加自然和流畅，我们需要在 styles.xml 文件中添加以下样式：
-- -------------------- ---- -------
-----------
------ -------------- -------------------------------------------------------
----- ------------------------------------------------
----- -------------------------------------------------------
----- ---------------------------------------------------------------
----- -----------------------------------------------------------------
----- -----------------------------------------------------------------------------------------------------------
----- -------------------------------------------------------------------------------------------------------------
----- ---------------------------------------------------------------------------------------------
--------
------ ------------------------------ ---------------------------------------------
----- ----------------------------------------------------
--------
------ ------------------------------- ----------------------------------------------
----- ----------------------------------------------------
--------
------------4. 实现扩展和收缩
在 Material Design 中，App Bar 扩展和收缩的实现依赖于一些组合控件，例如 Toolbar、TabLayout、ViewPager 和 CollapsingToolbarLayout。具体步骤如下：
4.1 在布局中添加控件
在布局文件中，添加一个 CoordinatorLayout，其中包含一个 AppBarLayout 和一个 CollapsingToolbarLayout。在 AppBarLayout 中添加一个 Toolbar，并将 TabLayout 和 ViewPager 放在一个竖直方向上的 LinearLayout 中，例如：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
--------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-----------------
-----------------------------
--------------------------------------------- --
-------------
-----------------------------------
------------------------------------
------------------------------
------------------------------
-------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-----------------------------------------
------------------------
-----------------------------------------------------
--------------------------------------------------------
--------------------------------------- --
------------------------------------
----------------------------
-----------------------------------
------------------------------------ --
---------------
-------------------------------------------------------------
--------------------------------------------------
---- --------- ---
------------------------------------------------------其中，上述布局文件可以支持 App Bar 的扩展和收缩效果，并且具有一个 TabLayout 和 ViewPager，可以实现滑动菜单的效果。
4.2 在代码中处理扩展和收缩事件
为了实现 App Bar 的扩展和收缩效果，我们需要在代码中判断 App Bar 的状态，并在滑动菜单收缩后处理相关逻辑。具体步骤如下：
（1）实现 ViewPager.OnPageChangeListener 接口：
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
// ...
@Override
public void onPageSelected(int position) {
// 在这里处理滑动菜单选择事件
}
}（2）在 onCreate() 方法中添加监听器：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- -
---------
--------- ---- --------------- ------------------- -
-----------------------------------
---------------------------------------
--------- --------- - ------------------------------
----------------------------------------
-
-（3）在 onPageSelected() 方法中实现滑动菜单的扩展和收缩：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- ---------- ------------------------------ -
------- ------- ---------- - -----
------- ------- ---------------- - -----
------- ------------ -------------
-- ---
---------
------ ---- ------------------ --------- -
-- --------- -- - -- ------------------ -
-- ------- ------------
---------- - ------
--------------------------------
-
-
-因为在用户手动收缩滑动菜单时，onPageSelected() 方法也会被调用，所以我们需要一个变量 isExpandedByUser 来区分是用户手动操作还是代码控制。
（4）在 Toolbar 上添加一个菜单
为了实现滑动菜单的扩展和收缩，在 Toolbar 上我们需要添加一个菜单项，例如：
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_expand"
android:icon="@drawable/ic_arrow_downward"
android:title="Expand"
app:showAsAction="always" />
</menu>这个菜单项的作用是控制滑动菜单的扩展和收缩。
（5）在代码中对菜单项进行监听
在代码中对菜单项进行监听，并根据点击事件来扩展或收缩滑动菜单，例如：
-- -------------------- ---- -------
------ ----- ------------ ------- ----------------- ---------- ------------------------------- ------------------------------- -
-- ---
---------
------ ------- ------------------------ ----- -
------------------------------------------- ------
------ -----
-
---------
------ ------- ------------------------ ----- -
--- -- - -----------------
-- --- -- ------------------- -
-- ------------ -
-- ------
----------------------------
- ---- -
-- ------
----------------------------
-
---------- - ------------
---------------- - -----
------ -----
-
------ ------
-
-其中，我们在代码中设置了一个变量 isExpanded，来记录当前滑动菜单的状态，点击菜单项时根据不同状态来扩展或收缩滑动菜单。
5. 总结
本文介绍了如何利用 Material Design 实现 Toolbar 和 App Bar 的动画效果，包括滚动时隐藏和显示、扩展和收缩等。在具体实现中，我们使用了 CoordinatorLayout、AppBarLayout 和 CollapsingToolbarLayout 等控件，同时需要注意样式和监听相关控件的事件。通过本文的示例代码和步骤，相信大家已经能够掌握 Material Design 中实现 Toolbar 和 App Bar 动画效果的方法，可以用在具体的应用开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4e39848841e989414db7a