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

Android:如何在滚动时更改折叠工具栏中的视图

在Android中,可以通过使用CoordinatorLayout和AppBarLayout来实现滚动时更改折叠工具栏中的视图。

首先,在布局文件中,使用CoordinatorLayout作为根布局,并在其中添加一个AppBarLayout和一个NestedScrollView(或RecyclerView等可滚动的视图)作为子视图。AppBarLayout包含一个Toolbar和一个CollapsingToolbarLayout,用于实现折叠工具栏效果。

示例代码如下:

代码语言:xml
复制
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

            <!-- 在CollapsingToolbarLayout中添加其他视图 -->

        </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">

        <!-- 可滚动的内容视图,如TextView、RecyclerView等 -->

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

接下来,在代码中,可以通过监听NestedScrollView的滚动事件来动态改变折叠工具栏中的视图。可以使用addOnScrollChangedListener方法添加滚动监听器,并在监听器中根据滚动的距离来改变视图的属性,例如改变Toolbar的标题、背景颜色等。

示例代码如下:

代码语言:java
复制
NestedScrollView nestedScrollView = findViewById(R.id.nestedScrollView);
final Toolbar toolbar = findViewById(R.id.toolbar);

nestedScrollView.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
    @Override
    public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
        // 根据滚动距离来改变视图的属性
        if (scrollY > 0) {
            // 向下滚动
            toolbar.setTitle("New Title");
            toolbar.setBackgroundColor(Color.RED);
        } else {
            // 向上滚动
            toolbar.setTitle("Original Title");
            toolbar.setBackgroundColor(Color.TRANSPARENT);
        }
    }
});

通过以上步骤,就可以在滚动时动态改变折叠工具栏中的视图了。

腾讯云相关产品和产品介绍链接地址:

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

相关·内容

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

那么Android5.0也同时给出了相应解决方案,即推出MaterialDesign库,通过该库AppBarLayout控件,对Toolbar加以包装,从而实现顶部工具栏动态变化效果。...NestedScrollView继承自FrameLayout,其用法与ScrollView相似,都必须且只能带一个直接子视图,都是允许视图上下滚动等等。...1、AppBarLayout滚动依赖于主体视图滚动,与主体视图相对应,可将AppBarLayout称作头部视图。既然一个页面分为头部和主体两部分,那么就存在谁先滚谁后滚问题了。...2、AppBarLayout内部高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化工具栏,不会完全看不到工具栏。具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度。

2K40

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

折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...上述属性在代码设置方法如下所示: setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开背景颜色。...指定子视图(通常是Toolbar)折叠模式。...具体滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠最小高度。然后头部与主体先一起滚动,头部滚到位后,主体继续向上。 向下滚动:头部与主体先一起滚动,一直滚到头部折叠最小高度。...> 点击下载本文用到折叠工具栏布局工程代码 点此查看Android开发笔记完整目录

