首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android开发笔记(一百三十五)应用栏布局AppBarLayout

那么Android5.0也同时给出了相应的解决方案,即推出MaterialDesign库,通过该库的AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏的动态变化效果。...所以,搜遍Android的SDK源码,总共也只有三个控件符合这个条件,它们是RecyclerView、NestedScrollView,以及SwipeRefreshLayout,布局文件中使用的名称如下所示...2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...scroll标志是基础标志,其他标志都要配合该标志使用;因为只有通过scroll声明Toolbar是可以滚动的,才有后面的各种各样滚动。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。

1.8K40

【翻译】MotionLayout实现折叠工具栏(Part 1)

本系列教程,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...我们开始之前,有必要在这里澄清一下: CoordinatorLayout 中使用 CollapsingToolbarLayout 来实现折叠工具栏是没任何问题的。...举个例子,一个折叠工具栏应该根据用户的滚动进行展开和折叠,所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说,让我们看下我们所要尝试模拟做到的行为动作。...这里的代码展示了一个折叠工具栏,应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...这其中内部原理非常复杂,它由 RecyclerView 的滚动行为所驱动。 为了理解这两个 ConstrainSet 的定义,让我们先假设这里只有两件事情需要进行控制。

1.9K31
您找到你想要的搜索结果了吗?
是的
没有找到

Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout

折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...上述属性代码的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...下面是标题栏折叠时显示渐变图片的效果图: ?...要实现图片的折叠渐变,其实很简单,只需Toolbar节点前面加个ImageView节点的声明即可,下面是演示折叠模式使用的布局文件例子: <android.support.design.widget.CoordinatorLayout...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。

3K30

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

”基本实现两个功能: 作为顶层布局 调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...,它可以控制包含在CollapsingToolbarLayout的控件响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...CollapsingToolbarLayout的子View可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时,当CollapsingToolbarLayout...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...我在做这里的时候遇到一个问题,那就是CollapsingToolbarLayout里的Title的问题,一般默认是显示的,即使你不写,它也有会一个默认值一直显示在那里,等折叠收缩完的时候,停留在标题工具栏

2.2K90

【翻译】MotionLayout实现折叠工具栏(Part 2)

通过上一篇文章我们了解了基本的折叠工具栏动画行为,使用的是 MotionLayout ,第一次尝试的效果与 CoordinatorLayout 中使用 CollapsingToolbarLayout...让我们先看下 CoordinatorLayout 版本的实现效果,注意图片在工具栏几乎快要完全折叠之前是不会开始渐变到主色彩动画的: ?...因此我们得到的是一个非常平滑的过渡动画,从工具栏开始发生折叠一直到工具栏完全达到折合状态为止。这也很好的解释了我们所看到的 MotionLayout 对动画行为的实现。...的位置,而第二个 90 的位置,同样的道理,这意味着位于过渡动画的 90% 的位置。...最终标题文本会走在工具栏折叠动画之前,接着折叠完全结束的时候直接回落到正确的位置上: ?

1.6K30

Android5.0和6.0之后新增的控件说明

SwipeRefreshLayout Android 5.0 抽屉布局 DrawerLayout Android 5.0 滑动面板布局 SlidingPaneLayout Android 5.0 嵌套滚动视图...FloatingActionButton Android 5.0 底部弹窗 BottomSheetBehavior Android 6.0 应用栏布局 AppBarLayout Android 5.0 可折叠工具栏布局...这个与系统版本有关,每个版本的android.jar是固定的,有该内核定义的控件才能正常调用,没在内核定义的控件在运行时会扔出类找不到的异常。...比如水波图形RippleDrawable和矢量图形VectorDrawable,这两个控件Android5.0之后的系统内核中提供,所以只有系统版本不低于5.0的手机才能使用它们,运行4....*系统的手机是无法正常调用这两个控件的。 2、第二类是v4兼容库提供的控件,位于SDK的android-support-v4.jar

1.2K20

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

