Android:如何在滚动时更改折叠工具栏中的视图 - 腾讯云开发者社区

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

2K4 0

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

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

3.3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【翻译】MotionLayout实现折叠工具栏（Part 1）

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

2K3 1

【翻译】MotionLayout实现折叠工具栏（Part 2）

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

1.7K3 0

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

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

2.3K9 0

CoordinatorLayout使用全解析

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

2.2K2 0

VSCode1.59版本发布

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

1.7K3 0

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

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

3.2K2 0

Constraint Layout 2.0 用法详解

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

2.3K3 0

折叠屏上应用设计规范，了解一下？

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

4.5K2 0

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.3K2 0

Android开发笔记（一百六十四）仿京东首页的下拉刷新

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

2.9K4 0

android studio logcat技巧

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

1831 0

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

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

5.9K2 0

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

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

3.3K6 0

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

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

2.7K2 0

CollapsingToolbarLayout使用

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

2.5K6 0

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

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

9892 0

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

不要在活动的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.1K4 0

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

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

4.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

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

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

【翻译】MotionLayout实现折叠工具栏（Part 1）

【翻译】MotionLayout实现折叠工具栏（Part 2）

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

CoordinatorLayout使用全解析

VSCode1.59版本发布

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

Constraint Layout 2.0 用法详解

折叠屏上应用设计规范，了解一下？

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

Android开发笔记（一百六十四）仿京东首页的下拉刷新

android studio logcat技巧

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

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

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

CollapsingToolbarLayout使用

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

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

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

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