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

CollapsingToolbarLayout:在顶部修复自定义布局

CollapsingToolbarLayout 是 Android 中用于创建可折叠工具栏的一个布局容器,通常与 CoordinatorLayoutAppBarLayout 结合使用。要在 CollapsingToolbarLayout 的顶部固定自定义布局,你可以使用 app:layout_collapseMode="pin" 属性来确保自定义布局在滚动时保持在顶部。

以下是一个示例代码,展示了如何在 CollapsingToolbarLayout 的顶部固定自定义布局:

XML 布局文件

代码语言:javascript
复制
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 自定义布局 -->
            <LinearLayout
                android:id="@+id/custom_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_collapseMode="pin">

                <!-- 添加你的自定义视图 -->
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Custom View 1" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Custom View 2" />

            </LinearLayout>

            <!-- 标题栏 -->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 内容视图 -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match营parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 添加你的内容视图 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Scrollable content goes here..." />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

解释

  1. CoordinatorLayout:作为根布局,负责协调子视图之间的交互。
  2. AppBarLayout:包含 CollapsingToolbarLayout,用于实现可折叠的工具栏效果。
  3. CollapsingToolbarLayout:包含自定义布局和 Toolbar,并设置 app:layout_scrollFlags="scroll|exitUntilCollapsed" 以实现滚动效果。
  4. 自定义布局:使用 app:layout_collapseMode="pin" 属性固定在顶部。
  5. Toolbar:也使用 app:layout_collapseMode="pin" 属性固定在顶部。
  6. NestedScrollView:作为内容视图,包含可滚动的内容。

通过这种方式,你可以确保自定义布局在滚动时保持在顶部,并且不会随着工具栏的折叠而消失。

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

相关·内容

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

调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...,而固定的view继续留在顶部。...,它可以控制包含在CollapsingToolbarLayout中的控件响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...关于CollapsingToolbarLayout几个属性的介绍 app:collapsedTitleTextAppearance 这是收缩时Title文字特点外形的设置 app:expandedTitleTextAppearance...同理这是展开时Title文字特点外形的设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景的设置 app:expandedTitleMarginStart 设置扩张时候

2.3K90

CollapsingToolbarLayout使用

