在 Android 应用程序设计中，Material Design 是一个非常重要的设计语言。其中的 CollapsingToolbarLayout 可以实现滚动时标题显示和隐藏，为应用程序的设计增加了一点亮点。本文将介绍如何在 Android Material Design 中使用 CollapsingToolbarLayout 实现显示标题的技巧。
准备工作
在使用CollapsingToolbarLayout之前，需要在项目的gradle script中添加如下代码：
dependencies {
…
implementation ‘com.android.support:design:24.2.0’
}其中，version号必须和你项目的支持库版本号相同，不然可能会引起编译失败等一系列问题。
示例
我们先来看一下简单的示例代码：
-- -------------------- ---- -------
-------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------
-----------------------------------
-----------------------------
------------------------------
--------------------------
----------------------------------
------------------------------------------- --
---------
-----------------------------------
------------------------------------
-------------------------------
---------------------------------------------------
-------------------
---------------------------------------
-----------------------
----------------------------- --
--------------------------------------------------------
-
---------------------------------------------这里的 CollapsingToolbarLayout 中包含了一个 ImageView 和 TextView，同时，app:layout_collapseMode="parallax" 和 app:layout_collapseMode="pin" 表示了这两个元素滚动时的行为。我们可以通过修改这些属性来实现不同的效果。
滚动效果
我们来看一下不同属性的效果。
parallax
app:layout_collapseMode="parallax" 时，ImageView 会跟随滚动偏移，并以视差的方式进行显示。这个效果可以增加应用程序运行的美感。
pin
app:layout_collapseMode="pin" 时，TextView 在 Toolbar 收缩后会停留在顶端。这个效果可以让用户随时看到标题，避免迷失方向。
CollapsingToolbarLayout 的其他属性
除了上述和滚动相关的属性之外，CollapsingToolbarLayout 还有一些其他的属性，例如：
contentScrim
contentScrim 可以指定一个颜色或者 drawable 作为滚动过程中 Toolbar 的颜色。
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorPrimary">
…
</android.support.design.widget.CollapsingToolbarLayout>expandedTitleMarginStart/Top
expandedTitleMarginStart 和 expandedTitleMarginTop 可以用来设置标题在展开时的上下或左右方向的间距。
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginTop="24dp">
…
</android.support.design.widget.CollapsingToolbarLayout>结论
CollapsingToolbarLayout 不仅可以让应用程序更加美观，而且可以加强用户体验。但是要注意，这个类需要配合 CoordinatorLayout、AppBarLayout、Toolbar 或者 TabLayout 等使用。至此，本文完成了对 Android Material Design 中使用 CollapsingToolbarLayout 实现标题显示的技巧的介绍。通过这篇文章的学习，相信你已经能够灵活运用 CollapsingToolbarLayout，打造更加美观的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f62e1ac5c563ced5805597