可以看到我在androidx.core.widget.NestedScrollView的外层嵌套了一个com.scwang.smartrefresh.layout.SmartRefreshLayout(...--NestedScrollView 里面只能包裹一个大的布局， 当这个布局长度超出手机展示的部分就可以滚动，其中overScrollMode="never"...的意思是隐藏掉滚动条到顶部和底部时的水波纹--> NestedScrollView...上图中红线框中的布局就是下拉刷新布局。...增加定位图标 之前我想了一下，定位的话还是给一个定位图标比较好，未获取到数据之前显示定位中，获取数据之后显示定位到的城市和定位图标，这样可以增加用户的体验，虽然很多人不会注意这个小细节，但是很多APP之所以受欢迎就是因为细节做得好
从官方文档中我们可以看到： CoordinatorLayout是一个增强型的FrameLayout。...，ToolBar标记了layout_scrollFlags滚动事件，那么当LinearLayout滚动时便可触发ToolBar中的layout_scrollFlags效果 即往上滑动隐藏ToolBar，...的下滑时ToolBar和TabLayout都会隐藏了。...enterAlwaysCollapsed 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度 exitUntilCollapsed...，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件
AppBarLayout是一个垂直的LinearLayout，实现了很多和协调布局一起合作的滚动属性。...> 父布局是CoordinatorLayout，然后主要两个布局：AppBarLayout以及NestedScrollView...，NestedScrollView设置了layout_behavior属性，这样AppBarLayout里面的布局就可以跟着一起滚动，不过由于这里还没给AppBarLayout里面的scrollFlags...滚动最顶层时，子View响应滚动事件，直至子View完全显示 exitUtilCollapsed：只要ScrollView向上滚动，子View立即响应滚动，直到达到最小高度 snap：当Scrollview...向下滚动时，当ScrollView滚动顶部了，才继续滚动了。 snap snap是一个根据View在屏幕上显示范围进行调整的一个属性，看下效果其实就明白是怎么回事了。
当渲染一个 Snackbar 时，它通常出现在可见屏幕的底部。Floating action button 必须上移以便腾出空间。 ?...接下来，我们必须使用一个叫做 AppBarLayout 的容器布局来使 ToolBar 响应滚动事件： 我们需要在 AppBarLayout 和 期望被滚动的 View 之间定义一个关联。...我们需要用一个点击事件来触发显示和隐藏。注意：由于这个已知的 issue，因此不要尝试在OnCreate() 方法中展开底部表。...当滚动事件发生时，CoorinatorLayout 尝试去触发那些被声明为依赖项的子 View。
我们仍然从它的touch事件处理流程开始看： 在它的 onInterceptTouchEvent 中，当手势是 MOVE 的时候, 如果是垂直方向滑动并且达到滑动定义的距离，就开始执行滑动： 当手势是...接下来看下，如果拦截下来了， NestedScrollView 是如何处理触摸事件的： DOWN 的时候直接触发嵌套滑动: MOVE 的时候 在 mIsBegingDragged 的false但是距离还没到的时候...，让父布局不要拦截事件， 当 mIsBegingDragged 为true的时候，分发嵌套预滚动事件。...CoordinatorLayout 在布局上其实和我们常见的 FrameLayout 没有差别，但是它内部实现了嵌套滑动的接口来支持包裹一个可以支持嵌套滑动的Scroll 组件，并且把交互抽象到 Behavior...这里的 bottomsheet Dialog 的布局，其实是 design 包里面内置的，我们也可以自己实现这个dialog，布局是这样的： 这里需要让它第二个子view传入一个 behavior
对于大家关心的额外功能，则主要有以下几点： 1、支持响应主体页面的滑动行为，即在主体页面上移或者下拉时，AppBarLayout能够捕捉到主体页面的滚动操作； 2、AppBarLayout捕捉到滚动操作之后...RecyclerView是其中一个特工，它可用来替代ListView和GridView；替代ScrollView的则另有其人，它便是嵌套滚动视图NestedScrollView，在Android5.0之后的...NestedScrollView继承自FrameLayout，其用法与ScrollView相似，如都必须且只能带一个直接子视图，都是允许视图上下滚动等等。...同理，拉动AppBarLayout也有类似情况，当松开手指后，AppBarLayout得判断要不要继续向上收缩，或是继续向下展开。...然后主体向下滚动，滚到位后头部继续向下展开。 5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。
enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完...exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。...当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~...假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。...exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
引言 最近，在做公司一个design折叠效果的时候遇到个问题，就是我们本身app的方法数太多了，dex分包技术还没搞定。不得不尽量缩减一些不必要的包、类。...enterAlways - 实现quick return效果, 当向下移动时，立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...嵌套的listView滚动时无响应bug。...题外话2 java.lang.IllegalStateException: View can not be anchored to the the parent CoordinatorLayout 当我们给一个
今天介绍的组件是NestedScrollView，大部分的App首页都会用到这个组件。 NestedScrollView 可以在其内部嵌套其他滚动视图的组件，其滚动位置是固有链接的。...在普通的ScrollView中， 如果有一个Sliver组件容纳了一个TabBarView，它沿相反的方向滚动（例如，允许用户在标签所代表的页面之间水平滑动，而列表则垂直滚动），则该TabBarView...滚动隐藏AppBar 比如实现如下场景，当列表滚动时，隐藏AppBar，用法如下： NestedScrollView( headerSliverBuilder: (BuildContext context...，用法如下： NestedScrollView( scrollDirection: Axis.horizontal, reverse: true, ... ) scrollDirection...reverse参数表示反转滚动方向，并不是由垂直转为水平，而是垂直方向滚动时，默认向下滚动，reverse设置false，滚动方向改为向上，同理水平滚动改为水平向左。
SliverList ， 当我们滑动时其实就是它在 Viewport 里的位置发生了变化； 了解完这个基础理念后，就可以知道一般情况下 Viewport 和 Scrollable 的实现都是很通用的...RenderBox 在 SingleChildScrollView 内部使用的是 RenderBox ，那么在布局过程中自然而然会把整个 child 都进行布局和计算，绘制时主要也是通过 offset ...和 clip 等来完成移动效果，这样的实现当 「child 比较复杂或者过长时，性能就会变差」。... 本身是一个 ChangeNotifier， 主要是用来当 markNeedsLayout 时对外发出通知，比如对 header 部分； 所以 NestedScrollView 本质上两个 Viewport... 之间的嵌套，那他们之间是滑动关系是如何处理的？
SliverList 在 Viewport 里产生滑动； 黄色的部分就是 SliverList ， 当我们滑动时其实就是它在 Viewport 里的位置发生了变化； 了解完这个基础理念后，就可以知道一般情况下...RenderBox 在 SingleChildScrollView 内部使用的是 RenderBox ，那么在布局过程中自然而然会把整个 child 都进行布局和计算，绘制时主要也是通过 offset...和 clip 等来完成移动效果，这样的实现当 child 比较复杂或者过长时，性能就会变差。...本身是一个 ChangeNotifier ， 主要是用来当 markNeedsLayout 时对外发出通知，比如对 header 部分； 所以 NestedScrollView 本质上两个 Viewport...之间的嵌套，那他们之间是滑动关系是如何处理的？
京东首页 可见，在向上滑动页面时，当tabLayout滑动到顶部时，外层RecyclerView停止滑动，此时tabLayout即为吸顶状态，接着会 滑动ViewPager中的内层RecyclerView...向下滑动时，如果tabLayout是吸顶状态，那么会先滑动内层RecyclerView，然后再滑外层RecyclerView。 那么，如果我们 直接 按上述布局结构来实现，会是京东这种效果吗？...所以按照正常处理滑动冲突的思路处理--当tab没到顶部时，parent拦截事件，tab到顶部时 parent就不拦截事件，但是由于手指没抬起来，所以这一事件序列还是继续给parent，不会到内部RecyclerView...通常我们要自行手动处理的就是RecyclerView作为嵌套滑动子view的情况。NestedScrollView一般直接作为根布局用来解决嵌套滑动。...作者最后建议使用RecyclerView多布局。 但其实在真实应用中，可能 头部 和 列表 的数据来自不同的接口，当列表的数据请求失败时要展示缺省图，但头部还是会展示。
在上一讲中我们讲了NestedScrolling机制，其实android很多有些常用的控件都是支持NestedScrolling机制的，如RecyclerView,NestedScrollView等，...waimaidetails.gif 这种效果假如不用CoordinatorLayout其实还是有点难麻烦的，不过有了CoordinatorLayout就简单了，首先我们看一下布局文件： 布局里，我们看到一个比较特殊的东西app:layout_behavior="@string/goods_list_behavior"，这是什么呢？...View是我们需要的View时，返回true */ boolean layoutDependsOn(@NonNull CoordinatorLayout parent, @NonNull GoodsListView...onStopNestedScroll():看名字就知道了，当停止滑动时调用的方法，主要是执行当滑到一般停止时要怎么恢复还是隐藏商品列表的判断 onNestedFling(): 当手指快速一划时所触发的方法
通过 AppBarLayout 实现一个可伸缩折叠的 Toolbar 也是本文的目的。 当我们运用 support design 中的组件时，我们应该拥有下面几个最基本的意识： 1....当 AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部时，我们用 enter 指代这种行为，对应的手势就是向下滑动。...当 AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动时，我们用 exit 指代这种行为，对应的手势是向上滑动。...也就是说 snap 代表一种吸附的行为，当一个滑动事件结束后，Toolbar 会向最接近它的边缘自行滚动。那什么是最近的概念呢？比如向上滑动时，如果滑过了一半它就向上滚动，否则滚动回原来的地方。...如何理解视差？就是滚动的速度不同，造成的视觉差异效果。也就是说 CollapsingToolbarLayout 中有的 view 滚动的快一些，其它的滚动的慢一些。
我们就折叠一个图片ImageView吧，折叠之后显示一个标题TextView。如下图所示 ?...到这里我们就已经实现了这个折叠式，当你点击这个蓝色背景标题往上面滑动时，ImageView就会折叠起来，往下滑动时图片就会展开。...为了使体现更好可以AppBarLayout下面放一个滚动条，不要用ScrollView而是NestedScrollView因为这里你是要联动的。...的总高度就会超过手机屏幕，形成滑动之后图片向上面展示的效果，其实加了NestedScrollView之后，即使里面什么东西都没有，你照样可以滚动，但是如果你用ScrollView就不行，它里面就必须要有东西才行...，我们看一下布局 ?
ScrollView和RecyclerView滑动冲突问题方法1：我们可以把scrollview换成androidx.core.widget.NestedScrollView滚动冲突 --> NestedScrollView android:layout_width...getActivity()) { @Override public boolean canScrollVertically() { return false; }});如果无法解决，在布局文件中的...RecycleView的外部套一个RelativeLayoutGridView在NestedScrollView失去高度显示不全在使用Android的ScrollView里面嵌套GridView时，设置...-- 原生Gridview自带滚动条，继承此类重写方法去掉滚动 --><com.example.view.MyGridView android:id="@+id/menu_view" android
而AppBarLayout又必须是CoordinatorLayout的子布局。 本文来做一个额外的活动作为水果的详情展示界面，当点击水果列表卡片的时候就进入这个界面。...接着我们来编写这个布局。 Activity_fruit.xml中的内容主要分为两部分，一个是水果标题栏，一个是水果内容详情。...其中， scroll表示CollapsingToolbarLayout会随着水果内容详情的滚动一起滚动， exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完成折叠之后就保留在界面上...> 我们知道ScrollView允许使用滚动的方式来查看屏幕以外的数据， 而NestedScrollView...由于CoordinatorLayout本身已经可以响应滚动事件了， 因此我们在它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。
这里Toolbar会一直显示 ---- Toolbar和NestedScrollView联动 前面不能联动，是因为没有接收的behavior 我们在Toolbar外面添加一个 android.support.design.widget.AppBarLayout...再给Toolbar添加一个 app:layout_scrollFlags="scroll|snap|enterAlways" 还有对应的android.support.v4.widget.NestedScrollView...，只有当滚动视图到达顶部时才扩大到完整高度。...这个时候，我们想做一个pending的TabLayout 滑动的时候，隐藏上面的Toolbar 于是， AppBarLayout中，Toolbar下面，添加一个TabLayout Toolbar添加...这里和前面还不太一样，这里是CollapsingToolbarLayout 所以，我们简单在CollapsingToolbarLayout中，添加一个ImageView（自己从小学就比较崇拜的欧拉）
style: TextStyle(fontSize: 30.0))), ), ])); } } 这里分别给出不同的动图来查看三个属性的影响 如果设置了 floating 属性，当有下拉动作时...SliverPersistentHeader Flutter 中，为我们提供了这么一个作为头部的部件 SliverPersistentHeader，这个部件可以根据滚动的距离缩小高度，有点类似 SliverAppBar...SliverPersistentHeaderDelegate 需要提供一个最大值，最小值，展示内容，以及更新部件条件 比如我们需要展示一个最大高度 300，最小高度 100，居中的文字，那么我们可以这么写这个代理类...糟透了的翻译 X 1：一个内部能够嵌套其他滚动部件，并使其滚动位置联结到一起的滚动部件 /// The most common use case for this widget is a scrollable...innerBoxIsScrolled); 糟透了的翻译 X 3：用于构建 NestScrollView 的头部部件，innerBoxIsScrolled 主要用来控制 SliverAppBar 的 forceElevated 属性，当内部内容滚动时
老规矩，先上图，看看是不是你想要的，美团效果： 最终效果： 来一个图形分析 接下来我要写一个简单示例，先分析一下布局，见下图，最外层是NestedScrollView，之后嵌套一个LinearLayout...头部，中间TabLayout选择器，底部一个ViewPager ViewPager高度需要动态控制，看自己的需求了，如果是美团那种效果，就是ViewPager高度 = NestedScrollView高度...那么就需要先重写NestedScrollView控件，用于控制最大的滑动距离，当达到最大滑动距离，再分发给RecyclerView滑动！...* @param dy 表示 View 本次 y 方向的滚动的总距离 * @param consumed 表示父布局消费的水平和垂直距离 * @param type...setText(tabTextData[i]).setIcon(tabIconData[i]) } } /** * 获取一个title布局 * 我这里就用三张图片模拟的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
