CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)

CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)

入坑部分
很早之前的一份需求,看了看需要悬浮置顶效果?????????????
这嘛很简单。
SmartRefreshLayout+NestedScrollView+RecyclerView搞定
恭喜你入坑了(NestedScrollView+RecyclerView事件滑动冲突)
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第1张图片
我们先来说说这个冲突
ScrollView下拉 和 RecycleView下拉冲突事件 导致RecycleView 一直加载下一页数据
(解决方法另一篇文章出)

进入今天的主题CoordinatorLayout+AppBarLayout
CoordinatorLayout是Google伴随着Material Design推出的一个可自定义布局伸缩的控件。
本文中使用的另外一个“主角”,就是AppBarLayout了。
AppBarLayout 把我们需要悬浮置顶的布局呢嵌入其中他可以随着我们布局的滑动从而一直顶到布局顶部 接下来的布局呢还可以继续滑动。
CollapsingToolbarLayout 是当前置顶布局之上的布局 填入其中随我们布局的滑动
CoordinatorLayout布局中的AppBarLayout嵌套
CollapsingToolbarLayout 布局随之向上滑动
当到达需要置顶的悬浮的布局时 从而进行置顶悬浮操作。
下来先看我们的布局代码
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第2张图片

初始化好RecycleView我是一顿操作。搞定,看下效果还不错。
咦,RecycleView 偶尔滑动卡顿。
RecycleView 下滑是有一段惯性原理使其自动下滑。
所以我们得对RecycleView进行一下监听(看代码)
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第3张图片
这样我们接解决的偶尔上滑不顺畅 划不到顶的问题。
目前这种悬浮式的按钮很多很常见,AppBarLayout 是一种比较好的解决方法。
注:
悬浮布局上还有其他布局 这部分布局不需要悬浮 需要给这部分布局一个滑动属性
(app:layout_scrollFlags=“scroll”) 这部分布局需要继续上滑所以我们需要给他一个滑动属性 悬浮部分则不需要
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第4张图片
完成了效果图,效果还是不错的。不过RecycleView 还是有点小瑕疵的AppBarlayout
下的RecycleView下面存在黑色阴影
看图
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第5张图片
请输入用户ID的下方有黑色阴影部分

解决方法如下
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第6张图片
给AppBarLayout 添加 app:elevation=“0dp” 即可取消阴影

下面我们来贴一张效果图

主要分为呢是否悬浮到顶部,和非悬停。如果 搜索部分也需要上滑我们可以使用CoordinatorLayout+AppBarLayout 只需要把Appbarlayout部分加上app:layout_scrollFlags=“scroll” 属性即可
下面附上本文Demo 的地址:https://github.com/GabrielFan/CoordinatorLayout-AppBarLayout-ScrollView

今天文章就到此结束了希望可以帮到各位小伙伴们。ScrollView 和 RecycleView 滑动冲突我们下篇文章解决!
下面时间我们来波宣传!

希望大家关注我的微信公众号(Android知识星球) Android_Gabriel,不定时您推送高质量文章,让你每天都能涨知识。点击历史消息,查看所有已推送的文章,喜欢可以置顶本公众号。此外,本公众号支持投稿,如果你有原创的文章,希望通过本公众号发布,欢迎投稿。
CoordinatorLayout+AppBarLayout使用(替代ScrollView 避免滑动事件冲突)_第7张图片

你可能感兴趣的:(Android)