AppBarLayout遇上netscrollview与RecyclerView

先上最后的效果图。

QQ20180402-0.gif

初期设计师其实并没有在效果图上突出 filter筛选栏(Best Match那一横排)和下面的活动栏(11.11 Festival那一横排)不是一个整体的,而我又根据之前代码复用。自然而然就实现了CoordinatorLayout + AppBarLayout(filter筛选栏和活动栏放入其中) 来实现吸顶效果,下面的列表就单独用RecyclerView来实现。代码完成后效果是没有活动栏时filter筛选栏吸顶,而有活动栏就成了活动栏吸顶,开发完成我都没觉得有多大问题。可当提交测试时候后设计大大说只能是filter栏吸顶,下面的活动栏跟着列表滑动上去,而且这个没得商量必须这样实现否则不能上线。虽然内心万马奔腾 但还是得按照设计大大的意思去实现了。于是我开始了以下系列的尝试

1.AppBarLayout上做文章

因为filter栏和下面的活动栏有较为复杂的逻辑,所以我都选择用fragment实现然后 replace AppBarLayout里的区块布局之中。想要实现设计大大效果最小的改动自然想到应该就是只在appbarlayout中做文章的,可经过我大量实错之后才知道自己too young too simple.这里简单总结一下AppBarLayout实现特殊 MD 效果都是在子布局中设置layout_scrollFlags属性,共有5种属性可供设置的,但其中4种属性都需要跟scroll属性组合使用的否则无效。这里的吸顶悬停用的是layout_scrollFlags="scroll|exitUntilCollapsed" 。正常思维那我把filter筛选栏设置为exitUntilCollapsed下面的活动栏设置为scroll不就可以了么。可结果是filter筛选栏确实是悬浮在那了,可下面活动栏也不再继续滚动了,其实想想也是中间部分都暂停滚动了,下面的自然也会停止继续滚动的

后来我还想是不是有我所不知道的属性设置能够实现,因此很是耽误了一段时间去查资料去试的。可最终还是不羁而终,如果你发现在appbarlayout中能直接实现欢迎交流

2.将scrollview包含活动栏和列表recyclerview来实现滚动

查了些资料这种情况需要用netscrollview,然而直接使用啥都看不到,google了下无法计算scrollview的高度吧,在scrollview中设置android:fillViewport="true"属性解决了布局撑满了整个屏幕,是能正常显示了,也能滑动了,但是滑倒filter筛选栏悬停吸顶的时候活动栏也跟着停止了滑动 剩下只有recyclerview继续能滑动。视觉上还是成了filter筛选栏和活动栏两个吸顶悬停效果的。再查了些资料继续折腾了一两个小时也就放弃了,其实即使这种方式能实现UI效果,个人也很看不上。因为netscrollview绘制时候其实是将包含所有数据的recyclerview都绘制出来了,也就是如果接口请求一页有20条数据 此时recyclerview会将20条列表数据都绘制出来了尽管界面上只展示4条。那recyclerview的复用机制在这毫无意义可言,对内存也极大损耗

3.终极大法活动栏写到列表的recyclerview中作为一个特殊的item

其实从一开始就知道这方法肯定行的通的,但是代码框架都形成了,而且活动栏是一个fragment实现的,不到万不得已不想用这方法,因为代码改动确定太大为了一个小小UI效果那样做总有点不甘心。最终还是花了一晚上去实现了。

总结

在fix这个小的UI效果上 前前后后花费了有两三天吧,累计时间也应该有一天。主要是方法一 方法二上面折腾太久但又行不通。总想着有类似方法一二那种捷径,最终还是靠踏踏实实的方法三实现了。也许写代码就如人生 本来就没有什么捷径,踏踏实实才是硬道理。。关于这种效果实现有更好的方法欢迎交流

ps:好像有点文不对题的,用这个题目只是觉得碰到我这种问题常规思维应该就是使用题目这种方式,也提醒后面避免踩坑吧。

你可能感兴趣的:(AppBarLayout遇上netscrollview与RecyclerView)