文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CoordinatorLayout使用全解析

enterAlwaysCollapsed：假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完...，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。...当CollapsingToolbarLayout的子布局设置了parallax模式时，我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子，值为：0~...假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。

2.2K20

CoordinatorLayout与滚动的处理

，app:layout_behavior的为自定义的效果，当下滑时，fab消失，上滑时fab显示，详情请查看本人博客 Floating Action Button-Android M新控件 运行图 ?...假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。 ?...exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。...---- Creating Collapsing Effects（制造折叠效果） 如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： .support.design.widget.CollapsingToolbarLayout...比如AppBarLayout.Behavior 就定义了这两个关键方法。这个behavior用于当滚动发生的时候让AppBarLayout发生改变。

80920
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    NestedScrollView 嵌套 ListView 实现滑动折叠效果

    android:fitsSystemWindows，经本人代码测试，表示CollapsingToolbarLayout的上边界是否扩展到statusbar，这里如果想使用透明的statusbar，这里更新下应该该布局的根布局的该属性为...enterAlways - 实现quick return效果, 当向下移动时，立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...，其他CollapsingToolbarLayout内的子view做相应的改变如（视差）或pin（不变）。...题外话3 23.2.0中在CoordinatorLayout中使用Toolbar ，toolbar无法与顶部对齐，即顶部存在垂直间距。

    3.5K50

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

    假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。...exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。...，它可以控制包含在CollapsingToolbarLayout中的控件在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier

    2.3K90

    使用CoordinatorLayout打造各种炫酷的效果

    遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等 可 产生各种炫酷的效果 CoordinatorLayout...，你也可以自己自定义一个控件，你可以参考我的这一篇博客仿网易新闻的顶部导航指示器 ---- 在看例子结合ViewPager的视觉特差之前 ，我们需要先了解CollapsingToolbarLayout这个控件...（当这个View到达 CollapsingToolbarLayout的底部的时候，这个View 将会被放置，即代替整个CollapsingToolbarLayout） 我们有两种方法可以设置这个常量,...layout_collapseMode=”parallax”，表示视差效果，ToolBar的 app:layout_collapseMode=”pin”，当这个TooBar到达 CollapsingToolbarLayout...的底部的时候，会代替整个CollapsingToolbarLayout显示 接着说明TabLayout的变化 从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候，最终

    5K10

    CollapsingToolbarLayout使用

    CollapsingToolbarLayout 可以看到，Toolbar的标题放大并在下方显示，当我们向上滑动列表时，顶部Header部分的图片向上折叠隐藏，标题向上移动并缩小，同时以渐显式的方式显示蓝色主题...关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。...当设置为1.0，滚动列表时图片不会折叠移动； 代码实现： 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。...表示控件向上折叠退出并以最小高度停留在顶部；前面介绍CollapsingToolbarLayout属性时介绍到了statusBarScrim的使用，其实也可以通过android:fitsSystemWindows...和layout_anchorGravity可以控制FloatingActionButton的behavior和位置，如上图所示，当滚动列表是，FAB按钮会随着AppBarLayout而显示和隐藏，并自带缩放动画

    2.5K60

    【Android】5.x炫酷标题栏动画使用理解

    当滑动屏幕时，子控件都做出了相应的行为（滑出屏幕，固定顶端等），这些行为其实就是AppbarLayout提供给它子控件的功能。...我们上面的代码中，Toolbar是AppBarLayout的第一个子控件，虽然设置了scroll值，但也设置了exitUntilCollapsed值，这个的作用是，当向上滑动时，这个控件也会跟着滑出屏幕...，直到它还留在屏幕内的高度达到最小高度（没有设置好像默认就是wrap_content)时停止。...所以，CollapsingToolbarLayout就是给这些子控件们安排具体的滑动细节，例如：ImageView要实现渐变的效果；Toolbar的标题要能够有收缩/扩展的效果;最上面的子控件不动，下面的先滑动等等效果...至于作用其实就是当你一向下滑动屏幕时，控件就能马上显示出来，不必滑到顶端。 snap：当你停止滑到屏幕时，控件自动恢复原样或者自动滑到底。

    1.1K60

    Material Design之CollapsingToolbarLayout 相关属性和方法介绍

    enterAlways - 实现quick return效果, 当向下移动时，立即显示View（比如Toolbar)。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...一个问题NestedScrollView高度加上顶部AppBarLayout高度没超过屏幕高低滑动有问题（只能在AppBarLayout范围内才能滑动）； <?...--layout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier

    96730

    AppBarLayout学习

    AppBarLayout是什么，效果是怎样的 使用AndroidStudio建立一个ScrollActivity，模板就是使用的AppBarLayout，不过例子里还使用了CollapsingToolbarLayout...滚动最顶层时，子View响应滚动事件，直至子View完全显示 exitUtilCollapsed：只要ScrollView向上滚动，子View立即响应滚动，直到达到最小高度 snap：当Scrollview...向下滚动时，当ScrollView滚动顶部了，才继续滚动了。 snap snap是一个根据View在屏幕上显示范围进行调整的一个属性，看下效果其实就明白是怎么回事了。...(offset) * 1.0f / toolBarHeight } }) 运行效果如下： 当向上滑时，offset的变化是0-->负数；向下滑时，负数--->0。...后面会继续学习与CollapsingToolbarLayout一起的使用。

    1.1K30

    高仿支付宝9.9.2版本生活模块界面来讲解CoordinatorLayout，AppBarLayout，CollapsingToolbarLayout

    2.AppBarLayout 其次就是AppBarLayout，去除官方解释，简单来说就是它可以让你定制当某个可滚动View的滚动手势发生变化时，其内部的子View实现何种动作。...enterAlways:值设为enterAlways的View,当ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动。...exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView...，View就暂时不去往下滚动，直到ScrollView滑动到顶部不再滑动时，View再继续往下滑动，直到滑到View的顶部结束。...CollapsingToolbarLayout只要有这方面： 1.title展开时是最大的，然后随着收缩会越来越少，直到屏幕的顶部，通过app:title设置title,不然就默认。

    1.1K20

    Android开发笔记（一百四十四）高仿支付宝的头部伸缩动画

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件，不但允许自定义顶部导航栏，而且导航栏高度是可以伸缩的。...如果你熟悉AppBarLayout和CollapsingToolbarLayout的话，也许可以很快做出类似以上的简单界面，具体地说，就是定义一个CoordinatorLayout嵌套AppBarLayout...这个内容视图可以是RecyclerView，也可以是NestedScrollView； 2、AppBarLayout嵌套CollapsingToolbarLayout，这是为了定义导航栏下面需要展开和收缩的部分视图...； 3、CollapsingToolbarLayout嵌套Toolbar，这是为了定义导航栏上方无论何时都要显示的长条区域，其中Toolbar还要定义两个不同的样式布局，用于分别显示展开与收缩状态时的工具栏界面...这个渐变动画其实可分为两段： 1、导航栏从展开状态向上收缩时，头部的各控件要慢慢向背景色过渡，也就是淡入效果； 2、导航栏向上收缩到一半，顶部的工具栏要换成收缩状态下的工具栏布局，并且随着导航栏继续向上收缩

    1.2K10

    利用 CollapsingToolbarLayout 完成联动的动画效果

    最初的想法是自己去利用 Android 的嵌套滚动机制,去实现上面的嵌套滚动效果.但最后为了开发效率直接利用了 CollapsingToolbarLayout 和 CoordinatorLayout...实现效果的原理十分简单,监听 CollapsingToolbarLayout 收缩和扩展的距离,换算成你想要的一个范围比如移动的距离,缩放的比例. 部分源码: 的计算,主要就是顶在最上方时,文字都到了居中的位置.大家在图中画出开始和结束的位置,都能计算出来....有一点提一下,最初我是把布局嵌入到 CollapsingToolbarLayout 中去的,但是由于 CollapsingToolbarLayout 自身的收缩和扩展改变了自身高度,会影响里面的 View...的位置,如果按照静态的起始和结束位置计算,加上自身高度对 View 布局的影响,这就复杂了,我没有细研究.采用了一个笨拙的方式,用 FrameLayout 把布局给抽取到顶部,不让他们受到 CollapsingToolbarLayout

    1.8K10

    细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

    AppBarLayout 虽然和 Toolbar 没有直接联系，但是当 Toolbar 内置在 AppbarLayout 中的时候，Toolbar 的效果增强了，这使得开发者非常愿意用 AppBarLayout...CoordinatorLayout 是这个库的组织容器，一切基于 support design 扩展出来的特性都应该发生在 CoordinatorLayout 及它的子 View 体系中。 2....当 AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部时，我们用 enter 指代这种行为，对应的手势就是向下滑动。...当 AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动时，我们用 exit 指代这种行为，对应的手势是向上滑动。...exitUntilCollapsed 前面讲过 当 AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动时，我们用 exit 指代这种行为，对应的手势是向上滑动

    3.1K30

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

    那么Android5.0也同时给出了相应的解决方案，即推出MaterialDesign库，通过该库中的AppBarLayout控件，对Toolbar加以包装，从而实现顶部工具栏的动态变化效果。...对于大家关心的额外功能，则主要有以下几点： 1、支持响应主体页面的滑动行为，即在主体页面上移或者下拉时，AppBarLayout能够捕捉到主体页面的滚动操作； 2、AppBarLayout捕捉到滚动操作之后...2、AppBarLayout内部的高度也可能变化，比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout，有关可折叠工具栏布局的详细介绍参见《Android开发笔记（一百三十六）可折叠工具栏布局...同理，拉动AppBarLayout也有类似情况，当松开手指后，AppBarLayout得判断要不要继续向上收缩，或是继续向下展开。...5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。 点击下载本文用到的应用栏布局的工程代码 点此查看Android开发笔记的完整目录

    2K40

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

    可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...这里要明确一点，Toolbar本身是页面顶部的工具栏，其上没有本页面的其它控件了，如果Toolbar被拉下来了，那Toolbar上面的空白该显示什么？...下面是CollapsingToolbarLayout的属性说明： app:contentScrim : 指定布局内部未展开时的背景颜色。...上述属性在代码中的设置方法如下所示： setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...有关的滚动标志 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》说过，AppBarLayout的子控件共有五个滚动标志，同时提到后面三个标志与CollapsingToolbarLayout

    3.3K30

    AppBarLayout和CollapsingToolbarLayout的闲谈

    了解 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。...对比scroll和scroll | enterAlways设置，发生向下滚动事件时，前者优先滚动Scrolling View，后者优先滚动Child View，当优先滚动的一方已经全部滚进屏幕之后，另一方才开始滚动...这里涉及到Child View的高度和最小高度，向下滚动时，Child View先向下滚动最小高度值，然后Scrolling View开始滚动，到达边界时，Child View再向下滚动，直至显示完全。...属性contentScrim 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。...在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier

    1.8K30

    CoordinatorLayout使用（四）：和Toolbar的简单使用

    其中snap是后面添加的） scroll: 代码中枚举SCROLL_FLAG_SCROLL 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。...enterAlwaysCollapsed: 代码中枚举SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入...，只有当滚动视图到达顶部时才扩大到完整高度。...这个时候，我们想做一个pending的TabLayout 滑动的时候，隐藏上面的Toolbar 于是， AppBarLayout中，Toolbar下面，添加一个TabLayout Toolbar添加...这里和前面还不太一样，这里是CollapsingToolbarLayout 所以，我们简单在CollapsingToolbarLayout中，添加一个ImageView（自己从小学就比较崇拜的欧拉）

    1.5K30

    界面无小事(九): 做个好看的伸缩头部

    ="pin" app:layout_collapseMode="none" 从xml中的参数说吧, 来看CollapsingToolbarLayout的折叠模式....Constant Value: 1 (0x00000001) 列个表再看下: 参数 效果 none 视图将正常运行, 没有折叠行为 pin 视图将固定到位, 直到它到达CollapsingToolbarLayout...如果在此之前的任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕)时, 视图将滚动直到“折叠”. 折叠高度由视图的最小高度定义。...snap 在滚动结束时, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近的边缘. enterAlways 当进入(在屏幕上滚动)时, 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义.

    98920
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券