Material Design 是 Google 面向移动设备开发的一套界面设计语言，其中的 CollapsingToolbarLayout 实现了可折叠的 Toolbar 效果，大大提升了应用的视觉效果和用户体验。
本文将介绍如何在 Material Design 中使用 CollapsingToolbarLayout 实现可折叠的 Toolbar 效果。
准备工作
首先，需要在项目中引入 Material Design 相关依赖库：
implementation 'com.google.android.material:material:1.2.1'
接下来，在布局文件中添加 CollapsingToolbarLayout 和 Toolbar 控件：
-- -------------------- ---- ------- ----------------------------------------------------------- ------------------------------------------- ----------------------------------- ------------------------------------ ------------------------------------- --------------------------------------------------- ---------- ---------------------------------- ----------------------------------- ----------------------------- ------------------------------ ---------------------------------------- -- ---------------------------------- ------------------------- ----------------------------------- ------------------------------------------- ----------------------------- ----------------------------------------- -- -------------------------------------------------------------展开代码
其中，app:contentScrim 属性设置收缩时的背景颜色，app:layout_scrollFlags 属性设置可滚动和退出折叠的模式。
app:layout_collapseMode 属性设置 Toolbar 在收缩时的行为，pin 表示在 Toolbar 收缩时将其固定在顶部，不跟随内容滑动。app:titleTextColor 属性设置 Toolbar 标题文字颜色。
实现代码
为了实现可折叠的 Toolbar 效果，需要在代码中进行一些配置。首先，需要在 Activity 或 Fragment 中获取 CollapsingToolbarLayout 和 Toolbar 对象：
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar_layout); Toolbar toolbar = findViewById(R.id.toolbar);
接下来，需要设置 Toolbar 为顶部 ActionBar 并隐藏原有 ActionBar：
setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setDisplayShowTitleEnabled(false);
设置标题和背景图片：
collapsingToolbarLayout.setTitle("可折叠的 Toolbar"); ImageView backgroundImage = findViewById(R.id.background_image); Glide.with(this).load(R.drawable.background_image).into(backgroundImage);
最后，需要为 RecyclerView 或 NestedScrollView 等可滚动内容设置滚动监听器，以便在滚动时动态修改 Toolbar 的透明度、颜色等属性：
-- -------------------- ---- ------- ------------ ------------ - --------------------------------- ------------------------------------ ------------------------------- - --------- ------ ---- ------------------- ------------ ------------- --- --- --- --- - ------------------------------ --- ---- --- ----------- - ------------------------------------------ --- ------------ - ------------------------------------------- --- ------------ - ------------------------------------------- --- ------------- - ------------------- - --------------------- --- --- - ----------- - ------------- ----- ----- - ------- ---- - ------------ - ---- - - - - - ------ ---------------------------------------- -- ------ -- ----- - -------------------------------------- ---------- ---------------------------------------- --------------------------------------------------------------- - ---- - ------------------------------------- ---------------------------------------------- --------------------------------------------------------------- - -- ------------- - -------------- - ----- ------ - ------- ------------ - -------------- ------------------------- - ---- - ----------------------- - - ---展开代码
其中，getStatusBarHeight() 方法用于获取状态栏高度，scrollRange、scrollOffset 和 scrollExtent 分别表示整个 RecyclerView 或 NestedScrollView 的滚动范围、当前滚动位置和可视范围。计算出可滚动范围后，就可以根据当前滚动位置计算 Toolbar 的透明度和颜色，并设置 Toolbar 标题和导航按钮的背景色、透明度等属性。
完整代码
-- -------------------- ---- ------- ------ ----- ------------ ------- ----------------- - --------- --------- ---- --------------- ------------------- - ----------------------------------- --------------------------------------- ----------------------- ----------------------- - --------------------------------------------- ------- ------- - --------------------------- ----------------------------- ------------------------------------------------------ -------------------------------------------------------- -------------------------------------- ---------- --------- --------------- - ------------------------------------ ------------------------------------------------------------------------- ------------ ------------ - --------------------------------- --------------------------------- --------------------------- --------------------------- ------------- ------------------------------------ ------------------------------- - --------- ------ ---- ------------------- ------------ ------------- --- --- --- --- - ------------------------------ --- ---- --- ----------- - ------------------------------------------ --- ------------ - ------------------------------------------- --- ------------ - ------------------------------------------- --- ------------- - ------------------- - --------------------- --- --- - ----------- - ------------- ----- ----- - ------- ---- - ------------ - ---- - - - - - ------ ---------------------------------------- -- ------ -- ----- - -------------------------------------- ---------- ---------------------------------------- --------------------------------------------------------------- - ---- - ------------------------------------- ---------------------------------------------- --------------------------------------------------------------- - -- ------------- - -------------- - ----- ------ - ------- ------------ - -------------- ------------------------- - ---- - ----------------------- - - --- - ------- --- -------------------- - --- ---------- - ------------------------------------------------- -------- ----------- ------ ---------- - - - ------------------------------------------------ - -- - ------- ------ ----- --------- ------- ---------------------------------- - -------- --------- ------ ------------ --------------------------- --------- ------- --- --------- - ---- ---- - -------------------------------------------------------------------- ------- ------- ------ --- ------------------- - --------- ------ ---- ------------------------- ------------ ------- --- --------- - ---------------------------- - - ---------- -------------------------------- - - ---------- - --------- ------ --- -------------- - ------ --- - - ------- ------ ----- ------------ ------- ----------------------- - -------- ---------- -------- ------------- ------ --------------------- ---- --------- - ---------------- --------- - ---------------------------------- ------------ - ------------------------------------- - - -展开代码
总结
通过本文的介绍，我们学习了如何在 Material Design 中使用 CollapsingToolbarLayout 实现可折叠的 Toolbar 效果。通过设置滚动监听器，可以动态修改 Toolbar 的属性，从而获得更好的用户体验。
此外，我们还可以尝试添加更多的交互效果，比如添加自定义视图、添加菜单项等。Material Design 提供了丰富的控件和样式，可以让我们快速实现精美的 UI 效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651fd8e095b1f8cacd763013
