文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

【翻译】MotionLayout实现折叠工具栏（Part 2） 2018-08-27 by Liuqingwen | Tags: Android 翻译 | Hits ?...本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。...我们已经讨论过 MotionLayout 是如何在 ConstraintSets 中所定义的固定布局之间进行过渡动画了。...因此我们得到的是一个非常平滑的过渡动画，从工具栏开始发生折叠一直到工具栏完全达到折合状态为止。这也很好的解释了我们所看到的在 MotionLayout 中对动画行为的实现。...最终标题文本会走在工具栏折叠动画之前，接着在折叠完全结束的时候直接回落到正确的位置上： ?

1.6K30

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

可折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，...不过，Android在实现展开效果的时候，并非直接让Toolbar展开或收缩，而是另外提供了CollapsingToolbarLayout，通过该布局包裹Toolbar，从而控制标题栏的展开和收缩行为。...上述属性在代码中的设置方法如下所示： setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。...同时声明scroll和enterAlways，滚动效果如下图所示： ? 3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。...> 点击下载本文用到的可折叠工具栏布局的工程代码 点此查看Android开发笔记的完整目录

3K30
您找到你想要的搜索结果了吗？
是的
没有找到

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

应用栏布局AppBarLayout Android5.0推出工具栏Toolbar用来替代ActionBar，灵活性和易用性大大增强，有关Toolbar的详细介绍参见《Android开发笔记（一百一十九...那么Android5.0也同时给出了相应的解决方案，即推出MaterialDesign库，通过该库中的AppBarLayout控件，对Toolbar加以包装，从而实现顶部工具栏的动态变化效果。...2、AppBarLayout内部的高度也可能变化，比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout，有关可折叠工具栏布局的详细介绍参见《Android开发笔记（一百三十六）可折叠工具栏布局...所以本文只做下面三个标志的概念解释，有关的效果图参见《Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout》。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏，不会完全看不到工具栏。具体的滚动说明如下所示： 向上滚动：头部先往上收缩，一直滚到折叠的最小高度。

1.8K40

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

深入理解布局 深入理解布局指南 介绍了布局容器的相关概念，它提供了一个整体框架，可帮助开发者思考如何在屏幕上排列导航栏、工具栏和内容等界面元素。...△ 布局的三个主要区域 指南中的 组合部分 带您了解如何充分利用屏幕空间以保障可读性，并且以尊重用户心智模型的方式在不同的场景下合理排布重要内容和操作选项。...包括适当缩放以展示更多内容，如示例中的副标题和日期，以及较小的组合技术，例如在紧凑型的布局中对内容进行视觉分组并保持其相关性等。...△ 使用栏式网格在不同屏幕尺寸中对内容进行重排 记住网格系统有助于您选择组件行为，在不同的布局中，以对设备尺寸和场景最有意义的方式决定替换还是更改组件。...适配可折叠设备 可折叠设备不仅配备了更大的屏幕，它们还可以根据设备的折叠方式和用户的使用方式调整设备的方向/姿势。 目前有三种常见的设备形态: 折叠、未折叠和桌面模式 (悬停)。

4.3K20

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

本系列教程中，我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为：一个折叠工具栏动画（ a Collapsing Toolbar ）。...举个例子，一个折叠工具栏应该根据用户的滚动进行展开和折叠，所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说，让我们看下我们所要尝试模拟做到的行为动作。...这里的代码展示了一个折叠工具栏，应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...当然在实际 App 开发过程中我应该会使用 AppBarLayout 布局配合 Toolbar 控件吧。 如果在设计视图中查看这个布局，我们能看到布局所展示的工具栏处于展开的状态： ?...这事实上效果已经非常接近，但是仔细看你会发现这里与刚开始我们使用的 CoordinatorLayout 方式有一个细微的区别：在 CoordinatorLayout 布局下图片的褪色渐变动画和 MotionLayout

1.8K31

FAQ | 为大屏幕设备构建应用的常见问题解答

