如何在折叠时保持CollapsingToolbarLayout的背景作为ToolBar的背景 - 腾讯云开发者社区

CollapsingToolbarLayout 可以看到，Toolbar的标题放大并在下方显示，当我们向上滑动列表时，顶部Header部分的图片向上折叠隐藏，标题向上移动并缩小，同时以渐显式的方式显示蓝色主题...，直至高度缩为Toolbar的高度并成为Toolbar的背景色；向下滑动列表时，Header部分逐渐显示。...关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。...，如效果图中所示；contentScrim内容遮罩，上下滚动时图片上面显示和隐藏的遮罩色，Toolbar位置的的背景色；通常这样设置：app:contentScrim="?...作为AppBarLayout的直接子控件，CollapsingToolbarLayout包裹Header部分的ImageView和Toolbar，并分别设置二者的折叠模式。

2.5K6 0

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

所以Toolbar的上部边缘是不可以往下拉的，只有下部边缘才能往下拉，这样的视觉效果好比Toolbar如电影幕布一般缓缓向下展开。...下面是CollapsingToolbarLayout的属性说明： app:contentScrim : 指定布局内部未展开时的背景颜色。...下面是Toolbar采用parallax模式时的效果图，可以看到红色区域会随着滚上去再滚下来。因为折叠系数设置为0.1，所以其效果近似于none模式。 ?...的折叠效果并不仅限于和Toolbar的互动，还包括标题文字的样式渐变（文字大小、颜色、间距等等），连背景图片都可以实现折叠的渐变效果。...下面是标题栏在折叠时显示渐变图片的效果图： ?

3.3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

Material Design 实战之第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间）

1.2 CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...不过CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...app:contentScrim指定CollapsmgToolbarLayout在趋于折叠状态以及折叠之后的背景色，其实CollapsingToolbarLayout在折叠之后就是一个普通的Toolbar...以及， app:layout_collapseMode用于指定当前控件在CollapsingToolbarLayout折叠过程中的折叠模式，其中Toolbar指定成pin，表示在折叠的过程中位置始终保持不变...向上拖动水果图片，背景图上的标题会慢慢缩小，而且会产生错位偏移的效果，toolbar的位置和图片还会产生透明度的变化等等，效果十分炫酷。 ? ?

2.3K4 0

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

然后继续通过 CollapsingToolbarLayout 进一步增强 Toolbar 的视觉效果。如果有人对可折叠的的 Toolbar 还不了解，那么请看下面的示例。 ?...attr/colorPrimary" /> CollapsingToolbarLayout> 我们给 Toolbar 添加一个红色的背景色...比如一个按钮，一般的按钮正常的时候背景色是一种颜色，而按下去的时候，按钮会变化背景颜色，这就是一种反馈。反馈提示了状态的变化。...还是以按钮为例，手指按下去时，按钮给的反馈是背景颜色发生改变，这种直接的视觉效果差异就是反馈，它提示了按钮从正常状态到按下状态的变化。那好。现在，我们再来思考 Toolbar。...CollapsingToolbarLayout 本质上是一个 FrameLayout，所以需要在 Toolbar 的前面位置加入其它的 View 作为内容，Content scrim 才会起作用。

3.1K3 0

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

指定在折叠之后的背景色 4.android.support.design:expandedTitleGravity e.g. ...在折叠的时候状态栏的背景颜色 10。...--layout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...//设置和获取折叠之后的标题位置 getCollapsedTitleGravity(); setCollapsedTitleGravity(int gravity) //获取和设置折叠之后的背景

9673 0

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

我们来分析一下效果图中都用到了什么，只看带颜色的有文字，和一个苹果背景图、还有一个悬浮按钮（吸附在CollapsingToolbarLayout的右下角）。...竟然折叠的部分是toolbar和背景图片，这就理所应当的把这两个空间写在CollapsingToolbarLayout中，因为上面协调者布局和appbar布局很简单，这里就不在写了，只贴出折叠布局代码（...里面的注释有贴出后加的，用该代码时要注意语法）。...--折叠toolbar布局--> CollapsingToolbarLayout android:layout_width...actionBarSize" /> CollapsingToolbarLayout> 写到这才是我们的折叠布局了，还有我们的悬浮按钮

1.6K10 0

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

CollapsingToolbarLayout则只是一个对Toolbar进行包装，实现了可以对标题栏进行折叠功能的一个基本容器，它是作为AppBarLayout的直接子布局来使用。...这么说好像也不怎么好理解，题主就按自己的理解讲得通俗点，举个例子：上面那张动图里，标题栏包括了一个Toolbar、一个背景图（imageView)、一个FAB按钮。...至于CollapsingToolbarLayout则是给子控件提供了折叠的功能，什么是折叠呢？...图片背景只是简单的往上滑，没有之前那种视差的效果了。...总结下，Toolbar、ImageView都是作为标题栏的元素，AppBarLayout给它们提供可以响应滑动的行为，而CollapsingToolbarLayout则是来安排谁不动，谁先动、怎么动。

