『Material Design』CollapsingToolbarLayout可折叠标题栏

👨‍🎓作者简介：一位喜欢写作，计科专业大三菜鸟

🏡个人主页：starry陆离

如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

1.可折叠标题栏

可折叠标题栏需要借助CollapsingToolbarLayout这个工具。

CollapsingToolbarLayout是一个作用于Toolbar基础之上的布局，由DesignSupport库提供。

需要注意的是：

• CollapsingToolbarLayout不能独立存在
• 它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。
• 而AppBarLayout又必须是CoordinatorLayout的子布局；

因此可以通过下面这个图直观的了解他们的层级关系。

2.布局设计

布局的设计分为

• 标题部分
• 内容部分

标题部分

首先我们来看标题部分，这里我们设计是完全遵循刚刚的规则的，最外层是CoordinatorLayout，中间是AppBarLayout，最里层是CollapsingToolbarLayout。并且我们制定了AppBarLayout的高度是250dp，因此只有上面的那小部分是蓝色的。

在CollapsingToolbarLayout中有几个属性需要说明一下，分别是

• contentScrim：指定CollapsingToolbarLayout趋于折叠状态的背景色
• layout_scrollFlags：scroll表示CollapsingToolbarLayout会随着内容部分滚动一起滚动，exitUntilCollapsed表示CollapsingToolbarLayout完成折叠后保留在揭秘那上，不会移出屏幕。

然后在CollapsingToolbarLayout放置一个背景图片和一个ToolBar。

这里用到了layout_collapseMode属性

• parallax：表示折叠的过程中产生一定的错位偏移
• pin：表示折叠的过程中位置始终保持不变

注意这里控件不要选错了哦，是androidx.appcompat.widget.Toolbar

内容部分

内容部分就简单了。由一个NestedScrollView嵌套一个LinearLayout，在LinearLayout中存放我们的内容。

为了美化效果，在线性布局中，使用MaterialCardView，然后放置一个文本控件显示内容。

至此布局部分编写完毕。

3.代码部分

代码部分比较简单，分别获取各个控件的实例，然后设置图片资源，文本资源即可。实际开发当然不是这么简单粗暴，这些数据应该从上一个界面获取，或者网络加载请求数据。

除此之外我还通过setDisplayHomeAsUpEnabled()设置左上角的返回按钮显示。并用onOptionsItemSelected()方法监听返回事件

getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示android.R.id.home
1

4.充分利用系统状态栏

让背景图和系统状态栏融合，需要借助Android:fitsSystemWindows这个属性来实现。

将控件的android:fitsSystemWindows属性指定成true，就表示该控件会出现在系统状态栏里。现在我们要让图片出现在状态栏里，除了给ImageView设置Android:fitsSystemWindows属性，它的所有父控件均需要设置。

除此之外我们还需要将状态栏设置为透明的。

在themes文件中定义一款主题样式CollapseTheme，它继承自AppTheme中的所有特性，并在此基础上添加了状态栏颜色设置透明

在AndroidManifest.xml中为CollapseActivity使用这款主题

再来看一下效果，nice！！！

5.参考资料

Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间） - 简书 (jianshu.com)

6.Gitee源码

Android_Java_Review: 学习–代码即笔记 (gitee.com)