是时候为各式设备适配完善的输入支持了 Android 与 Chrome OS 中针对大屏幕设备的更新 我们在后台和社区等各渠道收到了很多来自开发者们的反馈，也把一些开发者们常见的问题进行了简单的收集和梳理...数据显示，因为更大的屏幕空间，可折叠设备的多任务处理量增加了 7 倍，开发者有必要平衡布局的简单性与灵活性以优化应用，例如开发者在使用新的窗口尺寸类别和视口断点时，如果要优化断点的布局，可以将其视为 3...此外开发者还需要考虑可折叠设备的形态，如高级布局支持等。...如需了解更多轻松优化应用的指南，请参阅: Android 与 Chrome OS 中针对大屏幕设备的更新 Material 网站 借助 Jetpack WindowManager 支持可折叠设备和双屏设备...如大家所知可折叠设备层出不穷，我们推出了 Jetpack WindowManager 库，帮助开发者对应用做出调整，以充分利用可折叠设备为用户提供全新的体验。

3.5K10

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

image 2.2 APP如何在Multi-resume运行 在Android P (9.0)中启用Multi-resume，请在应用清单manifest中增加如下元数据： ? image 3....优化方法包括灵活布局、备用布局、可拉伸图片等方式： 灵活布局，确保布局的调整适应屏幕尺寸的变化，核心原则是避免对界面组件的位置和大小硬编码，可使用”wrap_content”和”match_parent...备用布局，Android允许应用针对不同屏幕配置提供多种备选布局。可以利用配置限定符实现此目的，它允许系统根据当前配置（如针对不同屏幕尺寸的不同布局设计）自动选择合适的资源。...例如：单窗格(默认)布局：res/layout/main.xml 双窗格布局：res/layout-large/main.xml (目录名称中的large为限定符) 可拉伸图片，由于布局可拉伸以适应不同的屏幕...应用连续性 应用连续性是折叠屏手机的一大亮点，当在外屏和内屏之间切换时，应用保持运行状态，并会自动调整大小以匹配新的布局。

4K40

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

1.1：CoordinatorLayout中设置 　　前面的添加依赖，在上一篇中已经说过，在这就不在重复了，协调者布局中这次又加入了一个新的布局CollapsingToolbarLayout（折叠工具栏布局...），很明显上面的效果图中的工具栏上滑的同时把图片折叠进去了，这是一个动画效果，如果不是MaterialDesign库的强大，这都是我们自己写。...竟然折叠的部分是toolbar和背景图片，这就理所应当的把这两个空间写在CollapsingToolbarLayout中，因为上面协调者布局和appbar布局很简单，这里就不在写了，只贴出折叠布局代码（..." android:layout_height="180dp" android:scaleType="fitXY" //图片显示方式...2.1：布局书写 这里的布局和上面是一样的，只是把imageview换成了LinearLayout布局，在该布局中写上我们熟悉的输入框和图片按钮即可， 最外层-->里层还是：CoordinatorLayout

1.5K100

VSCode1.59版本发布

，例如扩展发布和更新日期。...对笔记本布局进行了一些改进： 当单元格折叠时，单元格输入的第一行现在被渲染。 当窗口的宽度不足以呈现所有主要操作时，笔记本编辑器工具栏上的操作将移动到溢出菜单 ( ... ) 中。...又是一个新的设置 workbench.editor.sharedViewState添加了一个新设置来配置编辑器视图状态（例如，编辑器中的滚动位置）在编辑器组之间共享的方式。...默认情况下，禁用此设置以保留当前行为。如果你在侧面打开编辑器并稍后关闭该编辑器组，只是为了再次打开编辑器到侧面，则不会恢复视图状态，因为您正在打开一个新的编辑器组。...) 转到父折叠( editor.gotoParentFold) 这个是让导入的语句可以自动的折叠 该功能适用于 TypeScript、JavaScript、Java、C#、C++ 还有一个如字面意思的设置

1.7K30

详解 Android 12L｜更好地适配大屏幕设备

