Material Design 是 Google 提出的一套设计风格，旨在为用户提供更加直观、更加具有层次感的用户体验。其中，折叠式 toolbar 是一种常见的设计手段，它可以将页面上方的大面积空白区域利用起来，同时提升用户交互的可用性。
本文将介绍在 Material Design 风格下如何实现折叠式 toolbar，并提供完整的示例代码，帮助读者更好地理解和掌握这一技术。
实现基本原理
折叠式 toolbar 的实现基于两个核心元素：CollapsingToolbarLayout 和 Toolbar。其中，CollapsingToolbarLayout 是一个可以实现折叠效果的容器视图，而 Toolbar 则是用于承载标题和图标等元素的工具栏。
具体来说，CollapsingToolbarLayout 中包含两层 container，分别用于承载 toolbar 和背景图片。当页面滚动时，CollapsingToolbarLayout 将根据用户的滚动行为来不断减少 toolbar 的高度，从而实现折叠效果。
实现示例
首先，需要在 module 的 build.gradle 文件中添加如下依赖：
implementation 'com.google.android.material:material:1.2.0-alpha05'
接下来，在布局文件中添加以下代码：
-- -------------------- ---- ------- ---------------------------------------------------- ---------------------------------------------------------- ----------------------------------- ------------------------------------- ------------------------------------------------ ----------------------------------- ------------------------------------- ----------------------------------------------------------- ----------------------------- ----------------------------------- ---------------------------------------- --------------------------------------------------- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- ------------------------------- --------------- ----------------------------------- ------------------------------------ ---------------------- ----------------------------------- ---- ------------- --- ----------------- ------------------------------------------------------------- -------------------------------------------------- ------------------------------------------ ------------------------------ ----------------------------------- ------------------------------------ -------------------------------- ------------------------------------------------------------ -- ------------------------------------------------------展开代码
其中，布局文件主要采用了 CoordinatorLayout 作为容器视图，用于实现 CollapsingToolbarLayout 和 RecyclerView 之间的联动。AppBarLayout 则是将 Toolbar 和 CollapsingToolbarLayout 进行包装，用于扩展滚动效果。
具体来说，CollapsingToolbarLayout 中包含 Toolbar 和背景图两个 container。Toolbar 设置了 layout_collapseMode 为 pin，表示在折叠过程中将一直保持在屏幕上方。RelativeLayout 则是用于承载需要展示的界面元素，并设置了 layout_collapseMode 为 parallax，从而在滚动过程中实现纵向视差效果。
最后，在 Activity 或 Fragment 中添加以下代码：
Toolbar toolbar = findViewById(R.id.toolbar); setSupportActionBar(toolbar); RecyclerView recyclerView = findViewById(R.id.recyclerView); recyclerView.setLayoutManager(new LinearLayoutManager(this)); recyclerView.setAdapter(new RecyclerView.Adapter<ViewHolder>() { // 此处添加 RecyclerView 的适配器代码 });
至此，折叠式 toolbar 的实现已经完成。在运行应用时，用户可以通过滚动屏幕来体验 toolbar 折叠的效果。
总结
本文介绍了在 Material Design 风格下实现折叠式 toolbar 的基本原理，同时提供了完整的示例代码，帮助读者更好地理解和掌握这一技术。在实际开发过程中，开发者可以根据具体需求对示例代码进行修改，从而实现更加丰富和个性化的界面效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a887e0add4f0e0ff1aa860
