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

最新推荐文章于 2024-05-16 04:43:42 发布
最新推荐文章于 2024-05-16 04:43:42 发布
阅读量6k 收藏 4
点赞数 1
分类专栏： Android 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30107007/article/details/85695490
版权

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

入坑部分
很早之前的一份需求，看了看需要悬浮置顶效果？？？？？？？？？？？？？
这嘛很简单。
SmartRefreshLayout+NestedScrollView+RecyclerView搞定
恭喜你入坑了(NestedScrollView+RecyclerView事件滑动冲突)
一顿操作猛如虎，一看效果TM 250
我们先来说说这个冲突
ScrollView下拉 和 RecycleView下拉冲突事件 导致RecycleView 一直加载下一页数据
(解决方法另一篇文章出)

进入今天的主题CoordinatorLayout+AppBarLayout
CoordinatorLayout是Google伴随着Material Design推出的一个可自定义布局伸缩的控件。
本文中使用的另外一个“主角”，就是AppBarLayout了。
AppBarLayout 把我们需要悬浮置顶的布局呢嵌入其中他可以随着我们布局的滑动从而一直顶到布局顶部 接下来的布局呢还可以继续滑动。
CollapsingToolbarLayout 是当前置顶布局之上的布局 填入其中随我们布局的滑动
CoordinatorLayout布局中的AppBarLayout嵌套
CollapsingToolbarLayout 布局随之向上滑动
当到达需要置顶的悬浮的布局时 从而进行置顶悬浮操作。
下来先看我们的布局代码
截长图工具在AS中不可用会有重叠现象 尴尬1B

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

解决方法如下
在这里插入图片描述
给AppBarLayout 添加 app:elevation=“0dp” 即可取消阴影

下面我们来贴一张效果图
在这里插入图片描述
主要分为呢是否悬浮到顶部，和非悬停。如果 搜索部分也需要上滑我们可以使用CoordinatorLayout+AppBarLayout 只需要把Appbarlayout部分加上app:layout_scrollFlags=“scroll” 属性即可
下面附上本文Demo 的地址：https://github.com/GabrielFan/CoordinatorLayout-AppBarLayout-ScrollView

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

希望大家关注我的微信公众号(Android知识星球) Android_Gabriel，不定时您推送高质量文章，让你每天都能涨知识。点击历史消息，查看所有已推送的文章，喜欢可以置顶本公众号。此外，本公众号支持投稿，如果你有原创的文章，希望通过本公众号发布，欢迎投稿。
扫码关注