1.1K6 0

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

CollapsingToolbarLayout的介绍 CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承至FrameLayout，给它设置layout_scrollFlags...CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout...同理这是在展开时Title文字特点外形的设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景的设置 app:expandedTitleMarginStart 设置扩张时候...的介绍 Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件，Google 非常推荐大家使用 Toolbar 来作为Android客户端的导航栏...除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如：设置导航栏图标；设置App的logo；支持设置标题和子标题

2.3K9 0

在项目中运用Meterial Design实现动画效果

这个动画效果最重要重点使用了CollapsingToolbarLayout可实现Toolbar的折叠效果。...有几个重要的属性需要重点介绍下： 1、app:contentScrim="#30469b" 设置当完全CollapsingToolbarLayout收缩后ToolBar的背景颜色。...4、 app:layout_collapseParallaxMultiplier="0.5" CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过这个属性来改变。...5、app:layout_collapseMode=”parallax” app:layout_collapseMode="pin" 子视图的折叠模式，有两种，经常使用： pin：设置为这个模式时...，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上，在折叠的时候最后固定在顶端； parallax：视差模式，在折叠的时候会有个视差折叠的效果。

4043 0

CoordinatorLayout打造折叠式的顶部标题栏

中，结合AppbarLayout, CollapsingToolbarLayout，Toolbar等可产生各种炫酷的效果。...，一套全新的事件处理方式，它可以指定“作用View”和“被依赖View”，要改变行为的那个View就是child，dependency是作为触发器影响child的那个View。...CollapsingToolbarLayout使用app:contentScrim="@color/titleBarColor2"来设置内容纱布，就是当折叠到只剩下Toolbar的时候，用另外一个的图片或者颜色来设置...toolbar的背景。...="false"时标题是不会有动画的，这里要注意一下。

2.1K3 0

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

阶段效果图发现两个问题, 由于背景是白色, 标题栏字体颜色要变成黑色, 默认就是黑色, 所以就是删除xml中的主题设置. 当然, 如果你是深色背景, 这里就无需动它....="pin" app:layout_collapseMode="none" 从xml中的参数说吧, 来看CollapsingToolbarLayout的折叠模式....如果在此之前的任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕)时, 视图将滚动直到“折叠”. 折叠高度由视图的最小高度定义。...snap 在滚动结束时, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近的边缘. enterAlways 当进入(在屏幕上滚动)时, 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....一旦滚动视图到达其滚动范围的末尾, 该视图的其余部分将滚动到视图中. 折叠高度由视图的最小高度定义.

9892 0

AppBarLayout和CollapsingToolbarLayout的闲谈

背景自从google的design出来之后，很多控件效果实现起来已经不需要再像以前那样写自定义控件了，最近有个需求是要到页面头部标题栏的折叠效果，因此，想想用CollapsingToolbarLayout...了解 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。...通常CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout的搭配使用折叠的效果目前已经很常见了，在网上有很多的例子和文章，小编整理了一下知识点。...属性contentScrim 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。...属性scrimAnimationDuration 设置控制Toolbar收缩时，颜色变化持续时间属性 layout_collapseMode 折叠模式，有两个值 pin：固定模式，在折叠的时候最后固定在顶端

1.8K3 0

Android 沉浸式状态栏的多种样式

---- 公共的步骤：布局文件中添加使用 Toolbar 控件(纯色 Toolbar 背景色为颜色，图片 Toolbar 样式设置背景色为图片或添加一个 ImageView 控件)，在文件根布局与 Toolbar...和尚我用的是作为 Toolbar 背景图 background 方式处理，使用 ImageView 控件时还需要单独处理图片，并有部分拉伸的可能。图片作为布局背景沉浸样式 ?...图片作为布局背景样式 ? 图片被拉伸图片作为布局背景的方式比较简单，方式与公共的相同，只是不需要 Toolbar 而已。...和尚我的解决方法是使用 layer-list 的 drawable，类似于启动页初始加载时的样式。 CollapsingToolbarLayout 折叠后的效果也是沉浸式状态，可以固定折叠后的状态，但是并不建议这样处理，只是偶然想到而已，各位有兴趣可以研究一下。

1.5K4 1

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

