为了让App页面更加生动活泼，势必要求Toolbar在某些特定的场景上移或者下拉，如此才能满足酷炫的页面特效需要。...那么Android5.0也同时给出了相应的解决方案，即推出MaterialDesign库，通过该库中的AppBarLayout控件，对Toolbar加以包装，从而实现顶部工具栏的动态变化效果。...对于大家关心的额外功能，则主要有以下几点： 1、支持响应主体页面的滑动行为，即在主体页面上移或者下拉时，AppBarLayout能够捕捉到主体页面的滚动操作； 2、AppBarLayout捕捉到滚动操作之后...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。...然后主体向下滚动，滚到位后头部继续向下展开。 5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。
Scroll: 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏. enterAlways: 表示向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置. enterAlwaysCollapsed...layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...同理这是在展开时Title文字特点外形的设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景的设置 app:expandedTitleMarginStart 设置扩张时候
可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...上述属性在代码中的设置方法如下所示： setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...app:layout_scrollFlags="scroll|enterAlways"，声明工具栏的滚动行为标志； 其实真正运行的时候，Toolbar的高度是固定不变的，变化高度的是CollapsingToolbarLayout...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。...5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。 同时声明scroll和snap，滚动效果如下图所示： ?
译者：Feximin 总览 CoordinatorLayout 扩展了完成 Google's Material Design 中的多种滚动效果的能力。...view 上发生滚动事件时通知 AppBarLayout。...我们需要用一个点击事件来触发显示和隐藏。注意：由于这个已知的 issue，因此不要尝试在OnCreate() 方法中展开底部表。...属性，认为这样就可以将 pager 中的滚动事件向上传递然后就可以被CoordinatorLayout 管理。...使用 CoordinatorLayout 时出错的方式有很多种，当你发现出错时可以在这里添加提示。
从官方文档中我们可以看到： CoordinatorLayout是一个增强型的FrameLayout。...> 上述布局文件中，ToolBar标记了layout_scrollFlags滚动事件，那么当LinearLayout滚动时便可触发ToolBar中的layout_scrollFlags效果 即往上滑动隐藏...的下滑时ToolBar和TabLayout都会隐藏了。...enterAlwaysCollapsed 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度 exitUntilCollapsed...并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar
Part2: Material Design控件及动画总结 CoordinatorLayout+applayout+toolbar+drawerlayout实现toolbar上拉隐藏 动画效果参考...在XML中我们常常只设置app:layout_behavior属性来实现不同的滚动策略，这里CoordinatorLayout通过反射来实现behavior的实例化，现在就让我们来看看behavior到底是何方神圣...> 上面这段代码中，ToolBar标记了layout_scrollFlags滚动事件，那么当子View滚动时便可触发ToolBar中的layout_scrollFlags效果。...，那么子View的下滑时ToolBar和TabLayout都会隐藏了。...enterAlwaysCollapsed:当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
主要介绍了APPBarLayout和CollapsingToolbarLayout的基本用法，AppBarLayout主要用来实现在滚动的时候ToolBar的 隐藏于展示，CollapsingToolbarLayout...确定child View 是否有一个特定的兄弟View作为布局的依赖（即dependency） boolean onDependentViewChanged(CoordinatorLayout parent...= 0;//判断是否竖直滚动 } //在嵌套滑动进行时，对象消费滚动距离前回调 @Override public void onNestedPreScroll(CoordinatorLayout...0是向下滚动 if (dy >=0&&!...isAnimate&&child.getVisibility()==View.GONE) { show(child); } } //隐藏时的动画
在上一讲中我们讲了NestedScrolling机制，其实android很多有些常用的控件都是支持NestedScrolling机制的，如RecyclerView,NestedScrollView等，...2 横向滚动1 * type 滑动类型touch 0手指按下 1手指松开 */ public boolean onStartNestedScroll(@NonNull CoordinatorLayout...target消耗的滚动时候触发，这个是水平滚动的实时距离 * dyUnconsumed view处于滚动状态，但是并不是由target消耗的滚动时候触发，这个是竖直滚动的实时距离 * type 同上 *...onStopNestedScroll():看名字就知道了，当停止滑动时调用的方法，主要是执行当滑到一般停止时要怎么恢复还是隐藏商品列表的判断 onNestedFling(): 当手指快速一划时所触发的方法...，在代码中结合着Scroller，onNestedFling赋一个结束值给Scroller,Scroller会不断产生中间值直到结束为止。
本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。...在我们开始之前，有必要在这里澄清一下：在 CoordinatorLayout 中使用 CollapsingToolbarLayout 来实现折叠工具栏是没任何问题的。...举个例子，一个折叠工具栏应该根据用户的滚动进行展开和折叠，所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说，让我们看下我们所要尝试模拟做到的行为动作。...当然在实际 App 开发过程中我应该会使用 AppBarLayout 布局配合 Toolbar 控件吧。 如果在设计视图中查看这个布局，我们能看到布局所展示的工具栏处于展开的状态： ?...我们使用的是一个标准的 ImageView 控件，当其位于 ConstraintSet 下的 Constraint 元素中时，其主要的属性变成可以是 ConstraintLayout.LayoutParams
Google IO/15 大会发布的，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果...从图中我们可以知道 layout_scrollFlags=”scroll|enterAlways， 前面已经说到layout_scrollFlags=scroll的时候，这个View会 跟着 滚动...事件响应， layout_scrollFlags=“enterAlways”的时候 这个View会响应下拉事件 所以呈现出来的结果应该是我们在上拉的时候toolBar 会隐藏，下拉的时候toolBar...简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。...主要实现以下功能 - Collapsing title（可以折叠 的 标题 ） - Content scrim（内容装饰），当我们滑动的位置 到达一定阀值的时候，内容 装饰将会被显示或者隐藏
CoordinatorLayout帮助我们协调它所包含的子view之间的交互，这一点在我们后面讲如何根据滚动的变化让按钮动画隐藏与显示的时候有用。...我们只需让FloatingActionButton和ListView被包含在CoordinatorLayout中，然后使用layout_anchor 与 layout_anchorGravity 属性就可以了...Issues: 本文编写时，FAB 支持库仍然存在一些 bug，在 Kitkat 和 Lollipop 中分别运行示例代码，可以看到如下结果： Lollipop 中的 FAB： ?.../> 依附到list 接下来，我们可以选择将FAB和一个ListView, ScrollView 或者 RecyclerView 关联起来，这样按钮就会随着list的向下滚动而隐藏...fab:fab_type="mini" /> FAB的显示和隐藏 // 带动画的显示和隐藏 fab.show(); fab.hide(); // 不带动画的 fab.show(false); fab.hide
AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)： scroll：所有想滚动出屏幕的view...(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。...当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~...exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。
这个小库演示了如何将可折叠工具栏添加到您的应用程序中，并带有可移动和扩展的头像，类似于在Telegram Android应用中所看到的。...国外非常流行的一种设计~ 温馨提示：Collapsing Avatar Toolbar 的更多使用请直接看下方的代码例子片段，或查看官方文档。...collapsedTextSize" app:expandedTextSize="@dimen/expandedTextSize" > 3、 CoordinatorLayout...CoordinatorLayout>
控件互动实现滑动，总结就是CoordinatorLayout控件和app:layout_behavior来进行互动，进而CoordinatorLayout的子控件和app:layout_behavior...enterAlways:值设为enterAlways的View,当ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动。...View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。...最后snap这是属性是子View不会存在局部显示的情况，滚动Child View的部分高度，当我们松开手指时，Child View要么向上全部滚出屏幕，要么向下全部滚进屏幕。...当verticalOffset=0的时候即使整个展开的是时候要做的就是显示要显示的，隐藏要隐藏的设置，在设置透明度，同理当verticalOffset等于appBarLayout.getTotalScrollRange
协调布局CoordinatorLayout能够让内部的子控件互相配合着移动，这跟以往孤立的控件运动截然不同，协调运动的结果，意味着App画面更加流畅、自然，也更符合日常生活中的动作场景...一般我们使用CoordinatorLayout，都是结合悬浮按钮FloatingActionButton、应用栏布局AppBarLayout或者可折叠工具栏布局CollapsingToolbarLayout...从这张女孩照镜子的动画可以看到，当拖动左边女孩头像时，右边镜子里的头像也随之靠近或者远离，颇似现实生活中的镜像运动。...:layout_behavior="@string/appbar_scrolling_view_behavior"，表示通知AppBarLayout捕捉RecyclerView的滚动操作。...，在onDependentViewChanged方法中定义重物视图配合人力拉曳时的运动行为； 3、在布局文件中放置定滑轮、人力视图、重物视图，并给重物视图指定layout_behavior属性，说明重物视图的协调动作
其子View可以通过setScrollFlags()或在xml布局中通过app:layout_scrollFlags属性设置想要的滚动行为。...滚动到最顶层时，子View响应滚动事件。...： 此时可以看到，向上滚动，没有区别；向下滚动时，由于ImageView设置了enterAlways，因此首先滚动，直至出现了，然后ScrollView滚动，最后才是ToolBar显示。...可以理解为设置了enterAlways属性的View在向下滚动时的优先级高于ScrollView本身，可以实现分段滚动的效果。...exitUtilCollapsed用于设置向上滚动时的最小高度，吸顶的功能。
-- CoordinatorLayout是这次新添加的一个增强型的FrameLayout，通过它可以实现很多东西： 例如： 1.界面向上滚动逐渐隐藏Toolbar...将AppBarLayout放在CoordinatorLayout中，就可以实现滚动效果。...本例中，TabLayout在界面滚动时，随着Toolbar的逐渐隐藏，将占据Toolbar的位置， 达到节省屏幕空间，界面动画效果的目的。...enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...exitUntilCollapsed: 当视图会在滚动时，它一直滚动到设置的minHeight时完全隐藏。
= 0; } onNestedPreScroll 这个方法是在准备滚动之前调用的，它带有滚动偏移量 dy。...滚动时，日历也向上滚动，最多到当前选中日期那一行，滚动范围和当前选中日期有关。...折叠过程中，要将偏移量消费掉，这就用到了 consumed 这个参数，它是一个长度为 2 的数组，存放的是要消费掉的 x 和 y 轴偏移量。...Calendar.WEEK_OF_MONTH)); } }); 效果如下： [strip] 星期标题 上面效果可以看到，显示星期的标题也一起向上移动了，而且 MaterialCalendarView 是没办法隐藏这个标题的...这里包含了，快速滑动后惯性滑动到指定位置的效果，和没有快速滑动时，往就近的指定位置滑动这两种效果。
相信很多小伙伴在实际开发中都有这样的需求，一个列表滚动到某一位置，然后有一个按钮，回到顶部？很常见的一个效果，在以前我们一般都使用一个图片，放到那里。...请原谅我的配色 其实FloatingActionButton的用法很简单，主要是在布局文件中定义就可以了，这里先将一下各个属性的含义: 大家可以试一下，能更好的理解相应的内容的！...app:elevation 设置阴影效果 app:pressedTranslationZ 按下时的阴影效果 app:fabSize 设置尺寸normal对应56dp，mini对应40dp app:layout_anchor...，在25.1.0之后的版本，都是可以隐藏，但是怎么也显示不出来了。...监听滑动控件的滚动事件(我就是这么实现的，因为当你把design设置成25.1.0的时候，相应的过渡动画会出现很多的问题，所以这里建议这么去弄)这里的代码很简单，就是监听了一个滚动的方向和控件的显示状态
当我们运用 support design 中的组件时，我们应该拥有下面几个最基本的意识： 1....当 AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部时，我们用 enter 指代这种行为，对应的手势就是向下滑动。...当 AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动时，我们用 exit 指代这种行为，对应的手势是向上滑动。...exitUntilCollapsed 前面讲过 当 AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动时，我们用 exit 指代这种行为，对应的手势是向上滑动...也就是说 snap 代表一种吸附的行为，当一个滑动事件结束后，Toolbar 会向最接近它的边缘自行滚动。那什么是最近的概念呢？比如向上滑动时，如果滑过了一半它就向上滚动，否则滚动回原来的地方。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