CollapsingToolbarLayout 可以看到,Toolbar的标题放大并在下方显示,当我们向上滑动列表时,顶部Header部分的图片向上折叠隐藏,标题向上移动并缩小,同时以渐显式的方式显示蓝色主题...这个效果就是利用了CollapsingToolbarLayout控件,讲解案例代码前,先来介绍一下CollapsingToolbarLayout。...CollapsingToolbarLayout CollapsingToolbarLayout 的 Children 布局上,可以按照 FrameLayout 的属性来拍版,因为它本身继承于 FrameLayout...关于CollapsingToolbarLayout的属性官网上可以查到,这里我只介绍案例中我们常用的几个属性:title标题,布局展开时放大显示图片底部,布局折叠时缩小显示Toolbar左侧。...表示控件向上折叠退出并以最小高度停留在顶部;前面介绍CollapsingToolbarLayout属性时介绍到了statusBarScrim的使用,其实也可以通过android:fitsSystemWindows

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

    顶部,是因为我们没有设置其layout_scrollFlags,即TabLayout是静态的 运行以后,即可看到以下的结果 ?...TableLayout 绑定在一起 mTabLayout.setupWithViewPager(mViewPager); } } 如果我们想更改Indicator的相关样式,我们可以布局文件里面使用...,你可以参考我的这一篇博客仿网易新闻的顶部导航指示器 ---- 在看例子结合ViewPager的视觉特差之前 ,我们需要先了解CollapsingToolbarLayout这个控件 CollapsingToolbarLayout...方法一:代码中使用这个方法 setCollapseMode(int collapseMode) 方法 二:布局文件中使用自定义属性 app:layout_collapseMode="pin" 到此...,CollapsingToolbarLayout的一些重要属性已经讲解完毕,下面我们一起来看一下我们是怎样结合ViewPager实现视差效果的 ---- 结合ViewPager的视觉特差 布局代码 <

    5K10

    CoordinatorLayout使用全解析

    CoordinatorLayout是 Google IO/15 大会发布的,遵循Material 风格,包含在 support Library中,结合AppbarLayout, CollapsingToolbarLayout...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色,通过app:statusBarScrim设置折叠时状态栏的颜色。...CollapsingToolbarLayout的子布局有3种折叠模式(Toolbar中设置的app:layout_collapseMode) off:默认属性,布局将正常显示,无折叠行为。...pin:CollapsingToolbarLayout折叠后,此布局将固定在顶部。 parallax:CollapsingToolbarLayout折叠时,此布局也会有视差折叠效果。...> 通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置CollapsingToolBarLayout上,而不是Toolbar。

    2.1K20

    Android view滑动悬浮固定效果实现代码示例

    1.背景 项目开发过程中,有时候会碰到这样的需求:滑动的过程中,某时要将子view固定在顶部(常见的是将界面中的tab滑动到顶部的时候进行固定)。...2.思路 (CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout)+TabLayout+ViewPager 3.代码实现 a.主布局代码 <?...仅仅加载布局而已,所以在此就不贴出来了。 4.扩展 a.关于CollapsingToolbarLayout中子view的排列顺序对显示结果造成的影响 如图: ?...如果将Toolbar去掉,那么所有的CollapsingToolbarLayout中的View都会滑出界面,此时布局就变成了普通布局了(相当于CollapsingToolbarLayout变成了CollapsingLayout...(这样也避免了:CollapsingToolbarLayout中,因为视图折叠覆盖的问题,会导致整个ImageView被TabLayout覆盖一部分而显示不完全的问题。)

    86710

    CoordinatorLayout与滚动的处理

    假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。 ?...记住,要把带有scroll flag的view放在前面,这样收回的view才能让正常退出,而固定的view继续留在顶部。 此时,你应该注意到我们的Toolbar能够响应滚动事件了。 ?...通常,我们我们都是设置Toolbar的title,而现在,我们需要把title设置CollapsingToolBarLayout上,而不是Toolbar。...> ---- Custom Behaviors (自定义Behavior) CoordinatorLayout 与浮动操作按钮中我们讨论了一个自定义behavior的例子。...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior 的子view,不管是通过xml中使用app:layout_behavior标签还是通过代码中对

    78220

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

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的。...再嵌套CollapsingToolbarLayout再嵌套Toolbar的布局。...,支付宝首页的头部伸缩时可是有动画效果的,就像下面这个动图那样有淡入淡出的渐变动画: ?...这个渐变动画其实可分为两段: 1、导航栏从展开状态向上收缩时,头部的各控件要慢慢向背景色过渡,也就是淡入效果; 2、导航栏向上收缩到一半,顶部的工具栏要换成收缩状态下的工具栏布局,并且随着导航栏继续向上收缩...; 2、导航栏向下展开到一半,顶部的工具栏要换成展开状态下的工具栏布局,并且随着导航栏继续向下展开,新工具栏上的各控件也要慢慢变得清晰起来,也就是淡出效果。

    1.2K10

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

    android:fitsSystemWindows,经本人代码测试,表示CollapsingToolbarLayout的上边界是否扩展到statusbar,这里如果想使用透明的statusbar,这里更新下应该该布局的根布局的该属性为...true,不过这里兼容性还是存在问题的,特别是android 4.4版本的折叠布局的透明statusbar,不知道改为有没更好的方式。...enterAlwaysCollapsed - 当你的View已经设置minHeight属性又使用此标志时,你的View只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。...题外话3 23.2.0中CoordinatorLayout中使用Toolbar ,toolbar无法与顶部对齐,即顶部存在垂直间距。...解决方法AppBarLayout添加 android:fitsSystemWindows="true"

    3.4K50

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

    上滑 顶部背景图片缓慢消失,标题悬浮 标题 上栏加入布局,放一些搜索框 输入框TextInputEditText的使用 1:上滑 顶部背景图片缓慢消失,标题悬浮 ?...1.1:CoordinatorLayout中设置   前面的添加依赖,在上一篇中已经说过,在这就不在重复了,协调者布局中这次又加入了一个新的布局CollapsingToolbarLayout(折叠工具栏布局...竟然折叠的部分是toolbar和背景图片,这就理所应当的把这两个空间写在CollapsingToolbarLayout中,因为上面协调者布局和appbar布局很简单,这里就不在写了,只贴出折叠布局代码(...对于这个悬浮按钮里面也有很多属性,这里就不在一一写出了,这里只是作为一个辅助,让我们视觉更舒服所加的。 2:标题 上栏加入布局,放一些搜索框 ?...2.1:布局书写 这里的布局和上面是一样的,只是把imageview换成了LinearLayout布局布局中写上我们熟悉的输入框和图片按钮即可, 最外层-->里层还是:CoordinatorLayout

    1.6K100

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

    讲解之前先看看界面布局文件,一个一个讲讲怎么实现吧: <android.support.design.widget.CoordinatorLayout xmlns:android="http:...<em>在</em>各个<em>布局</em>文件里,最外围的是CoordinatorLayout这个控件,这个有什么作用呢,就我的大白话来说就是协调子View之间动作的一个父View,通过Behavior来给子view实现交互的。...内部的子View通过<em>在</em><em>布局</em>中加app:layout_scrollFlags设置执行的动作。...,View就暂时不去往下滚动,直到ScrollView滑动到<em>顶部</em>不再滑动时,View再继续往下滑动,直到滑到View的<em>顶部</em>结束。...<em>CollapsingToolbarLayout</em>只要有这方面: 1.title展开时是最大的,然后随着收缩会越来越少,直到屏幕的<em>顶部</em>,通过app:title设置title,不然就默认。

    1.1K20

    Android开发(51) 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 很app上都见过 可折叠的顶部导航栏效果。google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果。效果图如下: ? ? ?...实现步骤 1.写一个 CollapsingToolbarLayout,它有两个 子视图,一个就是上图显示的图片(降落伞哪个)的Imageview,另一个就是 顶部导航栏toobar 2.为 CollapsingToolbarLayout...它是可以折叠的 app:layout_collapseMode="parallax" 4.为 toobar指定属性,声明它是固定的 app:layout_collapseMode="pin" 5.为 CollapsingToolbarLayout...所在的父布局(view)指定属性,以声明它适配当前窗体 android:fitsSystemWindows="true" 代码 布局xml如下 <?...true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout

    1.7K00

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

    可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...这里要明确一点,Toolbar本身是页面顶部的工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?...不过,Android实现展开效果的时候,并非直接让Toolbar展开或收缩,而是另外提供了CollapsingToolbarLayout,通过该布局包裹Toolbar,从而控制标题栏的展开和收缩行为。...上述属性代码中的设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...工程中使用CollapsingToolbarLayout,则需注意以下几点: 1、添加几个库的支持,包括appcompat-v7库(Toolbar需要)、design库(CollapsingToolbarLayout

    3.3K30

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

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

    1.7K10

    Android仿微博个人详情页滚动到顶部的实例代码

    个人详情页滑动到顶部 最近产品提了个新需求,需要实现点击App内的某个按钮跳转到个人详情页并且滑动到顶部,个人详情页的页面交互稍微复杂,技术角度上包含了状态栏颜色变换,view滑动联动等问题,技术实现上采用了...微博默认的效果以及手动滑动到顶部的效果图如下。 ? ? 个人详情页技术实现分析: 先看看xml布局的伪代码: <?xml version="1.0" encoding="utf-8"?...layout_height="wrap_content" android:background="#fff6f6f6" <android.support.design.widget.CollapsingToolbarLayout...目前我们要实现的是,进入当前页面时,强制让AppBarLayout滑动到顶部,使toolbar悬浮固定不动。...这个值,实际上是最开始做个人详情页这个需求就已经得出的值。

    1.2K20

    ConstraintLayout2.0一篇写不完之嵌套滚动怎么滚

    ConstraintLayout1.x阶段,它主要提供的能力是对静态布局的支撑,那么到2.x之后,MotionLayout的拓展,让它对动态布局的支持有了进一步的优化,1.x阶段不能实现的嵌套滚动布局布局方式...,就需要自定义behavior来实现,这样一来,嵌套滚动布局就成了一个比较复杂的布局方式了,而MotionLayout的出现,就可以完美的解决这样一个布局难题。...可以发现,这种方式,实际上就是利用MotionLayout来替代之前AppBarLayout里面的CollapsingToolbarLayout,借助MotionLayout来实现之前CollapsingToolbarLayout...addOnOffsetChangedListener(this) } } ❝这两种方式没有本质上的不同,但是对于MotionEditor来说,如果使用自定义的MotionLayout,非根布局下创建约束的时候会有一些问题...PS:好消息,Android Studio Arctic Fox已经修复了这个问题。

    1.1K30

    再学一遍android:fitsSystemWindows属性

    Android手机顶部用于显示各种通知和状态信息的这个栏叫做状态栏。 通常情况下,我们应用程序的内容都是显示状态栏下方的。...话说为什么android:fitsSystemWindows属性,设置CoordinatorLayout布局上就能生效,设置FrameLayout布局上就没有效果呢?...Google提供的诸多布局当中,并不是只有CoordinatorLayout会处理android:fitsSystemWindows属性,像CollapsingToolbarLayout、DrawerLayout...的外面又包裹了一层CollapsingToolbarLayout,并且给CollapsingToolbarLayout也设置了android:fitsSystemWindows属性,这样CollapsingToolbarLayout...但是可能有的朋友会说,由于项目限制的原因,他们无法使用CoordinatorLayout或CollapsingToolbarLayout,而是只能使用像FrameLayout或LinearLayout这样的传统布局

    1.2K50

    详解android特性之CoordinatorLayout用法探析实例

    当我AS上新建一个module时,系统默认的最外层布局不再是我们熟悉的五大布局中的一种,而是一个全新的布局:CoordinatorLayout。...通过效果显示,当视图滚动的时候,ToolBar滚出了屏幕,为内容区域留出了更大空间。...假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。...这个时候呢,我们把Toolbar直接放在CollapsingToolbarLayout下,先修改appbar_main.xml布局如下: <?...CoordinatorLayout的工作原理是搜索定义了CoordinatorLayout Behavior的子view,不管是通过xml中使用app:layout_behavior标签还是通过代码中对

    95841
    领券