您现在的位置是:首页 > 文章详情

带波浪效果的CollapsingToolbarLayout + RecycleView

日期:2017-05-30点击:365

     小菜最近接到一个任务,实现包括波浪条的可折叠的ToolBar,准备用CollapsingToolbarLayout来尝试一下:

    1. 根据使用手册和网上大神们的例子,布局文件中 CollapsingToolbarLayout 里面添加需要展示的 Toolbar 和其他需要展示的控件,包括文字图片和需要自定义的波浪 View;

    2. CollapsingToolbarLayout 中,需要设置 layout_scrollFlags 中 scroll(滚动)/enterAlways(实现 quick return 效果, 当向下移动时,立即显示View)/exitUntilCollapsed(向上滚动时收缩View,但可以固定Toolbar一直在上面)/enterAlwaysCollapsed(当View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度);

      CollapsingToolbarLayout 里面的控件一般需要设置:

      (1) layout_collapseMode (折叠模式) -有两个值:

            pin -设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar还可以保留在屏幕上;

            parallax -设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

       (2) layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子,值为:0~1

    3. 设置相应的展示效果(字体或图片的展示大小/颜色/属性等以及卡片展开压缩的效果);

    4. 根据需求绘制一个波浪效果,应用余玄函数进行绘制;

    5. 设置RecycleView,添加数据等


其中有两点需要注意:

1. 这个效果一定要建立在没有标题栏的主题下 android:theme="@style/AppTheme.NoActionBar"

2. 如果运行过程中提示找不到属性之类的, CollapsingToolbarLayout 使用时需要引入 android.support.design 的 lib,步骤如下:

  (1) File --> Progect Structure --> Dependencies


1240

  (2) 搜索 design 等关键字,找到相应的 libs,添加即可

1240

    实际的显示效果,例如 pin 与 parallax 的区别;视觉因子的大小;颜色值和展示位置等,需要大家根据实际情况调试,按需要展示。小菜的实际效果:

1240
1240

GitHub地址


原文链接:https://yq.aliyun.com/articles/633563
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章