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

CollapsingToolbarLayout -如何固定工具栏和另一个视图,但仍然有标题图像的parralax?

CollapsingToolbarLayout是Android Support库中的一个控件,用于实现可折叠的工具栏效果。它可以同时固定工具栏和另一个视图,并且仍然可以显示标题图像的parralax效果。

要实现这个效果,可以按照以下步骤进行操作:

  1. 首先,在布局文件中添加CollapsingToolbarLayout作为父容器,将工具栏和其他视图放置在其中。例如:
代码语言:xml
复制
<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
        <android.support.design.widget.CollapsingToolbarLayout>
            <android.support.v7.widget.Toolbar>
                <!-- 工具栏内容 -->
            </android.support.v7.widget.Toolbar>
            <ImageView>
                <!-- 标题图像 -->
            </ImageView>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <NestedScrollView>
        <!-- 其他视图内容 -->
    </NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
  1. 在代码中,可以通过设置CollapsingToolbarLayout的属性来实现固定工具栏和parralax效果。例如,可以设置app:layout_scrollFlags属性来指定工具栏的滚动行为,使用app:contentScrim属性来设置工具栏的背景颜色,使用app:expandedTitleMarginStartapp:expandedTitleMarginEnd属性来设置标题在展开时的边距。
代码语言:xml
复制
<android.support.design.widget.CollapsingToolbarLayout
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:contentScrim="@color/colorPrimary"
    app:expandedTitleMarginStart="48dp"
    app:expandedTitleMarginEnd="64dp">
    <!-- 工具栏和标题图像内容 -->
</android.support.design.widget.CollapsingToolbarLayout>

通过设置app:layout_scrollFlags属性,可以实现以下几种滚动行为:

  • scroll:工具栏随着滚动而滚动。
  • enterAlways:工具栏在滚动时进入屏幕。
  • exitUntilCollapsed:工具栏在滚动到最小高度之前一直存在。
  • snap:工具栏在滚动结束时自动收起或展开。
  1. 最后,可以在代码中设置CollapsingToolbarLayout的标题和其他属性。例如,可以使用setTitle()方法设置标题,使用setCollapsedTitleTextColor()setExpandedTitleColor()方法设置标题的颜色。
代码语言:java
复制
CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
collapsingToolbarLayout.setTitle("标题");
collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);
collapsingToolbarLayout.setExpandedTitleColor(Color.TRANSPARENT);

这样,就可以实现固定工具栏和另一个视图,同时仍然有标题图像的parralax效果。

对于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,建议您参考腾讯云官方文档或咨询腾讯云的客服人员获取相关信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...不过,Android在实现展开效果时候,并非直接让Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题展开收缩行为。...声明工具栏滚动行为标志; 其实真正运行时候,Toolbar高度是固定不变,变化高度CollapsingToolbarLayout。...只是许多App把这两者背景设为一样,所以看起来像是统一标题栏在收缩展开。...以下三个取值说明: --pin : 固定模式,当前视图固定不动,不受CollapsingToolbarLayout折叠影响。

3.1K30

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

它是设计用于直接AppBarLayout视图。...CollapsingToolbarLayout子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 两个值: pin - 设置为这个模式时,当CollapsingToolbarLayout...同理这是在展开时Title文字特点外形设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景设置 app:expandedTitleMarginStart 设置扩张时候...我在做这里时候遇到一个问题,那就是CollapsingToolbarLayoutTitle问题,一般默认是显示,即使你不写,它也有会一个默认值一直显示在那里,等折叠收缩完时候,停留在标题工具栏上...除此之外,在设计 Toolbar 时候,Google也留给了开发者很多可定制修改余地,这些可定制修改属性在API文档中都有详细介绍,如: 设置导航栏图标; 设置Applogo; 支持设置标题标题

2.2K90

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式方式显示蓝色主题...所以,CollapsingToolbarLayout 使用一定离不开 AppBarLayout Toolbar,并且作为 AppBarLayout 直接子视图使用。...关于CollapsingToolbarLayout属性在官网上可以查到,这里我只介绍案例中我们常用几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...注意,没有设置这个属性时,默认使用Toolbar标题;statusBarScrim顶部视图折叠状态下,状态栏遮罩色。通常这样设置:app:statusBarScrim="?...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新注意点。

2.4K60

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

