---- AppBarLayout 它是继承与LinearLayout的，默认 的 方向 是Vertical ?...综上呈现的效果如下，代码见ToolBarSampleSnar的布局文件 ?...CollapsingToolbarLayout继承与FrameLayout，官网地址。...主要实现以下功能 - Collapsing title（可以折叠 的 标题 ） - Content scrim（内容装饰），当我们滑动的位置 到达一定阀值的时候，内容 装饰将会被显示或者隐藏...) 方法 二：在布局文件中使用自定义属性 app:layout_collapseMode="pin" 到此 ，CollapsingToolbarLayout的一些重要属性已经讲解完毕，下面我们一起来看一下我们是怎样结合
CollapsingToolbarLayout则只是一个对Toolbar进行包装，实现了可以对标题栏进行折叠功能的一个基本容器，它是作为AppBarLayout的直接子布局来使用。...app:layout_collapseMode="pin"> AppBarLayout> CollapsingToolbarLayout...很明显的一点，ImageView和Toolbar变成了线性垂直布局的了。细心点的读者会发现，我们上面刚提到过AppBarLayout是继承自LinearLayout默认实现子控件垂直布局。...AppBarLayout提供了一个布局参数scrollFlags,通过在它的子控件中设置这个属性的值，就可以实现相应的行为。...CollapsingToolbarLayout 跟AppBarLayout很像，CollapsingToolbarLayout提供了一个布局参数CollapseMode，一样是两种方法，xml布局文件中通过
这样好像还是有点说不通，没关系同学们通过看上面的布局文件，可以发现 ?...img1.PNG 这一个内容界面是的布局是这一句的内容是： 布局中加app:layout_scrollFlags设置执行的动作。...设为parallax子View可以选择在当前的布局当时是否以“视差”的方式来跟随滚动 5.当app:layout_collapseMode设为pinToolbar固定位置而不受移动的影响 在我们实现这里...img4.PNG 设为app:layout_collapseMode="parallax"让它以“视差”的方式来跟随滚动，而toolbar设为app:layout_collapseMode="pin
AppBarLayout的子布局有5种滚动标识(上面代码CollapsingToolbarLayout中配置的app:layout_scrollFlags属性)： scroll：所有想滚动出屏幕的view...CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode） off：默认属性，布局将正常显示，无折叠行为。...Meterial Design引入了Z轴的概念，就是所有的view都有了高度，他们一层一层贴在手机屏幕上，而FloatingActionButton的Z轴高度最高，它贴在所有view的最上面，没有view能覆盖它...> 然后，我们需要定义AppBarLayout与滚动视图之间的联系。...AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。
1.2 CollapsingToolbarLayout不能独立存在， 它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...而AppBarLayout又必须是CoordinatorLayout的子布局； 1.3 水果详情界面布局框架： CoordinatorLayout下分三部分：水果标题栏、水果详情栏...不过CollapsingToolbarLayout不能独立存在，它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用。...接着我们来编写这个布局。 Activity_fruit.xml中的内容主要分为两部分，一个是水果标题栏，一个是水果内容详情。...， 使用一个TextView来显示水果的内容详情， 并将TextView放在一个卡片式布局当中： ......
AppBarLayout下方与之并列的滑动控件有比如RecyclerView，NestedScrollView（与AppBarLayout同属于CoordinatorLayout的子View）,这些并列的...View（“作用View”child）必须设置Behavior来与AppBarLayout（“被依赖View”dependency）进行绑定，一般设置成app:layout_behavior="@string...CollapsingToolbarLayout使用app:contentScrim="@color/titleBarColor2"来设置内容纱布，就是当折叠到只剩下Toolbar的时候，用另外一个的图片或者颜色来设置...以下是XML布局代码，注意根布局控件是CoordinatorLayout ，RecyclerView一定要填充数据且充满否则无效果。...在此注意AppBarLayout如果设置了layout_scrollFlags="snap"，但是Viewpager没有设置layout_behavior，View一样会自动隐藏，让人误以为child与
AppBarLayout做一个兼容。...android:fitsSystemWindows，经本人代码测试，表示CollapsingToolbarLayout的上边界是否扩展到statusbar，这里如果想使用透明的statusbar，这里更新下应该该布局的根布局的该属性为...true，不过这里兼容性还是存在问题的，特别是android 4.4版本的折叠布局的透明statusbar，不知道改为有没更好的方式。...(参见： http://android.jobbole.com/82193/） layout_collapseMode，pin表示不动，parallax视差效果 将 app:layout_behavior...题外话3 23.2.0中在CoordinatorLayout中使用Toolbar ，toolbar无法与顶部对齐，即顶部存在垂直间距。
修正后效果图 这样就完成了. ---- CollapsingToolbarLayout折叠模式 app:layout_collapseMode="parallax" app:layout_collapseMode...下面我也是截了一段官方文档内容....参数 效果 scroll 视图将滚动与滚动事件直接相关. 需要设置此标志才能使任何其他标志生效....依据滚动幅度变化Toolbar内容. 布局文件 先来看下主布局文件的变化, Toolbar包含了两个布局文件, 相互切换....实现public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset)方法.
> 然后，include里面的布局是这样的 布局内容。...请注意，我的AppBarLayout中并没有这个属性 android:fitsSystemWindows="true" 如果你加了这个属性，嘿嘿，statusbar虽然空间可以利用，但是有一个你挥之不去的颜色覆盖在上面...总结 最后整个布局是这样子的 布局。
="parallax" 4.为 toobar指定属性，声明它是固定的 app:layout_collapseMode="pin" 5.为 CollapsingToolbarLayout 所在的父布局（view...)指定属性，以声明它适配当前窗体 android:fitsSystemWindows="true" 代码 布局xml如下 <?...fitsSystemWindows="true" tools:context="zhangyf.vir56k.app2.MainActivity"> AppBarLayout... AppBarLayout... AppBarLayout
本文涉及的内容主要有 AppBarLayout 与 CollapsingToolbarLayout 的属性与 API 的细节。 内容较多，下面，开始一一道来。...AppBarLayout 本身想提供一个 AppBar 的概念，所以严格地讲它本身与 Toolbar 没有直接的关系。.../android.support.design.widget.CoordinatorLayout> 上面布局文件中，NestedScrollView 就是那个配套的滑动组件，它需要和 AppBarLayout...显然，CollapsingToolbarLayout 中的 title 覆盖了 Toolbar 中的 title。...> 在布局文件中添加一个图标，然后监听 AppBarLayout 的滑动来改变自身的透明度。
可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...--parallax : 视差模式，随着CollapsingToolbarLayout的收缩与展开，当前视图也跟着收缩与展开。...有关的滚动标志 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》说过，AppBarLayout的子控件共有五个滚动标志，同时提到后面三个标志与CollapsingToolbarLayout...1、scroll : 头部与主体一起滚动。 如果仅仅声明scroll，没有声明其它标志，则滚动效果如下图所示： ?...然后头部与主体先一起滚动，头部滚到位后，主体继续向上。 向下滚动：头部与主体先一起滚动，一直滚到头部折叠的最小高度。然后主体向下滚动，滚到位后头部继续向下展开。
如此一来，一方面导航栏能够放得下更多控件，另一方面在用户想看具体内容时也能腾出更多的屏幕空间。...之所以要嵌套这么多层，是因为要完成以下功能： 1、CoordinatorLayout嵌套AppBarLayout，这是为了让头部导航栏能够跟随内容视图下拉而展开，跟随内容视图上拉而收缩。...这个内容视图可以是RecyclerView，也可以是NestedScrollView； 2、AppBarLayout嵌套CollapsingToolbarLayout，这是为了定义导航栏下面需要展开和收缩的部分视图...； 3、CollapsingToolbarLayout嵌套Toolbar，这是为了定义导航栏上方无论何时都要显示的长条区域，其中Toolbar还要定义两个不同的样式布局，用于分别显示展开与收缩状态时的工具栏界面...match_parent" android:layout_height="@dimen/toolbar_height" app:layout_collapseMode
该布局非常好用，能够协调子元素之间的依赖关系。CoordinatorLayout通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...常常与CoordinatorLayout一起使用的控件有AppBarLayout、CollapsingToolbarLayout、NestedScrollView以及Toolbar。...> AppBarLayout> 布局中的 FrameLayout，所以用法与之类似。...5、app:layout_collapseMode=”parallax” app:layout_collapseMode="pin" 子视图的折叠模式，有两种，经常使用： pin：设置为这个模式时
RecyclerView 上的任何滚动事件都将触发 AppBarLayout 或任何包含在其中的 view 的布局发生变化。...@android:color/transparent 通过像上面那样启用系统栏的半透明效果，你的布局会将内容填充到系统栏后面...，因此你还必须在那些不想被系统栏覆盖的布局上使用 android:fitsSystemWindow 。...另外一种为 API 19 添加内边距来避免系统栏覆盖 view 的方案可以在这里查看。...可以仔细比较一下你的代码与 cheesesquare 的源码。
属性scrimAnimationDuration 设置控制Toolbar收缩时，颜色变化持续时间 属性 layout_collapseMode 折叠模式，有两个值 pin：固定模式，在折叠的时候最后固定在顶端...在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...属性layout_collapseParallaxMultiplier 设置视差的系数，介于0.0-1.0之间 属性contentInsetStart Toolbar自身的边上文字到左边的距离 实现 布局代码...android:src="@drawable/bg_personal_homepage_head" app:layout_collapseMode...android:src="@drawable/bg_personal_homepage_head" app:layout_collapseMode
所以，CollapsingToolbarLayout 的使用一定离不开 AppBarLayout 和 Toolbar，并且作为 AppBarLayout 的直接子视图使用。...关于CollapsingToolbarLayout的属性在官网上可以查到，这里我只介绍案例中我们常用的几个属性：title标题，布局展开时放大显示在图片底部，布局折叠时缩小显示在Toolbar左侧。...WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);（支持API19及以上版本，位于setContentView语句前面）一起使用，使顶部视图展开时图片能够延伸到状态栏位置显示，如效果图中所示；contentScrim内容遮罩...attr/colorPrimary"，即显示为Toolbar颜色，应用的主题色；layout_collapseMode折叠模式，设置其他控件滚动时自身的交互行为，有两种取值：parallax，折叠视差效果...当设置为1.0，滚动列表时图片不会折叠移动； 代码实现： 关于CoordinatorLayout作为根布局容器如何协调子控件之间的交互行为，可以参考上一篇文章，这里我介绍一下本例中几个新的注意点。
扩展或者缩小Toolbar或者头部，让主内容区域有更多的空间。 ? 控制哪个view应该扩展还是收缩，以及其显示大小比例，包括视差滚动效果parallax scrolling effects 动画。...: 接下来，我们必须使用一个容器布局：AppBarLayout来让Toolbar响应滚动事件。...然后，我们需要定义AppBarLayout与滚动视图之间的联系。...AppBarLayout.ScrollingViewBehavior描述了RecyclerView与AppBarLayout之间的依赖关系。...为了制造出这种效果，我们添加一个定义了app:layout_collapseMode=”parallax” 属性的ImageView。
attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style...，然后是内容区和FloatingActionButton 这个AppBarLayout是有固定高度的，然后里面包着Toolbar，Toolbar外层是CollapsingToolbarLayout，是可折叠的...只有在内容区可滑动的状态下会触发效果，所以内容区外层是NestedScrollView，app:layout_behavior="@string/appbar_scrolling_view_behavior..."属性触发滑动效果， 所以内容区需要可滑动且加上app:layout_behavior属性才能触发滑动效果，换成RecycleView加上app:layout_behavior属性也是可以的 图二效果：...attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style
一个问题NestedScrollView高度加上顶部AppBarLayout高度没超过屏幕高低滑动有问题（只能在AppBarLayout范围内才能滑动）； 内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...attr/actionBarSize" app:layout_collapseMode="pin" app:logo="@android:...定义滚动视图是否应该伸展它的内容来填补视窗。...渲染指定的画布 //获取新的布局参数 generateLayoutParams(AttributeSet attrs) Returns a new set of layout parameters
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