十柒。
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
07-16
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+Toolbar+NestedScrollView+RecyclerView+FloatingActionButton的使用demo，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
JR-CoordinatorLayout:CoordinatorLayout + AppBarLayout + NestedScrollView组合使用实现地图背景，滑动悬停华丽效果。
03-11
CoordinatorLayout + AppBarLayout + NestedScrollView组合使用实现地图背景，滑动悬停华丽效果。 CoordinatorLayout即加强版FrameLayout，适合作为应用程序布局的布局（必须是根部局），提供交互行为通过给子视图...
Material Design之CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar
热门推荐
【博客地址迁移到】：https://zhengxiaoyong.com
07-12 3万+
ok，今天继续更新Material Design系列！！！ 废话不说，先看看效果图吧： 好了，现在来讲讲上图是怎么实现的吧！讲之前先讲讲几个控件： CoordinatorLayout  该控件也是Design包下的一个控件，然而这个控件可以被称为Design包中最复杂、功能最强大的控件：CoordinatorLayout。为什么这样说呢？原因是：它是组织它众多子
2024年安卓最新Android之AppBarLayout实现悬停吸附伸缩效果，面试官撕简历
最新发布
2301_79985012的博客
05-16 1174
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
CoordinatorLayout+AppBarLayout 提供最佳浏览体验
你若盛开，蜜蜂自来
07-24 1万+
博主声明： 转载请在开头附加本文链接及作者信息，并标记为转载。本文由博主威威喵原创，请多支持与指教。 本文首发于此 博主：威威喵|博客主页：https://blog.csdn.net/smile_running 感受 Material Design UI 魅力，你不能错过的Material Design 全系列文章： Material Design 之一 Bott...
一文彻底搞懂 Design 设计的 CoordinatorLayout 和 AppbarLayout 联动，让 Design 设计更简单~
Android Engineer.
03-29 724
一、写在前面 其实博主在之前已经对 Design 包的各个控件都做了博文说明，无奈个人觉得理解不够深入，所以有了这篇更加深入的介绍，希望各位看官拍砖~ 二、从是什么开始 1、首先我们得知道 CoordinatorLayout 是什么玩意儿，到底有什么用，我们不妨看看官方文档的描述：　　　 CoordinatorLayout 是一个 “加强版” FrameLayout， 它主要有两个用途
CoordinatorLayout + AppBarLayout
qq_39438055的博客
01-30 247
CoordinatorLayout + AppBarLayout
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史...实现类似的效果 ，主要是使用三个控件相结合 CoordinatorLayout 、AppbarLayout 、NestedScrollView 。 AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
CoordinatorLayout+AppBarLayout小栗子
11-06
在“CoordinatorLayout+AppBarLayout小栗子”中，我们可能看到以下示例： 1. 创建一个`CoordinatorLayout`作为根布局，然后添加一个`AppBarLayout`，其中包含一个`Toolbar`和可能的`TabLayout`。 2. 设置`...
CoordinatorLayout+AppBarLayout+TabLayout+viewpager实现跟随隐藏tablayout功能
05-06
本示例项目，"CoordinatorLayout+AppBarLayout+TabLayout+viewpager实现跟随隐藏tablayout功能"，正是遵循这一规范，旨在创建一个高度互动且响应式的布局。以下是这些组件的详细说明以及它们如何协同工作来实现所述...
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+banner
06-29
在`CoordinatorLayout`中，滑动事件的处理可以通过自定义`Behavior`来实现，`Behavior`可以定义子视图对父视图滑动手势的响应方式。 为了创建这样一个滑动效果，开发者首先需要在XML布局文件中设置`...
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView
07-16
CoordinatorLayout+AppBarLayout+Toolbar+TabLayout+ViewPager+RecyclerView+CardView的使用，详细说明 http://blog.csdn.net/amazing7/article/details/51918623
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout讲解
智玲君
11-24 3040
1，CoordinatorLayout协调布局 作用 根据一个layout（Dependency View）的操作来让另一个layout（child View）自动执行相关的操作，该child View具体执行什么相关操作取决于app:layout_behavior属性所指定的behavior类如何编写。 根据概念可以看出，协调布局的使用包含三个部分： 1.Dependency View 2.ch...
coordinatorlayout_一篇文章学会Coordinatorlayout+AppbarLayout
weixin_39647787的博客
11-30 351
点击上方蓝字关注??来源： 奔跑吧李博https://www.jianshu.com/p/cd93da2b7a24前言现如今，折叠式布局在App中相当常见，给人一种科技感，充满良好的用户体验。Coordinatorlayout+AppbarLayout+CollapsingToolbarLayout这三个臭皮匠联合起来用千变万化，啊，我重来没有见过如此超凡脱俗之效果。网上大多来不来就...
Material Design CoordinatorLayout+AppBarLayout+Toolbar
tony499074462的博客
07-11 450
1.CoordinatorLayout 简介 CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果 它作为最上层的View 它作为一个 容器与一个或者多个子View进行交互 2.AppBarLayout 它是继承与LinearLayo...
CoordinatorLayout+AppBarLayout顶部栏吸顶效果
Jason_Lee155的博客
05-24 6058
看需求/效果 如果要实现如下效果，顶部标题栏随着上滑隐藏，且能显示缩略文字标题，那么就要用到CoordinatorLayout+几个layout了。 控件简介 CoordinatorLayout遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的折叠悬浮效果。 作为最上层的View 作为一个 容器与一个或者多个子View进行交互 Google官方地址 Coordinator
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout全解析
跨语言，跨平台，跨应用
10-31 2242
1.概述CoordinatorLayout是Material风格的重要组件, 协调(Coordinate)其他组件, 实现联动。 官方解释：CoordinatorLayout is intended for two primary use cases: 1.As a top-level application decor or chrome layout 2.As a container for
协调者布局 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout（写法很粗糙，但是很全，实现功能为主）
Li_Yapeng的博客
02-15 404
CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout（写法很粗糙，但是很全，实现功能为主）
CoordinatorLayout+AppBarLayout实现联动
snailpeople的博客
08-31 710
CoordinatorLayout简介 CoordinatorLayout is a super-powered FrameLayout. CoordinatorLayout is intended for two primary use cases: 1.As a top-level application decor or chrome layout 2.As a cont
ViewPager+ScrollView滑动冲突处理
05-31
在使用ViewPager和ScrollView嵌套时，可能会出现滑动冲突的问题，解决方法如下： 1. 自定义ViewPager，重写onInterceptTouchEvent方法，处理滑动事件： ```java public class CustomViewPager extends ViewPager { private float mStartX; private float mStartY; public CustomViewPager(Context context) { super(context); } public CustomViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: mStartX = ev.getX(); mStartY = ev.getY(); break; case MotionEvent.ACTION_MOVE: float x = ev.getX(); float y = ev.getY(); float dx = Math.abs(x - mStartX); float dy = Math.abs(y - mStartY); if (dx > dy) { return super.onInterceptTouchEvent(ev); } else { getParent().requestDisallowInterceptTouchEvent(true); } break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: getParent().requestDisallowInterceptTouchEvent(false); break; } return super.onInterceptTouchEvent(ev); } } ``` 2. 在ScrollView中设置onTouchEvent事件，处理滑动事件： ```java public class CustomScrollView extends ScrollView { private float mStartX; private float mStartY; public CustomScrollView(Context context) { super(context); } public CustomScrollView(Context context, AttributeSet attrs) { super(context, attrs); } @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: mStartX = ev.getX(); mStartY = ev.getY(); getParent().requestDisallowInterceptTouchEvent(true); break; case MotionEvent.ACTION_MOVE: float x = ev.getX(); float y = ev.getY(); float dx = Math.abs(x - mStartX); float dy = Math.abs(y - mStartY); if (dy > dx) { getParent().requestDisallowInterceptTouchEvent(false); } break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: getParent().requestDisallowInterceptTouchEvent(false); break; } return super.onTouchEvent(ev); } } ``` 3. 在布局文件中使用自定义的ViewPager和ScrollView。 ```xml <com.example.CustomViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content"> <androidx.viewpager.widget.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="wrap_content" /> </com.example.CustomViewPager> <com.example.CustomScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> ... </LinearLayout> </com.example.CustomScrollView> ``` 以上是一种常见的解决滑动冲突问题的方法，在使用时需要注意不同的布局会有不同的处理方式，可以根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值