RecyclerView是其中一个特工,它可用来替代ListViewGridView;替代ScrollView则另有其人,它便是嵌套滚动视图NestedScrollView,在Android5.0之后...1、AppBarLayout滚动依赖于主体视图滚动,与主体视图相对应,可将AppBarLayout称作头部视图。既然一个页面分为头部主体两部分,那么就存在谁先滚谁后滚问题了。...2、AppBarLayout内部高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...同时声明scrollenterAlways,滚动效果如下图所示: ? 后面三个标志都与CollapsingToolbarLayout有关,得配合该控件才能观察细节差异。...所以本文只做下面三个标志概念解释,有关效果图参见《Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout》。

1.9K40

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

如果你熟悉AppBarLayoutCollapsingToolbarLayout的话,也许可以很快做出类似以上简单界面,具体地说,就是定义一个CoordinatorLayout嵌套AppBarLayout...这个内容视图可以是RecyclerView,也可以是NestedScrollView; 2、AppBarLayout嵌套CollapsingToolbarLayout,这是为了定义导航栏下面需要展开收缩部分视图...; 3、CollapsingToolbarLayout嵌套Toolbar,这是为了定义导航栏上方无论何时都要显示长条区域,其中Toolbar还要定义两个不同样式布局,用于分别显示展开与收缩状态时工具栏界面...,就像下面这个动图那样淡入淡出渐变动画: ?...看起来还比较复杂,如果只对某个控件做渐变动画还好,可是导航栏上控件好几个,而且并不固定常常会增加修改。倘若要对导航栏上各控件逐一动画过去,不但费力气,而且后期也不好维护。

1.1K10

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

一张没图片一张图片,图片太丑别怪我。还是把图换了吧,怕你们打我。 开始无知我还以为是监听 onTouchListener 根据滑动距离位置来改变显示效果来实现。...在折叠时候标题文字外观必须引用另一个资源 ,以“@[+][包:]类型:名称”或 主题属性形式”?(包:)类型:名称”。...2.1  android.support.design:expandedTitleTextAppearance 上面的一样  在展开时候标题文字外观 3.android.support.design...定义滚动视图是否应该伸展它内容来填补视窗。...//设置获取折叠之后标题位置 getCollapsedTitleGravity(); setCollapsedTitleGravity(int gravity) //获取设置折叠之后背景

88130

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

