带波浪效果的 CollapsingToolbarLayout + RecycleView
小菜最近接到一个任务,实现包括波浪条的可折叠的 ToolBar,准备用 CollapsingToolbarLayout 来尝试一下:
根据使用手册和网上大神们的例子,布局文件中 CollapsingToolbarLayout 里面添加需要展示的 Toolbar 和其他需要展示的控件,包括文字图片和需要自定义的波浪 View;
CollapsingToolbarLayout 中,需要设置 layout_scrollFlags 中 scroll (滚动) / enterAlways (实现 quick return 效果, 当向下移动时,立即显示 View) / exitUntilCollapsed (向上滚动时收缩 View,但可以固定 Toolbar 一直在上面) / enterAlwaysCollapsed (当 View 已经设置 minHeight 属性又使用此标志时,你的 View 只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度); CollapsingToolbarLayout 里面的控件一般需要设置:
layout_collapseMode (折叠模式) -有两个值:
(a.) pin -设置为这个模式时,当 CollapsingToolbarLayout 完全收缩后,Toolbar 还可以保留在屏幕上;
(b.) parallax -设置为这个模式时,在内容滚动时,CollapsingToolbarLayout 中的 View(比如 ImageView) 也可以同时滚动,实现视差滚动效果,通常和 layout_collapseParallaxMultiplier (设置视差因子)搭配使用。
layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1
设置相应的展示效果(字体或图片的展示大小/颜色/属性等以及卡片展开压缩的效果);
根据需求绘制一个波浪效果,应用余玄函数进行绘制;
设置 RecycleView,添加数据等;
其中有两点需要注意:
1. 这个效果一定要建立在没有标题栏的主题下 android:theme="@style/AppTheme.NoActionBar"
2. 如果运行过程中提示找不到属性之类的, CollapsingToolbarLayout 使用时需要引入 android.support.design 的 lib,步骤如下:
(1) File --> Progect Structure --> Dependencies;
(2) 搜索 design 等关键字,找到相应的 libs,添加即可;
实际的显示效果,例如 pin 与 parallax 的区别;视觉因子的大小;颜色值和展示位置等,需要大家根据实际情况调试,按需要展示。小菜的实际效果:
版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。
原文链接:【http://xie.infoq.cn/article/bf2938c8e03657dabaaf68c6e】。文章转载请联系作者。
评论