1.1:CoordinatorLayout设置   前面的添加依赖,在上一篇已经说过,在这就不在重复了,协调者布局这次又加入了一个新的布局CollapsingToolbarLayout(折叠工具栏布局...),很明显上面的效果图中的工具栏上滑的同时把图片折叠进去了,这是一个动画效果,如果不是MaterialDesign库的强大,这都是我们自己写。...竟然折叠的部分是toolbar和背景图片,这就理所应当的把这两个空间写在CollapsingToolbarLayout,因为上面协调者布局和appbar布局很简单,这里就不在写了,只贴出折叠布局代码(...的使用基本和上一篇是一样的。...2.1:布局书写 这里的布局和上面是一样的,只是把imageview换成了LinearLayout布局,该布局写上我们熟悉的输入框和图片按钮即可, 最外层-->里层还是:CoordinatorLayout

1.5K100

Android开发笔记(一百三十七)自定义行为Behavior

一般我们使用CoordinatorLayout,都是结合悬浮按钮FloatingActionButton、应用栏布局AppBarLayout或者可折叠工具栏布局CollapsingToolbarLayout...如果按照普通的实现方式,此种照镜子的动画效果,得给两个视图分别注册监听器,然后A视图移动之际,同时触发B视图的移动行为。...2、两个函数,layoutDependsOn用来判断当前的几个视图是否存在依赖关系,返回true表示存在依赖,反之则不存在依赖;也就是说,只有存在依赖关系的两个视图才会夫唱妇随,缺一不可。...女孩照镜子是水平方向上协调运动的例子,生活还有垂直方向上协调运动的例子,比如使用定滑轮吊起重物,滑轮一端绳子吊着重物,另一端绳子连着人力;人力拉动绳子,重物就被吊上来,人力松开绳子,重物就会掉下来...,onDependentViewChanged方法定义重物视图配合人力拉曳时的运动行为; 3、布局文件中放置定滑轮、人力视图、重物视图,并给重物视图指定layout_behavior属性,说明重物视图的协调动作

1.2K20

自定义 Behavior,实现嵌套滑动、平滑切换周月视图的日历

布局,对子控件配置 app:layout_behavior 属性,实现对应的联动效果。所以这里我们需要自定义日历和列表的两个 Behavior。 Behavior 有两种实现联动的方式。...= 0; } onNestedPreScroll 这个方法是准备滚动之前调用的,它带有滚动偏移量 dy。...分析一下这个折叠效果。滚动时,日历也向上滚动,最多到当前选中日期那一行,滚动范围和当前选中日期有关。...折叠过程,要将偏移量消费掉,这就用到了 consumed 这个参数,它是一个长度为 2 的数组,存放的是要消费掉的 x 和 y 轴偏移量。...由于我们的滚动折叠效果是 onNestedPreScroll 实现的,所以要想办法触发这个方法。

3.1K10

Android 三级NestedScroll嵌套滚动实践

三级嵌套滚动 一个常见的嵌套滚动例子是 CoordinatorLayout/AppbarLayout – RecyclerView, 实现的效果是向上滑动列表时,会先将 AppbarLayout 向上滑动直到完全折叠...所谓三级嵌套滚动两级嵌套滚动之上再添加一个 Parent,这里为了表述方便将三级嵌套滚动的三级由上到下分别称为 Grand Parent Child。...二级嵌套滚动滚动处理时机只有三个阶段:preScroll、scroll 和 afterScroll。...根据上图即刻首页滑动的实现思路就很简单了: onPrePreScroll 执行折叠刷新动画的逻辑,onAfterAfterScroll 执行展开刷新动画的逻辑。...onPreScroll 执行折叠 AppbarLayout 的逻辑,onAfterPreScroll 执行搜索框折叠的逻辑。

1.5K30

CoordinatorLayout+AppBarLayout实现上滑隐藏ToolBar-Android M新控件

滚动事件,那么CoordinatorLayout布局里其它标记了app:layout_behavior的子View(LinearLayout、RecyclerView、NestedScrollView...> 上述布局文件,ToolBar标记了layout_scrollFlags滚动事件,那么当LinearLayout滚动时便可触发ToolBar的layout_scrollFlags效果 即往上滑动隐藏...enterAlwaysCollapsed 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有滚动视图到达顶部时才扩大到完整高度 exitUntilCollapsed...固定的Tab,TabLayout居中显示 ? 可滑动的Tab ?...并且给这些组件设置如下属性来告诉CoordinatorLayout,该组件是带有滑动行为的组件,然后CoordinatorLayout接受到滑动时会通知AppBarLayout 可滑动的Toolbar

1.9K30
领券