PS:在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题悬浮效果等,如果没看过第一篇小火鸡可以看一下,因为这篇是接着上一篇写一些东西上一篇写过了这里就不在重复了(MaterialDesign...1.1:CoordinatorLayout中设置   前面的添加依赖,在上一篇中已经说过,在这就不在重复了,协调者布局中这次又加入了一个新布局CollapsingToolbarLayout(折叠工具栏布局...我们来分析一下效果图中都用到了什么,只看带颜色文字,一个苹果背景图、还有一个悬浮按钮(吸附在CollapsingToolbarLayout右下角)。...竟然折叠部分是toolbar背景图片,这就理所应当把这两个空间写在CollapsingToolbarLayout中,因为上面协调者布局appbar布局很简单,这里就不在写了,只贴出折叠布局代码(...里面的注释贴出后加,用该代码时要注意语法)。

1.6K100

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

不过一个细微小动画在 MotionLayout 中没有实现出来。移动缩放动画在文字上表现确实已经非常接近,但是背景图片渐变在最边缘上却没有完全相同。...我们已经讨论过 MotionLayout 是如何在 ConstraintSets 中所定义固定布局之间进行过渡动画了。...举个例子,假设我们设置 imageAlpha 开始结束值分别是 255 0 ,然后在 25% 位置添加一个关键帧,设置值为 205 ,在 75% 位置设置另一个关键帧值为 50 。...标题文字移动缩放在整个过渡动画中是同时进行,但是通过添加一个单独关键帧后我们可以做到在不更改 ConstraintSets 代码前提下,也不用改变缩放速度就能让标题文本更快地到达动画最终位置:...但是在目前来说,添加 tools:showPaths="true" 这段代码能够让 MotionLayout 计算并显示这三个被过渡动画所影响视图控件轨迹路线:标题文本控件(顶部,中心左侧),工具栏海滩小排屋图片

1.6K30

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

然后标题栏需要变成透明. 将标题栏设置透明色 那由于5.0之前是不能变, 将styles.xml从5.0区分开, 5.0之前什么都不做, 之后版本设置标题栏为透明色....Constant Value: 1 (0x00000001) 列个表再看下: 参数 效果 none 视图将正常运行, 没有折叠行为 pin 视图固定到位, 直到它到达CollapsingToolbarLayout...也就是说, pin模式下, 下面的滚动视图图片是同步滑动, 但是这样观感其实不好. parallax则改进了这一点, 看起来很和谐, 尽管两者不再同步, 这就是翻译后说以视差方式滚动了. -...这通常被称为“快速返回”模式. enterAlwaysCollapsed 'enterAlways'另一个标志, 它修改返回视图, 最初只回滚到它折叠高度....不写的话左侧默认边距.

95120

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

可以在工具栏里放置分段控件以方便用户快速切换当前内容不同视图或模式。在工具栏中提供应用全局任务或者模式分段控件是不恰当,因为工具栏所有操作都应当是针对当前屏幕视图。...如果需要在工具栏上展示3个以上项目,可以使用图标。由于文本按钮通常会比图标更占空间,所以用图标可以避免文字标题们挤在一起。 保证工具栏文字按钮之间足够间距。...地图视图: 通常以标准地图、卫星图像、或两者结合形式来展示地理区域 可以展示以单点标注备注,以及叠加图层(绘制路径或二维区域绘制轮廓) 支持编程时定义,或用户所控制缩放移动 利用地图视图可以给用户提供一个可交互地理区域视图...导航栏,工具栏标签栏 可以操作当前app视图对象各种控件或对象 (默认情况下, 浮出层中表格视图,导航栏工具栏背景都是透明,这样会让浮出层毛玻璃效果展示出来) 在横屏情况下,动作列表总是出现在浮出层里...对分视图控制器包含广泛对象视图,诸如: 表格,图像,地图,文本,网络,或自定义视图 导航栏,工具栏,或标签栏 注意 即使左侧窗格通常被称为主窗格,右侧窗格被称为详情窗格,但在代码中并没有强制固定这种从属关系

10.1K51

CoordinatorLayout使用全解析

AppBarLayout子布局5种滚动标识(上面代码CollapsingToolbarLayout中配置app:layout_scrollFlags属性): scroll:所有想滚动出屏幕view...,它可以控制包含在CollapsingToolbarLayout控件(如:ImageView、Toolbar)在响应layout_behavior事件时作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局颜色,通过app:statusBarScrim设置折叠时状态栏颜色。...CollapsingToolbarLayout子布局3种折叠模式(Toolbar中设置app:layout_collapseMode) off:默认属性,布局将正常显示,无折叠行为。...pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。 parallax:CollapsingToolbarLayout折叠时,此布局也会有视差折叠效果。

1.9K20

最新iOS设计规范三|3大界面要素:栏(Bars)

但是,无边框样式在标准标题导航栏中可能无法很好地起作用,因为该栏标题按钮可能难以区分。iPad上拆分视图是一个例外,更多是通过在这两种视图中使用无边框样式来保持主视图辅助视图之间一致性。...几种常见技术可以做到这一点: · 在APP中使用导航栏,该导航栏会自动显示状态栏背景,并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像,如渐变色或纯色 · 在状态栏背后放置模糊视图...标签栏可能包含N个标签,但可见标签数量因设备大小方向而异。如果由于水平空间有限而无法显示某些标签,则最后一个标签会变为“更多”标签,从而需要在另一个页面上显示其他标签。...例如,如果iOS设备上没有歌曲,则“音乐”应用中“立即收听”选项卡将说明如何下载歌曲。 始终在附加视图中切换上下文。...标签栏工具栏永远不会在同一视图中同时出现。 提供相应工具栏按钮。工具栏应该是当前页面中有意义并且常用命令。 思考图标或文本标题按钮哪个更适合。当你需要3个以上工具栏按钮时,图标的效果更好。

9.8K10

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

当滑动屏幕时,子控件都做出了相应行为(滑出屏幕,固定顶端等),这些行为其实就是AppbarLayout提供给它子控件功能。...往下看 不知道大家学习时候会不会跟题主一样,个疑问:既然AppBarLayout已经为子控件提供了响应滑动行为,那么为什么还需要一个CollapsingToolbarLayout?...ToolbarImageView不滑动了!!为什么,下面说。 很明显一点,ImageViewToolbar变成了线性垂直布局了。...所以,CollapsingToolbarLayout就是给这些子控件们安排具体滑动细节,例如:ImageView要实现渐变效果;Toolbar标题要能够收缩/扩展效果;最上面的子控件不动,下面的先滑动等等效果...如何使用 好了,这样一来对于AppBarLayoutCollapsingToolbarLayout就有一个大概理解了,那么下面就看看该怎么用。

1K60

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

常常与CoordinatorLayout一起使用控件AppBarLayout、CollapsingToolbarLayout、NestedScrollView以及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:视差模式,在折叠时候会有个视差折叠效果。

38330

使用CoordinatorLayout打造各种炫酷效果

简单来说 ,CollapsingToolbarLayout工具栏包装器,它通常作为AppBarLayout孩子。...主要实现以下功能 - Collapsing title(可以折叠 标题 ) - Content scrim(内容装饰),当我们滑动位置 到达一定阀值时候,内容 装饰将会被显示或者隐藏...(当这个View到达 CollapsingToolbarLayout底部时候,这个View 将会被放置,即代替整个CollapsingToolbarLayout) 我们两种方法可以设置这个常量,...结构图如图片所示,先说明CollapsingToolbarLayout变化 CollapsingToolbarLayout里面 包含ImageView ToolBar,ImageViewapp:...,兴趣 了解请自行阅读: 官方文档地址 ---- 题外话 CoordinatorLayout这个控件真的很强大,使用它可以实现各种炫酷效果,简化了开发者许多工作,能力的话可以去研究一下源码 ,

4.9K10

Android如何实现超级棒沉浸式体验

做APP开发过程中,很多时候,我们需要实现类似于下面这种沉浸式体验。 一开始接触时候,似乎大家都会觉这种体验实现起来,会比较困难。...我们viewpager推到actionbar下方时候,就固定在了actionbar下方,不能在往上面推了。...好,总结起来以上就是我们问题,也是需要解决,一个一个解决了,这种需求也就实现了,那么,我们如何去一步一步来解决以上问题呢?...1、头部背景标题渐隐渐现 首先,我们来分析第一个问题,头部背景图在推上去过程中,慢慢变得不可见了,这种听起来好像是某种collapse,因此,很容易让人想到CollapsingToolbarLayout...,我强烈建议你好好了解一下,才能继续下面走,只是想说明一下,走到这里,你一个坑需要去填,那就是我们标题动画可以不是这样,而且,还是标题还是居中,注意,这里实现,标题不是居中,是靠左,这本来是

2.9K252

Android5.06.0之后新增控件说明

为此,博主初步整理了Android在5.06.0之后新增控件,及其对应说明博文,给大家提供一个可资学习借鉴索引。...NestedScrollView Android 5.0 appcompat-v7 工具栏 Toolbar Android 5.0 recyclerview-v7 循环视图 RecyclerView...这个与系统版本有关,每个版本android.jar是固定在该内核中定义控件才能正常调用,没在内核中定义控件在运行时会扔出类找不到异常。...3、第三类是v7兼容库design库,它们各自库工程,开发者要在App工程中手工导入用到兼容库。 v7与design库导入App工程后,编译出来App即可兼容4.*系统。...Android5.06.0之后补充了这么多新控件,自然部分老控件变过时了,下面就列举部分新旧控件替代关系: Toolbar:替代ActionBar RecyclerView:替代ListView

1.2K20

iOS 11 更大导航 (官方翻译版)

有关开发人员指导,请参阅UINavigationBar。 提示不需要导航时使用工具栏,或者想要多个控件来管理内容。请参阅工具栏。 导航栏标题 考虑在导航栏中显示当前视图标题。...标准标题 ? 大标题 当您需要特别强调上下文时,请使用较大标题。在一些应用程序中,大标题大胆大胆文字可以帮助人们浏览搜索。...有关开发人员指导,请参阅prefersLargeTitles。 导航栏控件 避免拥挤导管栏控制太多。通常,导航栏不应包含视图的当前标题,后退按钮管理视图内容一个控件。...但是,如果您实现自定义后退按钮,请确保它仍然像后退按钮,行为直观,与您界面的其余部分相匹配,并始终贯穿您应用程序。如果用自定义图像替换系统提供返回按钮人字纹,也可以提供自定义遮罩图像。...如果您导航栏包含多个文本按钮,那些按钮文本可能会一起运行,使按钮无法区分。通过在按钮之间插入固定空间项来添加分隔。

2.8K30
领券