Android仿支付宝的头部伸缩动画效果-创新互联

Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件，不但允许自定义顶部导航栏，而且导航栏高度是可以伸缩的。如此一来，一方面导航栏能够放得下更多控件，另一方面在用户想看具体内容时也能腾出更多的屏幕空间。

这么说可能比较抽象，那就先来看看两张导航栏的效果图，第一张是导航栏完全展开时的界面，此时页面头部的导航栏占据了较大部分的高度；

第二张是导航栏完全收缩时的界面，此时头部导航栏只剩矮矮的一个长条。

看起来很眼熟是不是，上面的截图正是仿支付宝首页的头部效果。如果你熟悉AppBarLayout和CollapsingToolbarLayout的话，也许可以很快做出类似以上的简单界面，具体地说，就是定义一个CoordinatorLayout嵌套AppBarLayout再嵌套CollapsingToolbarLayout再嵌套Toolbar的布局。之所以要嵌套这么多层，是因为要完成以下功能：

1、CoordinatorLayout嵌套AppBarLayout，这是为了让头部导航栏能够跟随内容视图下拉而展开，跟随内容视图上拉而收缩。这个内容视图可以是RecyclerView，也可以是NestedScrollView；

2、AppBarLayout嵌套CollapsingToolbarLayout，这是为了定义导航栏下面需要展开和收缩的部分视图；

3、CollapsingToolbarLayout嵌套Toolbar，这是为了定义导航栏上方无论何时都要显示的长条区域，其中Toolbar还要定义两个不同的样式布局，用于分别显示展开与收缩状态时的工具栏界面。

下面是基于以上思路实现的布局文件代码：