前面说到了和Viewpager的联合使用,本次我们继续学习和Viewpager的使用,不过这次我们添加一些新的元素,可以看到动态变化的过程。
本次使用的是CollapsingToolbarLayout,一种可以实现折叠效果的ToolBar;其继承FrameLayout;通常作为AppBarlayout的子孩子使用,有以下功能,
Collapsing title(可以折叠 的 标题 )
Content scrim(内容装饰),当我们滑动位置到达一定阀值的时候,内容 装饰将会被显示或者隐藏
Status bar scrim(状态栏布)
Parallax scrolling children,滑动的时候孩子呈现视觉特差效果
Pinned position children,固定位置的 孩子
下面是几个常量值
1、在CollapsingToolbarLayout中:
我们设置了layout_scrollFlags:,这里的属性值对应的效果我们在看一下;
scroll - 若要滚动,我们必须设置此属性值。
enterAlways 当向下移动时,会立刻显示View。
exitUntilCollapsed -向上滚动时收缩View,但可以固定Toolbar一直在上面。
enterAlwaysCollapsed -当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。
另外我们会用到其他一些属性,这里说明一下;
contentScrim - 设置当CollapsingToolbarLayout完全折叠(收缩)后的背景颜色。
expandedTitleMarginStart - 设置扩张时候(还没有收缩时)title向左填充的距离。
在CollapsingToolbarLayout的子控件中我们可以设置属性layout_collapseMode (折叠模式) -有两个值:
pin -设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上。
parallax -设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1。
我们看下代码
CollapsingToolbarLayout里面 包含ImageView 和ToolBar,ImageView的app:layout_collapseMode="parallax",表示视差效果,ToolBar的 app:layout_collapseMode="pin",当这个TooBar到达 CollapsingToolbarLayout的底部的时候,会代替整个CollapsingToolbarLayout显示
接着说明TabLayout的变化
从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候,最终TabLayout会静止,不会随着滑动的 时候消失不见;
最终imagview会消失,但是ToolBar标题展示在顶部.
PS本文参考文章是作者xujun9411所写的文章,非常感谢!使用CoordinatorLayout打造各种炫酷的效果