3.3K30
  • 【翻译】MotionLayout实现折叠工具栏(Part 1)

    本系列教程,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...MotionLayout 和安卓上许多其他动画框架一个主要不同点在于:视图动画和属性动画运行时长是给定,比如指定动画时长,取消某个动画都是可行,但是不能做到用户控制一个正在进行动画。...举个例子,一个折叠工具栏应该根据用户滚动进行展开和折叠,所以实际动画运行应该时刻跟随用户拖拽进行。这也是那些框架办不到地方。 废话不多说,让我们看下我们所要尝试模拟做到行为动作。...如果在设计视图中查看这个布局,我们能看到布局所展示工具栏处于展开状态: ?...我们使用是一个标准 ImageView 控件,当其位于 ConstraintSet 下 Constraint 元素,其主要属性变成可以是 ConstraintLayout.LayoutParams

    1.9K31

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

    本系列教程,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...因此我们得到是一个非常平滑过渡动画,从工具栏开始发生折叠一直到工具栏完全达到折合状态为止。这也很好解释了我们所看到在 MotionLayout 对动画行为实现。...目前来说,发生情况是:图片透明度在过渡动画还没有达到 60% 之前是不会发生变化(也就是至少超过一半折叠状态下不发生变化),接下来会慢慢开始淡出,直到工具栏达到 90% 折叠完全透明。 ?...最终标题文本会走在工具栏折叠动画之前,接着在折叠完全结束时候直接回落到正确位置上: ?...但是在目前来说,添加 tools:showPaths="true" 这段代码能够让 MotionLayout 计算并显示这三个被过渡动画所影响视图控件轨迹路线:标题文本控件(顶部,中心左侧),工具栏海滩小排屋图片

    1.7K30

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

    ,它可以控制包含在CollapsingToolbarLayout控件在响应layout_behavior事件作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。...它是设计用于直接AppBarLayout视图。...CollapsingToolbarLayout子View可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式,当CollapsingToolbarLayout...parallax - 设置为这个模式,在内容滚动,CollapsingToolbarLayoutView(比如ImageView)也可以同时滚动,实现视差滚动效果,通常和layout_collapseParallaxMultiplier...我在做这里时候遇到一个问题,那就是CollapsingToolbarLayout里Title问题,一般默认是显示,即使你不写,它也有会一个默认值一直显示在那里,等折叠收缩完时候,停留在标题工具栏

    2.3K90

    VSCode1.59版本发布

    对笔记本布局进行了一些改进: 当单元格折叠,单元格输入第一行现在被渲染。 当窗口宽度不足以呈现所有主要操作,笔记本编辑器工具栏操作将移动到溢出菜单 ( ... ) 。...默认值notebook.undoRedoPerCell现在更改为true。...又是一个新设置 workbench.editor.sharedViewState添加了一个新设置来配置编辑器视图状态(例如,编辑器滚动位置)在编辑器组之间共享方式。...但是,当你启用此设置,除非为编辑器组找到更具体视图状态,否则将在所有编辑器组中保留并使用最新编辑器视图状态。...) 转到父折叠( editor.gotoParentFold) 这个是让导入语句可以自动折叠 该功能适用于 TypeScript、JavaScript、Java、C#、C++ 还有一个字面意思设置

    1.7K30

    CoordinatorLayout使用全解析

    exitUntilCollapsed:当你定义了一个minHeight,此布局将在滚动到达这个最小高度时候折叠。 snap:当一个滚动事件结束,如果视图是部分可见,那么它将被滚动到收缩或展开。...例如,如果视图只有底部25%显示,它将折叠。相反,如果它底部75%可见,那么它将完全展开。...,它可以控制包含在CollapsingToolbarLayout控件(:ImageView、Toolbar)在响应layout_behavior事件作出相应scrollFlags滚动事件(移除屏幕或固定在屏幕顶端...CollapsingToolbarLayout可以通过app:contentScrim设置折叠工具栏布局颜色,通过app:statusBarScrim设置折叠状态栏颜色。...> 然后,我们需要定义AppBarLayout与滚动视图之间联系。

    2.1K20

    UI自动化 --- UI Automation 基础详解

    滚动窗口属性 ScrollPattern ScrollPatternIdentifiers 可选择某项(列表某项)状态和容器 SelectionItemPattern SelectionItemPatternIdentifiers...例如,您可以使用 Invoke 控件模式来处理可以调用控件(如按钮),并使用 Scroll 控件模式来处理带有滚动控件(列表框、列表视图或组合框)。...ScrollPattern IScrollProvider 用于可滚动控件。 例如,一个控件其所具有的滚动条在控件可视区域中存在信息超过了可被显示信息,便处于活动状态。...ScrollItemPattern IScrollItemProvider 用于一种控件,该控件具有可滚动列表各个项。 例如,一个列表控件,该控件具有滚动列表各个项,组合框控件。...当桌面上有新 UI 项变得可见、隐藏或删除,结果便发生更改。 全局桌面更改 当与客户端相关全局操作发生引发,例如当焦点从一个元素转换到另一个元素、或窗口关闭

    2.3K20

    折叠屏上应用设计规范,了解一下?

    深入理解布局 深入理解布局指南 介绍了布局容器相关概念,它提供了一个整体框架,可帮助开发者思考如何在屏幕上排列导航栏、工具栏和内容等界面元素。...包括适当缩放以展示更多内容,示例副标题和日期,以及较小组合技术,例如在紧凑型布局对内容进行视觉分组并保持其相关性等。...△ 使用栏式网格在不同屏幕尺寸对内容进行重排 记住网格系统有助于您选择组件行为,在不同布局,以对设备尺寸和场景最有意义方式决定替换还是更改组件。...FoldingFeature 还包含窗口中折叠位置,当折叠导致内容视图被割裂,我们应该及时更新布局参数。...在如此多样化硬件生态系统,您可能很难拥有各种形状和尺寸设备,如今 Android SDK 为可折叠设备提供了模拟器图像,这些模拟器允许您随时将折叠状态更改为铰链角度。

    4.5K20

    Android开发笔记(一百六十四)仿京东首页下拉刷新

    一些第三方开源库PullToRefresh、SmartRefreshLayout固然能让整体页面下滑,可是顶部下拉布局很难个性化定制,至于状态栏、工具栏背景色修改更是三不管。...所以此处得捕捉页面滚动到顶部事件,相对应则是页面滚动到底部事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...然而成功监听页面是否到达顶部或底部,仅仅解决了状态栏和工具栏变色问题。因为页面到顶继续下拉,ScrollView要怎么处理?...,也不做额外处理; 4、拉到顶之后继续下拉,则隐藏工具栏同时,还要让下拉头部跟着往下滑动; 5、下拉刷新过程松开手势,判断下拉滚动距离,距离太短则直接缩回头部、不进行页面刷新;只有距离足够长,才能触发页面刷新动作...运行改造后测试App,下拉刷新效果见下列组图,其中左图为正在下拉截图,右图为松开下拉、开始刷新之时截图。 ? ? 点此查看Android开发笔记完整目录

    2.9K40

    Android5.0和6.0之后新增控件说明

    滑动面板布局 SlidingPaneLayout Android 5.0 嵌套滚动视图 NestedScrollView Android 5.0 appcompat-v7 工具栏 Toolbar Android...6.0 应用栏布局 AppBarLayout Android 5.0 可折叠工具栏布局 CollapsingToolbarLayout Android 5.0 侧滑删除 SwipeDismissBehavior...这个与系统版本有关,每个版本android.jar是固定,有在该内核定义控件才能正常调用,没在内核定义控件在运行时会扔出类找不到异常。...使用v4控件唯一需要注意地方,是布局文件要引用完整路径控件名称,抽屉布局android.support.v4.widget.DrawerLayout、下拉刷新布局android.support.v4...这部分控件数量最多,实现界面特效最丰富,而且互相之间存在依赖关系,design库依赖于appcompat-v7库,部分design控件NavigationView还依赖于recyclerview-v7

    1.3K20

    Constraint Layout 2.0 用法详解

    也许您已熟悉了 Constraint Layout 1.1 版本功能,并开始用它来快速构建复杂页面布局,而新版本除了包含 1.1 版本所有功能之外,还在 Android Studio 中集成了可以直接预览...Constraint Layout 2.0 带来了许多关于 Contraint Layout 新特性,您可以通过在 build.gradle更改版本来升级使用。...您可以对视图移动、滚动、缩放、旋转、淡入淡出等一系列动画行为进行自定义,甚至可以定义各个动画本身自定义属性。它还可以处理手势操作所产生物理移动效果,以及控制动画速度。...这样一来,在协调多个视图动画,就可以做到对各个细节进行精细操控。...尤其是在以下两种情况下,MotionLayout 会比其它动画构建工具更胜一筹: 可追溯动画 - 由其它输入驱动动画,例如工具栏滚动时会出现折叠效果 状态转换 - 由状态更改驱动动画,例如用户进入某一界面后

    2.3K30

    如何使用纯前端控件集 WijmoJS 可视化在线设计器

    开始使用WijmoJS Designer 设计器可视化界面首次打开,该设计图面默认自带一个带有实时样本数据纯前端FlexGrid表格控件,要删除它,请单击“编辑”工具栏“删除”按钮。...设计表面现在看起来像这样: 要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部任何位置(“编辑”工具栏下方区域)。...这与首次打开设计器默认FlexGrid显示数据集相同,仅限于前六行。 在“属性”窗格,请注意图表上有四个表示复杂对象属性:axisX,axisY,dataLabel和legend。...单击“属性”窗格“后退”按钮以返回FlexChart设置。 接下来,单击图例属性齿轮图标,并将其位置设置更改为“底部”。 像以前一样单击后退按钮返回FlexChart设置。...在“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格上,然后单击出现链接。

    5.9K20

    android studio logcat技巧

    Android Studio ,在物理设备或模拟器上构建并运行您应用。 从菜单栏中选择“视图”>“工具窗口”>“Logcat”。 默认情况下,Logcat 滚动到末尾。...单击 Logcat 视图或使用鼠标滚轮向上滚动可关闭此功能。要重新打开它,请从工具栏单击滚动到末尾 。您还可以使用工具栏清除、暂停或重新启动 Logcat。...您可以通过单击 Logcat 工具栏配置 Logcat 格式选项 切换到默认显示信息较少紧凑视图。...更改配色方案 要更改配色方案,请导航至 Android Studio > 设置 > 编辑器 > 配色方案。要更改日志视图配色方案,请选择 Android Logcat。...在 Logcat 工具栏,您可以滚动到日志末尾,也可以单击特定行以保持该行可见。 在 Android Studio ,您可以直接从主查询字段生成键值搜索。

    11810

    熟悉Android Studio界面,开始装逼卖萌

    菜单栏提供了文件管理、编辑、视图、导航、代码检查、分析、重构、构建、运行、工具、版本控制系统等功能。 2工具栏 工具栏详细如下图: ?...4编辑器 编辑器是基于标签,在Android Studio每打开一个文件编辑,会同时打开一个新文件标签。 ?...左边栏: 左边栏显示了代码附加信息,并显示不同图标来区别代码结构、书签、断点、范围指示符、变化标记和代码折叠线等。...最后图标表示当前语法最高亮级别,有Inspections、Syntax、None,可以通过该图标进行更改。...区域8为日志操作按钮,从上到下分别为:清除日志、滚动到日志最后、向上查看堆栈信息、向下查看堆栈信息、开启日志自动换行、打印、重启、Logcat设置、Logcat帮助。

    3.2K60

    从零开始Android:常见UI设计模式

    当您应用程序只有几个部分时,此模式很有用,因为它为用户提供了一种快速简便方法来更改视图。 但是,如果要在选项卡中放入五个或更多项目,则应考虑将导航操作移到抽屉。...根据Android材料设计指南,选项卡也可以存在于屏幕底部,Google+应用程序所示。 导航抽屉 导航抽屉是一个视图,可以从应用程序侧面滑出,以便向用户显示选项列表。...这种设计模式在Android应用程序中经常使用,以提供一种方法来更改应用程序部分或执行不必绑定到任何屏幕全局操作。...工具列 您可能已经注意到,Android应用程序大多数页面在屏幕顶部都包含一个工具栏。...至少,该工具栏包含该部分或应用程序标题,但是工具栏设计模式还有助于将操作按钮直接放置在工具栏或溢出菜单,以允许用户在应用程序该部分执行任务。

    2.7K20

    CollapsingToolbarLayout使用

    关于CollapsingToolbarLayout属性在官网上可以查到,这里我只介绍案例我们常用几个属性:title标题,布局展开放大显示在图片底部,布局折叠缩小显示在Toolbar左侧。...注意,没有设置这个属性,默认使用Toolbar标题;statusBarScrim顶部视图折叠状态下,状态栏遮罩色。通常这样设置:app:statusBarScrim="?...,效果图中所示;contentScrim内容遮罩,上下滚动图片上面显示和隐藏遮罩色,Toolbar位置背景色;通常这样设置:app:contentScrim="?...attr/colorPrimary",即显示为Toolbar颜色,应用主题色;layout_collapseMode折叠模式,设置其他控件滚动自身交互行为,有两种取值:parallax,折叠视差效果...当设置为1.0,滚动列表图片不会折叠移动; 代码实现: 关于CoordinatorLayout作为根布局容器如何协调子控件之间交互行为,可以参考上一篇文章,这里我介绍一下本例几个新注意点。

    2.5K60

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

    ="pin" app:layout_collapseMode="none" 从xml参数说吧, 来看CollapsingToolbarLayout折叠模式....如果在此之前任何兄弟视图没有此标志, 则此值无效. exitUntilCollapsed 退出(滚动屏幕), 视图滚动直到“折叠”. 折叠高度由视图最小高度定义。...snap 在滚动结束, 如果视图仅部分可见, 则它将被捕捉并滚动到其最近边缘. enterAlways 当进入(在屏幕上滚动), 无论滚动视图是否也在滚动, 视图都将滚动任何向下滚动事件....这通常被称为“快速返回”模式. enterAlwaysCollapsed 'enterAlways'另一个标志, 它修改返回视图, 最初只回滚到它折叠高度....一旦滚动视图到达其滚动范围末尾, 该视图其余部分将滚动视图中. 折叠高度由视图最小高度定义.

    98320

    三星折叠屏开发者设计指南揭秘

    不要在活动OnDestroy()调用finish()或自行终止进程,否则将导致APP在设备折叠或展开关闭。...1.2 运行时系统变更 - 自行处理 如果因性能限制等因素希望在不自动重启Activity情况下处理配置更改,您需要在应用清单manifest增加android:configChanges属性,...image 当指定属性(可折叠设备折叠/展开触发)发生变化时,MyActivity不会重启,而是会收到 onConfigurationChanged()调用,在此方法处理配置变更,更新视图布局...image 2.2 APP如何在Multi-resume运行 在Android P (9.0)启用Multi-resume,请在应用清单manifest增加如下元数据: ? image 3....备用布局,Android允许应用针对不同屏幕配置提供多种备选布局。可以利用配置限定符实现此目的,它允许系统根据当前配置(针对不同屏幕尺寸不同布局设计)自动选择合适资源。

    4.1K40

    为任意屏幕尺寸构建 Android 界面

    ; 在所有的 Reference Devices 上都测试一遍您应用,优先采用在中等型下最佳布局; 为了提供更好用户体验,请添加对应用有意义功能,支持可折叠设备折叠状态或针对键盘、鼠标和触控笔输入支持进行优化...我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑是导航模型,所幸我们不会更改很多具体视图,仅仅只会更改导航方式,因为 NavRail 会一直存在于整个视图体系,可以通过它导航到任何其他视图...其中比较有趣一点是思考应用如何在不同尺寸布局之间转换,例如对于可折叠手机,应用可能会从较大屏幕变为较小屏幕。...但这次更改是针对屏幕尺寸做决策,我们是不是可以让单个组件自身根据页面而拥有不同尺寸呢?例如我们有一张卡片,当在列表因为空间限制只展示标题和副标题,而有更多空间,则调整为显示图像。...获取更好用户体验 在前文中,我们提到为了提供更好用户体验,请添加对应用有意义功能,支持可折叠设备。

    4.2K20
    领券