查看 功能和变更，了解您的应用中需要测试的领域，同时查看 预览版概览 了解时间表和版本细节。您可以向我们 提出问题和需求，我们一如既往感谢您的反馈！...系统会处理其他事项，并根据您创建的配置来确定展示方式。 Activity embedding 可以在可折叠设备上流畅运行，随着设备的折叠和展开轻松地堆叠和分开 Activity。...△ Jetpack WindowManager 中的窗口尺寸类 让应用能够感知折叠 WindowManager 还为不同的窗口特征 (如折叠和铰链) 提供了通用的 API 接口。...我们正在 Android Studio Chipmunk 中开发一个新的可视化的 lint 工具，用于在布局验证中主动显示 UI 提醒和建议，包括哪些参考设备会受到影响。...我们即将推出全新的指南，为您说明如何在全新和现有的应用中支持不同的屏幕尺寸、如何为 View 和 Compose 实现导航、如何利用可折叠设备的优势等内容。

3.7K20

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

CollapsingToolbarLayout的子View中可以设置这两个属性 1、ayout_collapseMode (折叠模式) - 有两个值: pin - 设置为这个模式时，当CollapsingToolbarLayout...parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier...我在做这里的时候遇到一个问题，那就是CollapsingToolbarLayout里的Title的问题，一般默认是显示的，即使你不写，它也有会一个默认值一直显示在那里，等折叠收缩完的时候，停留在标题工具栏上...除此之外，在设计 Toolbar 的时候，Google也留给了开发者很多可定制修改的余地，这些可定制修改的属性在API文档中都有详细介绍，如： 设置导航栏图标； 设置App的logo； 支持设置标题和子标题...如果设计的需求不要求选项卡在切换时附带有图标的切换效果，仅仅文字的颜色发生变化以响应用户的点击事件，那么TabLayout和ViewPager建立联系可以用官方提供的方法，它可以做到交互双向联动，也就是点击

2.2K90

详解 | 为可折叠设备构建响应式 UI

为可折叠设备和大屏设备优化您的应用 Android 设备的屏幕尺寸日新月异，随着平板和可折叠设备的普及度越来越高，在开发响应式用户界面时，了解您应用的窗口尺寸和状态显得尤为重要。...Jetpack WindowManager 现已进入 beta 测试阶段，这个库提供了与 Android 框架中 WindowManager 比较相似的功能，包括了对支持响应式 UI、检测屏幕改变的回调适配器和测试窗口...，文内示例介绍了如何在媒体播放器应用中实现这样的功能。...让我们来聊聊如何在普通设备上测试可折叠设备姿态。 现在，我们已经知道 Jetpack WindowManager 库可以在设备姿态改变时，向您的应用发送通知，以便您修改应用的布局。...可折叠设备和双屏设备代表了智能手机的自然进化。对于 Android 开发者来说，这提供了一个进入正在增长的高端市场的机会，感谢设备制造商们重新开始关注大屏设备。

1.3K20

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

窗口大小类分为三类，分别是较小型、中等型和展开型，它们旨在平衡布局的简单和灵活性，以针对特殊情况优化您的应用。...； 在所有的 Reference Devices 上都测试一遍您的应用，优先采用在中等型下的最佳布局； 为了提供更好的用户体验，请添加对应用有意义的功能，如支持可折叠设备的折叠状态或针对键盘、鼠标和触控笔输入支持进行优化...，这一布局方式是 Material Design 中推荐的大屏幕规范布局之一，让我们将文章列表与打开的文章并排显示。...要正确构建列表/详情结构，除了实际布局之外我们还需要解决几个问题。其中比较有趣的一点是思考应用如何在不同尺寸布局之间转换，例如对于可折叠手机，应用可能会从较大的屏幕变为较小的屏幕。...获取更好的用户体验 在前文中，我们提到为了提供更好的用户体验，请添加对应用有意义的功能，如支持可折叠设备。

4.1K20

小技巧 | 在 Android Studio 调试应用

另一种减少混乱日志的方式是使用折叠功能，它可以把近似的日志折叠为同一组。您只需选中一条日志中的部分文本，右击鼠标，并选择  Fold Lines Like This : ?...您甚至可以使用 Shift + 添加断点的方式来让这一操作变得更加快捷。 禁用断点 ? 禁用断点 (并非删除断点)，可以右键点击断点并从弹框中取消选中 Enabled 选框。...如果您的设备运行的是 Android 10 或者更高版本，您可以通过点击调试工具栏中的  Drop Frame  按钮来进行回溯: ?...如果您修改了布局资源或您要调试的代码，例如在 onCreate 方法中，该选项将非常有用。 ?...APK 通过数据浏览来控制数据在调试器中的显示方式 如何使用和理解 Overhead 选项卡 Android Developer 官方文档 | Android Studio — 调试您的应用 IntelliJ