当我们引入RecyclerView的时候，恰好是压死骆驼的最后一根稻草，故不得不采用其他方案来代替RecyclerView 和 CollapsingToolbarLayout实现的折叠效果。...app:contentScrim 表示CollapsingToolbarLayout折叠以后，toolbar的颜色。...enterAlways - 实现quick return效果, 当向下移动时，立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动时收缩View，但可以固定Toolbar...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。...，其他CollapsingToolbarLayout内的子view做相应的改变如（视差）或pin（不变）。

3.5K5 0

CoordinatorLayout使用全解析

，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。...CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode） off：默认属性，布局将正常显示，无折叠行为。...pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。...折叠效果如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： CollapsingToolbarLayout

2.2K2 0

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

View - 作为一个容器与一个或者多个子View进行交互下面我们一起先来看一下我们实现的效果图动态图结合ToolBar ?...CoordinatorLayout的直接子View，否则它的大部分功能将不会生效，如layout_scrollFlags等。...事件响应， layout_scrollFlags=“enterAlways”的时候这个View会响应下拉事件所以呈现出来的结果应该是我们在上拉的时候toolBar 会隐藏，下拉的时候toolBar...简单来说 ,CollapsingToolbarLayout是工具栏的包装器,它通常作为AppBarLayout的孩子。...结构图如图片所示，先说明CollapsingToolbarLayout的变化 CollapsingToolbarLayout里面包含ImageView 和ToolBar，ImageView的app:

5K1 0

【翻译】MotionLayout实现折叠工具栏（Part 1）

本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。...在我们开始之前，有必要在这里澄清一下：在 CoordinatorLayout 中使用 CollapsingToolbarLayout 来实现折叠工具栏是没任何问题的。...这里的代码展示了一个折叠工具栏，应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...第一件事情就是作为背景的 ImageView 图片（ ID 为 toolbar_image ）高度值的改变，以及图片透明度值的改变。...，所以我们为了在过渡动画结束时尽量减少锯齿的产生需要使用这个技巧。

2K3 1

CoordinatorLayout使用浅析

CoordinatorLayout是design包中的控件，作为外层控件可以协调子控件从而实现炫酷的效果等。..."> Toolbar android:id="@+id/toolbar"...然后里面包着Toolbar，Toolbar外层是CollapsingToolbarLayout，是可折叠的 CollapsingToolbarLayout主要参数是app:layout_scrollFlags...： scroll ：想要触发滑动事件，必须要加上这个属性，不加最后会停在顶端，比如Tablayout exitUntilCollapsed ：表示滑动到最后折叠在顶端 enterAlways ：表示向上滑动消失...，向下滑动可见 Toolbar主要参数app:layout_collapseMode： pin ：固定模式，在折叠的时候最后固定在顶端 parallax ：视差模式，在折叠的时候会有个视差折叠的效果。

3743 0

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

NestedScrollView继承自FrameLayout，其用法与ScrollView相似，如都必须且只能带一个直接子视图，都是允许视图上下滚动等等。...2、AppBarLayout内部的高度也可能变化，比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout，有关可折叠工具栏布局的详细介绍参见《Android开发笔记（一百三十六）可折叠工具栏布局...所以本文只做下面三个标志的概念解释，有关的效果图参见《Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout》。...具体的滚动说明如下所示：向上滚动：头部先往上收缩，一直滚到折叠的最小高度。然后头部与主体先一起滚动，头部滚到位后，主体继续向上。向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。...5、snap : 在用户手指松开时，系统自行判断，接下来是全部向上滚到顶，还是全部向下展开。点击下载本文用到的应用栏布局的工程代码点此查看Android开发笔记的完整目录

2K4 0

用 CoordinatorLayout 处理滚动

首先确保你使用的不是过时的 ActionBar。并确保遵循了将 ToolBar 用作 ActionBar 指南。还要确保的是以 oordinatorLayout 作为主布局容器。...创建折叠效果如果想创建折叠 ToolBar 的效果，我们必须将 ToolBar 包含在 CollapsingToolbarLayout 中： Toolbar 的标题。现在，我们需要在 CollapsingToolBarLayout 而不是 Toolbar 上设置标题。...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画，例如使用一个在折叠的同时可以渐隐的 ImageView。在用户滑动时，标题的高度也可以改变。 ?...然而，它似乎不影响滚动，如这篇博文所述。

4.8K9 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

CollapsingToolbarLayout使用

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

Material Design 实战之第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间）

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

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

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

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

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

在项目中运用Meterial Design实现动画效果

CoordinatorLayout打造折叠式的顶部标题栏

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

AppBarLayout和CollapsingToolbarLayout的闲谈

Android 沉浸式状态栏的多种样式

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

CoordinatorLayout使用全解析

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

【翻译】MotionLayout实现折叠工具栏（Part 1）

CoordinatorLayout使用浅析

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

用 CoordinatorLayout 处理滚动

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