【翻译】MotionLayout实现折叠工具栏（Part 1） 2018-08-13 by Liuqingwen | Tags: Android 翻译 | Hits ?...本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。...举个例子，一个折叠工具栏应该根据用户的滚动进行展开和折叠，所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说，让我们看下我们所要尝试模拟做到的行为动作。...这其中内部原理非常复杂，它由 RecyclerView 的滚动行为所驱动。 为了理解这两个 ConstrainSet 的定义，让我们先假设这里只有两件事情需要进行控制。...我们使用的是一个标准的 ImageView 控件，当其位于 ConstraintSet 下的 Constraint 元素中时，其主要的属性变成可以是 ConstraintLayout.LayoutParams
本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。...因此我们得到的是一个非常平滑的过渡动画，从工具栏开始发生折叠一直到工具栏完全达到折合状态为止。这也很好的解释了我们所看到的在 MotionLayout 中对动画行为的实现。...目前来说，发生的情况是：图片的透明度在过渡动画还没有达到 60% 之前是不会发生变化的（也就是至少超过一半的折叠状态下不发生变化），接下来会慢慢开始淡出，直到工具栏达到 90% 折叠时完全透明。 ?...最终标题文本会走在工具栏折叠动画之前，接着在折叠完全结束的时候直接回落到正确的位置上： ?...你只需要记得在最终发布版本中要关闭这个功能——我建议定义一个布尔值资源，在布局中使用，然后你就可以在发布版本时总能设置它为 false 就可以了。 好吧，这次就到这里。
那么Android5.0也同时给出了相应的解决方案，即推出MaterialDesign库，通过该库中的AppBarLayout控件，对Toolbar加以包装，从而实现顶部工具栏的动态变化效果。...下面是AppBarLayout结合RecyclerView实现的工具栏向上滚动效果截图： ?...NestedScrollView继承自FrameLayout，其用法与ScrollView相似，如都必须且只能带一个直接子视图，都是允许视图上下滚动等等。...2、AppBarLayout内部的高度也可能变化，比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout，有关可折叠工具栏布局的详细介绍参见《Android开发笔记（一百三十六）可折叠工具栏布局...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。
可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...上述属性在代码中的设置方法如下所示： setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...折叠系数可通过属性app:layout_collapseParallaxMultiplier配置，该属性为1.0时，折叠效果同pin模式即固定不动；该属性为0.0时，折叠效果等同于none模式，即也跟着移动相同距离...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。...具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。
深入理解布局 深入理解布局指南 介绍了布局容器的相关概念，它提供了一个整体框架，可帮助开发者思考如何在屏幕上排列导航栏、工具栏和内容等界面元素。...包括适当缩放以展示更多内容，如示例中的副标题和日期，以及较小的组合技术，例如在紧凑型的布局中对内容进行视觉分组并保持其相关性等。...△ 折叠设备的三种常见姿态 与其他大屏幕设备一样，我们需要多想想用户会怎样握持未折叠设备？如平板电脑，部分屏幕区域难以用大拇指触及，用户也很难腾出整只手来自由操控屏幕。...△ 平均分布在铰链两侧的八栏网格 (蓝背景) 适配示例 现在我们来看如何在运行期间利用好折叠状态。Jetpack Window Manager 库提供了相应的 API，可以检测应用窗口是否存在折叠。...，当折叠导致内容视图被割裂时，我们应该及时更新布局参数。
应用在大尺寸屏幕 (平板、可折叠设备甚至是 Chrome OS 和台式个人电脑) 上的使用体验是我们的关注点之一: 在过去的一年中，大尺寸屏幕的设备越来越受欢迎，用户使用率也越来越高，如今已增长到 2.5...△ 平板横屏时的搜索应用栏 (窄模式) △ 平板竖屏时的搜索应用栏 (宽模式) 此前，我们通过在搜索 Fragment 的视图层次中的应用栏部分使用 标签，并提供两种不同版本的布局来实现此功能...在窄屏幕设备上，您会看到一列项目，它们会在点击时展开或折叠。在宽尺寸屏幕上，这些列表项会转换为一格一格的卡片，卡片上直接显示了详细的内容。 △ 左图: 窄屏幕显示 Codelabs。...为了让元素能够一直滚动显示到 RecyclerView 的边缘，需要设置 android:clipToPadding="false"。 屏幕越多样越好 Android 一直是个多样化的硬件生态系统。...随着更多的平板和可折叠设备在用户中普及，请确保在这些不同尺寸和屏幕比例中测试您的应用，这样一些用户就不会觉得自己被 "冷落" 了。
-- 其他视图组件 --> 使用merge标签来合并布局 使用merge标签可以将多个布局文件合并为一个...setInitialPrefetchItemCount(10) 滑动优化 在onCreateViewHolder中进行必要的初始化操作 在ViewHolder的创建阶段，进行必要的初始化操作，如设置监听器等...，避免在onBindViewHolder()中进行耗时操作，提高滚动性能。...(recyclerView, newState) // 判断滚动状态是否为停止滚动状态 if (newState == RecyclerView.SCROLL_STATE_IDLE...被回收时及时释放相关资源，避免内存泄漏和资源浪费。
exitUntilCollapsed：当你定义了一个minHeight，此布局将在滚动到达这个最小高度的时候折叠。 snap：当一个滚动事件结束，如果视图是部分可见的，那么它将被滚动到收缩或展开。...，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。...pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。...应该说在MD中，RecyclerView代替了ListView，而NestedScrollView代替了ScrollView，他们两个都可以用来跟ToolBar交互，实现上拉下滑中ToolBar的变化。
简评：Android Support Library 26 中终于实现了一个等待已久的功能： RecyclerView 的快速滚动 。...Android 官方早就在建议开发者使用 RecyclerView 替代 ListView，RecyclerView 也确实表现要好于 ListView，除了没有快速滚动，就像下面这样： ?...现在 RecyclerView 终于原生支持了快速滚动，现在就让我们来看一下怎么实现： 首先，在 build.gradle 中添加依赖： dependencies { .......</android.support.constraint.ConstraintLayout 其中增加了几个属性： fastScrollEnabled： boolean 类型，决定是否启用快速滚动...，当设置为 true 时需要设置下面的四个属性。
**方法2：**在build.gradle文件中添加依赖 implementation 'androidx.recyclerview:recyclerview:1.1.0' Jetbrains...全家桶1年46，售后保障稳定 第二步：添加布局文件 在布局文件activity_main.xml中先添加RecyclerView控件 <?...GridLayoutManager 网格布局管理器 线性布局管理器 这三种布局管理器都是通过setLayoutManager方法来设置 LinearLayoutManager 还可以设置横向滚动，只需将前面...); 也能设置横向滚动 mRecyclerView.setLayoutManager(layoutManager); ItemDecoration 通过给 设置ItemDecoration 来装饰Item...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
SwipeRefreshLayout Android 5.0 抽屉布局 DrawerLayout Android 5.0 滑动面板布局 SlidingPaneLayout Android 5.0 嵌套滚动视图...NestedScrollView Android 5.0 appcompat-v7 工具栏 Toolbar Android 5.0 recyclerview-v7 循环视图 RecyclerView...FloatingActionButton Android 5.0 底部弹窗 BottomSheetBehavior Android 6.0 应用栏布局 AppBarLayout Android 5.0 可折叠工具栏布局...使用v4控件唯一需要注意的地方，是布局文件中要引用完整路径的控件名称，如抽屉布局android.support.v4.widget.DrawerLayout、下拉刷新布局android.support.v4...这部分控件数量最多，实现的界面特效最丰富，而且互相之间存在依赖关系，如design库依赖于appcompat-v7库，部分design控件如NavigationView还依赖于recyclerview-v7
AppBarLayout一般用于赋予Toolbar（不限于Toolbar）滚动行为，AppBarLayout是一个垂直的LinearLayout，实现了Material Design中app bar的scrolling...AppBarLayout只有作为CoordinatorLayout的直接子View时才能正常工作，为了让AppBarLayout能够知道何时滚动其子View， 我们还应该在CoordinatorLayout...布局中提供一个可滚动View，如：RecyclerView 布局文件 <?...4.exitUntilCollapsed--需要和minHeight一起配合使用，否则没效果 Toolbar完全展开时不遮挡滑动控件，消失效果变为折叠成最小高度，其他和scroll相同 ?...5.snap Toolbar折叠的高度大于原高度的50%，则完全折叠，否则恢复展开，同样的展开的高度大于50%，则完全展开，否则恢复折叠 ?
当我们引入RecyclerView的时候，恰好是压死骆驼的最后一根稻草，故不得不采用其他方案来代替RecyclerView 和 CollapsingToolbarLayout实现的折叠效果。...app:layout_scrollFlags="scroll|exitUntilCollapsed" 表示CoordinatorLayout的依赖元素滚动的时候，进行折叠。...enterAlways - 实现quick return效果, 当向下移动时，立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...题外话：直接使用RecyclerView折叠动画不平滑问题 在stackoverflow上找到如下解决方案，大致是由于google官方留的Behavior坑。
所以通过 NestedScrolling(Parent2/Child2) 实现嵌套滚动时，当你触发了一个 fling 时，也可以做很顺滑连贯的交替滚动，而 1 就很难达到相同的效果。...三级嵌套滚动 一个常见的嵌套滚动例子是 CoordinatorLayout/AppbarLayout – RecyclerView, 实现的效果是向上滑动列表时，会先将 AppbarLayout 向上滑动直到完全折叠...这里的滑动逻辑是： 向上滑动时，最先折叠刷新动画，向下滑动时最后展开刷新动画。 向上滑动列表时先折叠 AppbarLayout，AppbarLayout 完全折叠后再折叠搜索框。...根据上图即刻首页滑动的实现思路就很简单了： onPrePreScroll 中执行折叠刷新动画的逻辑，onAfterAfterScroll 中执行展开刷新动画的逻辑。...onPreScroll 中执行折叠 AppbarLayout 的逻辑，onAfterPreScroll 中执行搜索框折叠的逻辑。
在布局文件中，可以定义各种视图元素，如 TextView、Button、ImageView 等。每个视图元素都可以设置一些属性，如宽度、高度、边距、背景颜色等。...这些属性可以用来控制视图元素在布局中的位置和大小。 布局文件的解析过程 当应用程序启动时，Android 系统会将布局文件解析成一个视图层次结构，然后将其加载到内存中。...使用 RecyclerView 来优化列表布局。 在应用程序中，列表布局是最常用的视图之一。...时，还可以使用 RecyclerView.Adapter 和 RecyclerView.ViewHolder 来实现数据和视图之间的绑定，从而更好地管理和展示列表数据。...使用 Lint 来检查布局文件中的问题。 在编写布局文件时，我们可能会遇到一些常见的问题，如布局文件过大、布局文件层次结构过深、布局文件加载时间过长等。
如何在recyclerView 中使用 MVVM + DataBinding 将VM放在holder就好。...本人是在recyclerView 从内存中重启的时候 ，想保存一个排序和原始数据恢复位置时遇到。...基本上看stackoverflow和issue下面的回答，有帮助的大意是：recyclerView 的数据刷新不同步（导致滚动位置无法定位或调用scrollToPosition时不同步）。...的item进行折叠。...当recyclerView的数据项不满一屏时，且此时recyclerView的item由展开到折叠，此时存在视觉上的ui缓存。即该折叠项依然占据展开式的位置。
implementation “androidx.constraintlayout:constraintlayout:2.0.1” 随着 2.0 版本的发布，我们专门在 github 上创建了 Constraint...Flow Flow 是一种新的虚拟布局，它专门用来构建链式排版效果，当出现空间不足的情况时，它能够自动换行，甚至是自动延展到屏幕的另一区域。...您可以对视图的移动、滚动、缩放、旋转、淡入淡出等一系列动画行为进行自定义，甚至可以定义各个动画本身的自定义属性。它还可以处理手势操作所产生的物理移动效果，以及控制动画的速度。...这样一来，在协调多个视图的动画时，就可以做到对各个细节进行精细操控。...尤其是在以下两种情况下，MotionLayout 会比其它动画构建工具更胜一筹: 可追溯的动画 - 由其它输入驱动的动画，例如工具栏在滚动时会出现的折叠效果 状态转换 - 由状态更改驱动的动画，例如用户进入某一界面后
折叠效果 大家可能有看过 RecyclerView 和 AppBarLayout 联动的效果，这种效果需要给 RecyclerView 配置 Behavior： app:layout_behavior=...= 0; } onNestedPreScroll 这个方法是在准备滚动之前调用的，它带有滚动偏移量 dy。...分析一下这个折叠效果。滚动时，日历也向上滚动，最多到当前选中日期那一行，滚动范围和当前选中日期有关。...折叠过程中，要将偏移量消费掉，这就用到了 consumed 这个参数，它是一个长度为 2 的数组，存放的是要消费掉的 x 和 y 轴偏移量。...由于我们的滚动折叠效果是在 onNestedPreScroll 实现的，所以要想办法触发这个方法。
Note: 目前不推荐在RecyclerView中使用 ConstraintLayout，在ConstraintLayout1.1.2版中，性能还是表现不佳，后续的版本可能这个问题就解决了，需要持续关注...共用RecycledViewPool 在嵌套RecyclerView中，如果子RecyclerView具有相同的adapter，那么可以设置 RecyclerView.setRecycledViewPool...，来提高滚动的流畅性。...优化滑动操作 设置 RecyclerView.addOnScrollListener();来在滑动过程中停止加载的操作。...处理刷新闪烁 调用notifyDataSetChange时，适配器不知道整个数据集中的那些内容以及存在，再重新匹配ViewHolder时会花生闪烁。
这样，被折叠的 view 将会首先退出，留下在顶部固定着的元素。 至此，你应该意识到这个 ToolBar 响应了滚动事件。 ?...创建折叠效果 如果想创建折叠 ToolBar 的效果，我们必须将 ToolBar 包含在 CollapsingToolbarLayout 中： <android.support.design.widget.AppBarLayout...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画，例如使用一个在折叠的同时可以渐隐的 ImageView。在用户滑动时，标题的高度也可以改变。 ?...滚动事件不会响应其他任何布局。 使用 CoordinatorLayout 时出错的方式有很多种，当你发现出错时可以在这里添加提示。...然而，它似乎不影响滚动，如这篇博文所述。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
