CoordinatorLayout,CollapsingToolbarLayout打造自己的折叠式标题栏

android的折叠式布局好多app都已经用了,看起来效果确实很赞,最近项目中也使用了,记录使用笔记,备忘.

在android studio的模板里面,Scrolling Activity就实现了这个折叠式布局,可以直接看到效果.今天我们就在它的基础上学习定制自己的折叠效果.
先看下模板里面的xml

1.其中注意一点:

 android:fitsSystemWindows="true"

这个属性是为了适应状态栏高度.当为true时,会自动给view加一个ppadding,以使view不会挤压到状态栏里面.

需要注意的一点是toolbar没有设置android:fitSystemWindows="true"默认也就是false.如果也置为true,你会发现toolbar上方又多出来了一个padding.没有居中了.

2.可通过在CollapsingToolbarLayout标签下添加

app:titleEnabled="false"

使toolbar的title固定,而不随整个布局的拉伸位置下移.

或者在代码中设置

        collapsingToolbarLayout.setTitleEnabled(false);

3.在我们的应用中需要添加在toolbar下面添加一条线,以使toolbar界限明显.

最后在根CoordinatorLayout布局下添加View,如下

其中marginTop值需要设置为toolbar的高度+statusBar的高度.此处要注意不要忘了写marginTop,否则该View会压在toolbar上,别忘了加状态栏的高度.(StormZhang在其toolabr适配方案里面也是直接写死statusBar高度为25dp).其实我还是对写死的东西有点没有安全感,一直在疑惑所有手机的statusBar都是25dp吗,临时在我手机上显示都正常.若有知道statusBar高度是否在所有手机上都一样高的问题的,望赐教.

app:layout_anchor="@id/toolbar"

设置该view以哪个View作为锚点.

app:layout_anchorGravity="bottom"

处于锚点View的下方.

4.collapsingToolbarLayout 标签下的

app:contentScrim="?attr/colorPrimary"

限定的是toolbar折叠在顶部时的背景色.

5.不要忘记了collapsingToolbarLayout本质上依然是一个FrameLayout,Toolbar必须写在最后面,否则折叠后被后面添加的布局遮挡了.

我的测试代码如下:

展开效果:

展开效果

折叠效果:

toolbar显示正常

在上述xml里面如果将ImageView放到toolbar后面,属性不变,折叠后的效果如下:

toobar被遮挡

其实toolbar还是在折叠的位置上,只是被上面的imageView遮挡住了.

AppBarLayout 本质上是个LinearLayout,所以可以在CollapsingToolbarLayout和结束标签后面和AppBarLayout结束标签前面添加一个TabLayout,toolbar折叠后TabLayout紧贴在toolbar下面吸附的效果.

还有一个非常重要的知识点app:layoutFlags各个值代表的各种效果,下篇博客再写.
洗洗睡啦,呼呼~~~