写点什么

带波浪效果的 CollapsingToolbarLayout + RecycleView

作者:阿策小和尚
  • 2021 年 12 月 15 日
  • 本文字数:848 字

    阅读完需:约 3 分钟

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


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

  2. CollapsingToolbarLayout 中,需要设置 layout_scrollFlagsscroll (滚动) / 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

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

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

  3. 设置 RecycleView,添加数据等;


其中有两点需要注意:

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

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

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


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


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



发布于: 2 小时前阅读数: 5
用户头像

还未添加个人签名 2021.05.13 加入

Android / Flutter 小菜鸟~

评论

发布
暂无评论
带波浪效果的CollapsingToolbarLayout + RecycleView