> 现在结果应该显示为: ?...通常,我们会设置 Toolbar 的标题。现在,我们需要在 CollapsingToolBarLayout 而不是 Toolbar 上设置标题。...); collapsingToolbar.setTitle("Title"); 注意,在使用 CollapsingToolbarLayout 的时候,应该如此文档所述,将状态栏设置成半透明(API 19...支持的底部表有两种类型:persistent 和 modal。Persistent 类型的底部表显示应用内的内容,而 modal 类型的则显示菜单或者简单的对话框。 ?...但是,记住,你不应该将 app:layout_behavior 属性放到 fragment 或者它内部列表上的任何一个位置。
充分利用系统状态栏空间(系统差异型) 2.1 将控件(这里是ImageView)布局结构中的所有父布局的 android:fitsSystemWindows属性指定成true,...接着还可以在界面上再添加一个悬浮按钮, 当然并不是必需的,只是如果加的话,我们将免费获得一些额外的动画效果。...FloatingActionButton中, app:layou_anchor属性(anchor n.锚状物)指定了一个锚点,这里将锚点设置为AppBarLayout,这样悬浮按钮就会出现在水果标题栏的区域内..., 将控件的android:fitsSystemWindows属性指定成true,就表示该控件会出现在系统状态栏里。...这里除了将android:fitsSystemWindows属性设置好,还必须在程序的主题中将状态栏颜色指定成透明色。
对于android:fitsSystemWindows这个属性你是否感觉又熟悉又陌生呢? 熟悉是因为大概知道它可以用来实现沉浸式状态栏的效果,陌生是因为对它好像又不够了解,这个属性经常时灵时不灵的。...我相信按照绝大多数人的美好设想,android:fitsSystemWindows属性就应该像是一个开关一样,设置成true就可以打开沉浸式状态栏效果,设置成false就可以关闭沉浸式状态栏效果。...在Google提供的诸多布局当中,并不是只有CoordinatorLayout会处理android:fitsSystemWindows属性,像CollapsingToolbarLayout、DrawerLayout...CollapsingToolbarLayout,并且给CollapsingToolbarLayout也设置了android:fitsSystemWindows属性,这样CollapsingToolbarLayout...接着我们给ImageView同样设置了android:fitsSystemWindows属性,如此一来,就可以让图片显示在状态栏的背后了。
例如,如果视图只有底部25%显示,它将折叠。相反,如果它的底部75%可见,那么它将完全展开。...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色,通过app:statusBarScrim设置折叠时状态栏的颜色。...CollapsingToolbarLayout的子布局有3种折叠模式(Toolbar中设置的app:layout_collapseMode) off:默认属性,布局将正常显示,无折叠行为。...pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。 parallax:CollapsingToolbarLayout折叠时,此布局也会有视差折叠效果。...当CollapsingToolbarLayout的子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~
版权声明:本文为博主原创文章,未经博主允许不得转载。...(当这个View到达 CollapsingToolbarLayout的底部的时候,这个View 将会被放置,即代替整个CollapsingToolbarLayout) 我们有两种方法可以设置这个常量,...的底部的时候,会代替整个CollapsingToolbarLayout显示 接着说明TabLayout的变化 从前面的描述我们已经知道当 没有指定app:layout_scrollFlags的时候,最终...TabLayout会静止,不会随着滑动的 时候消失不见 拓展 如果我们仅仅 改变CollapsingToolbarLayout的app:layout_scrollFlags=”scroll|exitUntilCollapsed...- 对于AppBarLayout,我们主要 讲解了这个属性app:layout_scrollFlags,设置不同 的属性我们可以在滚动的时候显示不同 的效果 - 对于CollapsingToolbarLayout
内部的子View通过在布局中加app:layout_scrollFlags设置执行的动作。...最后snap这是属性是子View不会存在局部显示的情况,滚动Child View的部分高度,当我们松开手指时,Child View要么向上全部滚出屏幕,要么向下全部滚进屏幕。...3.CollapsingToolbarLayout 是用来对Toolbar进行再次包装的ViewGroup,主要是用于实现折叠的App Bar效果。...CollapsingToolbarLayout只要有这方面: 1.title展开时是最大的,然后随着收缩会越来越少,直到屏幕的顶部,通过app:title设置title,不然就默认。...当verticalOffset=0的时候即使整个展开的是时候要做的就是显示要显示的,隐藏要隐藏的设置,在设置透明度,同理当verticalOffset等于appBarLayout.getTotalScrollRange
1.背景 在项目开发过程中,有时候会碰到这样的需求:在滑动的过程中,在某时要将子view固定在顶部(常见的是将界面中的tab在滑动到顶部的时候进行固定)。...4.扩展 a.关于CollapsingToolbarLayout中子view的排列顺序对显示结果造成的影响 如图: ?...推测—— CollapsingToolbarLayout中以上三种view不同排序的剖面展示效果为: 顺序:Toolbar—— ImageView—— TabLayout(设置layout_gravity...(因此,1.在画布下的内容就无法显示出来;2.无法覆盖画布的内容就显示为画布默认的样式) 所以,如果不想要有视差效果的话,那么就将Toolbar与TabLayout的高度设置一致。...(这样也避免了:在CollapsingToolbarLayout中,因为视图折叠覆盖的问题,会导致整个ImageView被TabLayout覆盖一部分而显示不完全的问题。)
目前这个框架提供了几种不用写动画代码就能工作的方法,这些效果包括: 让浮动操作按钮上下滑动,为Snackbar留出空间 ? 扩展或者缩小Toolbar或者头部,让主内容区域有更多的空间。 ?...floatingActionButton弹出Snackbar,fab自动上移的效果,app:layout_behavior的为自定义的效果,当下滑时,fab消失,上滑时fab显示,详情请查看本人博客 Floating...通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置在CollapsingToolBarLayout上,而不是Toolbar。...同时在用户滚动的时候title的高度也会随着改变。 ? 为了制造出这种效果,我们添加一个定义了app:layout_collapseMode=”parallax” 属性的ImageView。...当滚动发生的时候,CoordinatorLayout会尝试触发那些声明了依赖的子view。
然后标题栏需要变成透明的. 将标题栏设置透明色 那由于5.0之前是不能变的, 将styles.xml从5.0区分开, 5.0之前什么都不做, 之后版本设置标题栏为透明色....的底部 parallax 视图将以视差方式滚动 是不是该怎么懵还是怎么懵, 来看效果图: ?...参数 效果 scroll 视图将滚动与滚动事件直接相关. 需要设置此标志才能使任何其他标志生效....如果在此之前的任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕)时, 视图将滚动直到“折叠”. 折叠高度由视图的最小高度定义。...但是我感觉体验不好, 会让人有着操作不灵敏的错觉. ?
,直至高度缩为Toolbar的高度并成为Toolbar的背景色;向下滑动列表时,Header部分逐渐显示。...关于CollapsingToolbarLayout的属性在官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示在图片底部,布局折叠时缩小显示在Toolbar左侧。...attr/colorPrimary",即显示为Toolbar颜色,应用的主题色;layout_collapseMode折叠模式,设置其他控件滚动时自身的交互行为,有两种取值:parallax,折叠视差效果...当设置为1.0,滚动列表时图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为,可以参考上一篇文章,这里我介绍一下本例中几个新的注意点。...表示控件向上折叠退出并以最小高度停留在顶部;前面介绍CollapsingToolbarLayout属性时介绍到了statusBarScrim的使用,其实也可以通过android:fitsSystemWindows
当 AppBarLayout 中的内容要从 CoordinatorLayout 外面进入内部时,我们用 enter 指代这种行为,对应的手势就是向下滑动。...当 AppBarLayout 中的内容从 CoordinatorLayout 内部向外部方向移动时,我们用 exit 指代这种行为,对应的手势是向上滑动。...Toolbar 先滑动,等到视图可见范围高度为 collapsed 指定高度时它会静止,等到 NestedScrollView 内容完全显示在 Toolbar 下方时它再一起滑动,它的动作是 3 段式的...说的是包裹 CollapsingToolbarLayout 的 AppbarLayout 需要设置 fitsSystemWindows 为 true。...Pinned position children 子类的位置固定行为 这个很好理解,将 CollapsingToolbarLayout 中某个子 View 固定,无论是否存在滚动事件,只要设置 app:
因此你会接触很多不同的UI布局,你需要去绘制出来,在这过程中你已经接触过TabLayout。...这样标题就设置好了,不过你会看到这个标题我设置的是英文小写,而这运行出来就变成了大写,这个原理有Button是一样的,你只需要将textAllCaps属性设置为false就可以了。...、下划线为透明,选中的文字颜色为蓝色,默认是灰色,和刚才创建的四个图标样式文件类似,选中时切换蓝色图片,未选中时灰色图片。...()将数据填充进去 Allocation tmpIn = Allocation.createFromBitmap(rs, inputBitmap); Allocation...blurScript.forEach(tmpOut); // 将数据填充到Allocation中 tmpOut.copyTo(outputBitmap
本文要实现内容移动时,标题栏自动缩放/放大的效果,效果如下: ?...AppBarLayout 可以让包含在其中的控件响应被标记了ScrollingViewBehavior的View的滚动事件 CollapsingToolbarLayout 可以控制包含在CollapsingToolbarLayout...其中的控件,在响应collapse时是移除屏幕和固定在最上面 TabLayout 结合ViewPager,实现多个TAB的切换的功能 NestedScrollView 与ScrollView基本相同...,不过包含在NestedScrollView中的控件移动时才能时AppBarLayout缩放 Layout布局 <?...后,title需要设置到CollapsingToolbarLayout上 CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout
设置边界距离 和 textview等效果一样 6.android.support.design:expandedTitleMarginBottom 底部的margin距离 7.android.support.design...如果标题可用的话 显示的标题文字 11.android.support.design:titleEnabled e.g. app:titleEnabled="true" Whether the...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...--layout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时,当CollapsingToolbarLayout完全收缩后,Toolbar...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier
当我们引入RecyclerView的时候,恰好是压死骆驼的最后一根稻草,故不得不采用其他方案来代替RecyclerView 和 CollapsingToolbarLayout实现的折叠效果。...android:fitsSystemWindows,经本人代码测试,表示CollapsingToolbarLayout的上边界是否扩展到statusbar,这里如果想使用透明的statusbar,这里更新下应该该布局的根布局的该属性为...enterAlways - 实现quick return效果, 当向下移动时,立即显示View(比如Toolbar). exitUntilCollapsed - 向上滚动时收缩View,但可以固定Toolbar...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...解决方法在AppBarLayout添加 android:fitsSystemWindows="true"
最终的运行效果如下 ? HelloWord.png 14.2 综合项目实战:开发一个电影指南应用程序 本节我们将开发一个Android 应用程序, 列出流行/最高评级的电影, 显示预告片和评论。...另外,它还生成一个本地视图缓存,当第一次使用属性时,它将执行一个常规的findViewById。但在下一次使用属性的时候,视图将从缓存中恢复,因此访问速度将更快。...setCustomAnimations(int enter, int exit) 为Fragment的进入/退出设置指定的动画资源。 commit() 提交事务。安排一个针对该事务的提交。...将 Fragment 添加至 Activity 的视图布局中有两种方式:一种是使用fragment标签加入,Fragment的父视图应是一个ViewGroup;另一种使用代码动态加入,并将一个ViewGroup...由于平板比手机屏幕大的多,因此平板上可以呈现更多的内容,而 Fragment 可以实现同一视图布局在不同大小的屏幕上显示不同的效果,将 Fragment 加入到 Activity 的 Layout 中,
android:fitsSystemWindows=”true”属性就可以了,要不布局会跑到状态栏和导航栏下面,与导航栏和状态栏重叠,这当然不是我们希望的。...同一个Activity包含多个Fragment时,如何实现不同fragment的状态栏背景和文字颜色不一样 如下面的效果图: 就是设置了状态栏为暗色后,还得设置回来,这其实主要靠下面两个flag...(0, 0, 0, CommonUtils.navigationHeight); 这行代码干什么用的,因为我们这里首页和我的页面,需要背景图片填充到状态栏,故不能使用android:fitsSystemWindows...带有底部导航栏手机底部导航按钮会和navigationbar重叠 如下图所示: 全屏时,由于视图布局会填充到状态栏和导航栏下方,如果不使用android:fitsSystemWindows=”true...上面对于版本的判断,如果android版本大于4.4, 则让该布局显示出来,而版本低于4.4, 由于没有沉浸式状态栏效果,则不需要给界面设置占空布局。
可以这么理解:状态栏与导航栏拥有自己独立的窗口,而且这两个窗口的优先级较高,会悬浮在所有窗口之上,可以把系统自身的状态栏与导航栏看做全透明的,之所有会有背景颜色,是因为下层显示界面在被覆盖的区域添加了颜色...--关键点1 ,可以看到,根布局会根据消耗的状况,来评估到底底部,右边部分margin多少,并设置进去--> if (mContentRoot !...会选择性进入设置了fitSystemWindow的View,即设置了fitsSystemWindows: android:fitsSystemWindows="true" 并回调fitSystemWindows...有一个小点需要注意下,那就是Theme中也支持fitsSystemWindows的设置 true 默认情况下上属性为...false,如果设置了True,就会被第一个未设置fitsSystemWindows的View消费掉。
: 实现思路: 1、Activity设置自定义Shared Element切换动画 2、透明状态栏(透明Toolbar,使背景图上移) 3、Toolbar底部增加和背景一样的高斯模糊图,并上移图片(为了使背景图的底部作为...其中内容根布局不要设置android:fitsSystemWindows="true",这样会额外添加一个状态栏。...其中StatusBarUtil,是一个为Android App 设置状态栏的工具类。...3、Toolbar的背景图 仔细分析后发现网易云音乐的Toolbar的背景其实显示的是高斯模糊图的底部,所以这里基本套路是Toolbar是透明的,后面背景图取的是高斯模糊图的底部一部分。 ?...Toolbar背景图 监听图片显示,在显示之后将其设置为透明色,然后在滑动的时候渐变。
Scroll: 表示向下滚动时,这个View会被滚出屏幕范围直到隐藏. enterAlways: 表示向上滚动时,这个View会随着滚动手势出现,直到恢复原来的位置. enterAlwaysCollapsed...CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时,当CollapsingToolbarLayout...parallax - 设置为这个模式时,在内容滚动时,CollapsingToolbarLayout中的View(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...(还没有收缩时)title向左填充的距离 app:expandedTitleMarginEnd 这个同理是收缩结束时向左填空的距离 其他的就不一一介绍了,具体的去查看API文档即可获知。...我在做这里的时候遇到一个问题,那就是CollapsingToolbarLayout里的Title的问题,一般默认是显示的,即使你不写,它也有会一个默认值一直显示在那里,等折叠收缩完的时候,停留在标题工具栏上
领取专属 10元无门槛券
手把手带您无忧上云