1.2K10

可折叠设备、平板设备和大屏设备更新一览

Android 应用也可以在 Chrome OS 上运行，而 Chrome OS 现在是世界第二大桌面操作系统。 为大屏设备做好准备 更大的屏幕正在改变用户与设备互动的方式。...△ 在大屏幕布局中，拖放 是一种自然的交互，即使是在同一个应用中也是如此 △ 通过使用多实例功能，用户可以并排运行应用的多个副本。...△ 在 Chrome OS 设备上使用 Android 应用的用户通常会配置实体键盘；应用应该支持标准的键盘导航和快捷键，以提供更全面的无障碍使用体验 组件更新 我们更新了 Jetpack 和 Material...这个库现已发布 alpha 版本，它提供了一套通用的 API 界面，以支持不同的设备类型，包括折叠设备和平板电脑。 您可以使用 WindowManager 来查看显示屏特性，如折叠或铰链。...△ 应用应该无缝地适应越来越多的设备配置 WindowManager 还提供了几个便捷的方法，以向后兼容 (从 API 级别 14 开始) 的方式检索当前和最大的 WindowMetrics 信息。

2K20

无缝构建跨设备体验 | Google IO 大会精彩回顾

——包括在 Chrome OS 和可折叠设备上动态调整大小，以及利用 Jetpack Compose 或 ConstraintLayout 构建 响应式布局。...我们还研究了用户与大屏幕设备的交互方式，例如手指在屏幕上放置的位置，并为您提供 API 和工具以简化此类交互体验: SlidingPaneLayout 1.2.0 可帮助您自动调整内容大小，以适配更多空间...UI 拉伸问题； Jetpack WindowManager 可让您轻松运用新硬件功能，如铰链和折叠。...这些更新让您可以更轻松地在一系列设备配置中构建和测试应用，同时将最新的 Android 12、Google Assistant 和 Cast 功能引入电视。...Android for Cars Android Auto 支持应用程序与许多现代汽车中内置的信息娱乐显示器连接。

1.7K10

vivo官网APP全机型UI适配方案

（2）横竖屏切换有以下2种方法： 方式1） 通过在AndroidManifest.xml中设置：android:screenOrientation属性 a) android:screenOrientation...别忘了，我们Android打包全流程是通过gradle完成的，我们是不是可以通过切面编程的思维，针对不同的设备打出不同的包。方案确定了，在此进行技术验证。...3.4.2 不同设备的区分方式通过前面的简单介绍，对选购页的整体布局及不同设备上的UI展示有所了解，下面来看下如何在多个设备上实现一套代码的适配。首先第一步，要如何区分不同的设备。...四、至简之路的铸就大道至简，遵循规范和原则，就可以想到如何对多机型进行适配，别陷入细节。以这个作为指导思想，可以做很多其他的适配。下面做些列举，但不讲解实现方式了。...Answer：按照全屏模式的设计方案，折叠屏和pad也就是一种大尺寸的机器，开发人员判断机型的分辨率和尺寸，选择一种对应的布局展示就好了，只用一个应用就能搞定。

1.5K30

CoordinatorLayout使用全解析

> 可以发现在官方提供的例子中，出现了许多的控件，这些控件都和CoordinatorLayout配合出各种效果，接下来我们就先简单介绍一下这些控件。...CollapsingToolbarLayout可以通过app:contentScrim设置折叠时工具栏布局的颜色，通过app:statusBarScrim设置折叠时状态栏的颜色。...CollapsingToolbarLayout的子布局有3种折叠模式（Toolbar中设置的app:layout_collapseMode） off：默认属性，布局将正常显示，无折叠行为。...pin：CollapsingToolbarLayout折叠后，此布局将固定在顶部。 parallax：CollapsingToolbarLayout折叠时，此布局也会有视差折叠效果。...具体有三种方式：通过代码绑定、在XML中绑定或者通过注释实现自动绑定。

1.8K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券