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

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

折叠工具栏布局CollapsingToolbarLayout 上一篇博文《Android开发笔记(一百三十五)应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动,那反过来,...这里要明确一点,Toolbar本身是页面顶部的工具栏,其上没有本页面的其它控件了,如果Toolbar被拉下来了,那Toolbar上面的空白该显示什么?...下面是标题栏在折叠显示渐变图片的效果图: ?...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。...appbar_scrolling_view_behavior" /> 点击下载本文用到的可折叠工具栏布局的工程代码

3.1K30

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

也就是说:随着工具栏折叠动画的开始,图片便立刻发生渐变,一直持续到工具栏完全到达折叠状态: ? 这个问题实际上很容易解决,这要感谢 MotionLayout 的另一个非常重要的特性:关键帧。...因此我们得到的是一个非常平滑的过渡动画,从工具栏开始发生折叠一直到工具栏完全达到折合状态为止。这也很好的解释了我们所看到的在 MotionLayout 中对动画行为的实现。...最终标题文本会走在工具栏折叠动画之前,接着在折叠完全结束的时候直接回落到正确的位置上: ?...但是在目前来说,添加 tools:showPaths="true" 这段代码能够让 MotionLayout 计算并显示这三个被过渡动画所影响的视图控件的轨迹路线:标题文本控件(顶部,中心左侧),工具栏的海滩小排屋图片...这种显示路径的方式有助于我们理解刚才创建的关键帧是如何影响到过渡动画的特定部分的。

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

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

【翻译】MotionLayout实现折叠工具栏(Part 1) 2018-08-13 by Liuqingwen | Tags: Android 翻译 | Hits ?...本系列教程中,我会讲解如何使用 MotionLayout 来创建一个我们已经非常熟悉的动画行为:一个折叠工具栏动画( a Collapsing Toolbar )。...举个例子,一个折叠工具栏应该根据用户的滚动进行展开和折叠,所以实际动画的运行应该时刻跟随用户的拖拽进行。这也是那些框架办不到的地方。 废话不多说,让我们看下我们所要尝试模拟做到的行为动作。...这里的代码展示了一个折叠工具栏,应用了 Material Components Library 库里的 CollapsingToolbarLayout 和 CoordinatorLayout 布局。...当然在实际 App 开发过程中我应该会使用 AppBarLayout 布局配合 Toolbar 控件吧。 如果在设计视图中查看这个布局,我们能看到布局所展示的工具栏处于展开的状态: ?

1.9K31

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

应用栏布局AppBarLayout Android5.0推出工具栏Toolbar用来替代ActionBar,灵活性和易用性大大增强,有关Toolbar的详细介绍参见《Android开发笔记(一百一十九...)工具栏Toolbar》。...2、AppBarLayout内部的高度也可能变化,比如它嵌套了可折叠工具栏布局CollapsingToolbarLayout,有关可折叠工具栏布局的详细介绍参见《Android开发笔记(一百三十六)可折叠工具栏布局...所以本文只做下面三个标志的概念解释,有关的效果图参见《Android开发笔记(一百三十六)可折叠工具栏布局CollapsingToolbarLayout》。...3、exitUntilCollapsed : 该标志保证页面上至少能看到最小化的工具栏,不会完全看不到工具栏。具体的滚动说明如下所示: 向上滚动:头部先往上收缩,一直滚到折叠的最小高度。

1.9K40

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

1.1:CoordinatorLayout中设置   前面的添加依赖,在上一篇中已经说过,在这就不在重复了,协调者布局中这次又加入了一个新的布局CollapsingToolbarLayout(折叠工具栏布局...),很明显上面的效果图中的工具栏上滑的同时把图片折叠进去了,这是一个动画效果,如果不是MaterialDesign库的强大,这都是我们自己写。...竟然折叠的部分是toolbar和背景图片,这就理所应当的把这两个空间写在CollapsingToolbarLayout中,因为上面协调者布局和appbar布局很简单,这里就不在写了,只贴出折叠布局代码(...actionBarSize" /> 写到这才是我们的折叠布局了,还有我们的悬浮按钮...这时候TextInputLayout则是显示错误,TextInputLayout是LinearLayout的子类,用于辅助显示提示信息。

1.5K100

【MFC拓展库】上海道宁与BCGSOFT合作为您带来专业的Micrisoft Windows开发业务组件

功能区控件将传统的工具栏和菜单替换为选项卡式组(类别)。每个选项卡在逻辑上分为面板,每个面板可能包含各种控件和命令按钮。此外,Ribbon控件提供了利用可用空间的智能布局。...在状态栏、应用程序按钮、后台视图和突出显示的GUI元5、素中使用强调色。...表格样式格式查找对话框水印图像支持网格单元通知徽章08、高级编辑控制高级编辑控件具有以下功能:智能感知支持大纲(可折叠块)支持行号语法高亮支持颜色块(块选择支持)符号支持:您可以定义一组字符以自动替换为图像标记支持...03、支持可折叠节点(大纲)开箱即用的大纲解析器可识别 C++ 文件,并且可以通过编程方式或使用外部 XML 文件进行自定义。04、智能感知支持我们为 IntelliSense 提供高级支持。...Visual Studio 2008中包含的新MFC版本基于 BCGControlBar Pro技术,但MFC版本中包含一些重要的库组件,例如图表、网格、日历、编辑器等。

5.5K20

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

设计器的主菜单默认为全部折叠,并显示为垂直条形图标。单击页面左上角的WijmoJS徽标以展开菜单。...设计表面现在看起来像这样: 要折叠主菜单,请再次单击WijmoJS 徽标,或单击设计图面内部的任何位置(“编辑”工具栏下方的区域)。...您可以通过单击页面右边缘的箭头来折叠属性/事件侧栏。 设计表面支持具有顺序布局的多个纯前端控件。...用户可通过打开工具箱并将InputDateTime控件添加到设计图面,单击“编辑”工具栏上的“上移”按钮以交换两个控件的位置。...如果要保存设计器布局以供将来使用,请使用主工具栏上的“保存”按钮将当前状态写入JSON文件,然后使用主工具栏上的“打开”按钮重新加载所选文件的内容。

5.8K20

Visual Studio 2008 每日提示(十四)

#135、保存窗口的四种布局 原文链接:There are 4 window layouts that you can save 操作步骤 窗口的四种布局模式:设计视图、全屏、调试模式、文件视图。...保存方法如下 菜单:工具+导入和导出设置+导出,然后选中“窗口布局”即可。 评论:其实不止窗口布局,你可以把IDE的环境设置都可以保存。...,选择“添加或移除按钮”,然后选者需要调整的工具栏名,在按钮列表中选中或选中按钮。...评论:把常用的按钮显示出来,很少用的就别选中了,这样让工具栏看起来简洁一些 #138、在任何时候显示任意工具栏 原文链接:You can display any toolbar at any time...操作步骤 右击工具栏的任意区域,从上下文(右键)菜单里,你可以选中任意一个工具栏,这个选中的工具栏就将会在任何时间显示

1.6K70

VSCode1.59版本发布

选择一个类别将在“扩展”视图中显示该类别中的其他扩展。 这个是一个新的设置功能 ---- 阵列设置现在在非编辑模式下具有拖放支持。...此外,属性uniqueItems设置为的枚举数组设置true现在仅显示剩余选项而不是下拉列表中的所有选项。...对笔记本布局进行了一些改进: 当单元格折叠时,单元格输入的第一行现在被渲染。 当窗口的宽度不足以呈现所有主要操作时,笔记本编辑器工具栏上的操作将移动到溢出菜单 ( ... ) 中。...就是这个设置的选项 @tag:notebookLayout ---- 这个设置的页面可以 工具栏上的文本提示 看字,配置复制相对路径的路径分隔符 新设置explorer.copyRelativePathSeparator...在折叠区域之间导航,需要自己绑定 有一些新命令可以将光标位置设置为相应的折叠: 转到下一个折叠( editor.gotoNextFold) 转到上一个折叠( editor.gotoPreviousFold

1.7K30

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

调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。...这是在收缩时Title文字特点外形的设置 app:expandedTitleTextAppearance 同理这是在展开时Title文字特点外形的设置 app:contentScrim 这是toolbar 标题工具栏停留在顶部时候背景的设置...我在做这里的时候遇到一个问题,那就是CollapsingToolbarLayout里的Title的问题,一般默认是显示的,即使你写,它也有会一个默认值一直显示在那里,等折叠收缩完的时候,停留在标题工具栏上...这里我对AppBarLayout设置了一个监听,它有一个监听方法:addOnOffsetChangedListener监听折叠收缩的位移。...TabLayout提供一个水平布局显示选项卡。TabLayout一般都是配合ViewPager一起来使用。

2.2K90

玩转Github —— Octotree Chrome插件

最近一直在忙着其他的事情,也一直没有公众号的更新,看到了很多小伙伴说更新了,也是比较惭愧,还是以工作为主的!...01 唤起目录 修改个性主题 调整展示布局 Chrome应用店搜索Octotree: 可以看到用户量还是很多的,安装好后,随便打开一个Github项目,比如我们的老伙伴——Blog.Core,就可以看到布局了...除了文件,整个项目也可以进行标记,如果有一天你看到了一个不错的项目,又不想Star或者Fork,又怕以后找不到,就可以点击左上角的书签图标,添加到标签里: 然后就可以在工具栏里找到具体的项目了。...03 快速搜索 精准定位 Shift+S事件 在之前,如果你想在任意一个项目中,寻找一个文件,需要用官方的Go to file功能,还不是很好用,来看看Octotree插件的功能: 可以点击工具栏的放大镜图标...04 查看PR信息 展开折叠 查看更新详情 不仅是文件目录,如果有好心人提交了PR,也可以快速查看和定位PR的详情,如果提交的文件过多,也可以进行一键折叠和展开: 05 查看源文件 更多精彩 有时候我们会遇到一个文件

58610

django debug_怎么调试debug

介绍 Django框架的调试工具栏使用django-debug-toolbar库,是一组可配置的面板,显示有关当前请求/响应的各种调试信息,点击时,显示有关面板内容的更多详细信息。 应用 1....这可能会降低页面呈现速度,但在多进程服务器上需要这样做,例如,如果在生产中部署工具栏建议这样做)。 默认值None告诉工具栏自动执行正确的操作,具体取决于WSGI容器是否运行多个进程。...SHOW_COLLAPSED 默认: False 如果更改为True,则默认情况下将折叠工具栏。...SHOW_TOOLBAR_CALLBACK 默认: 'debug_toolbar.middleware.show_toolbar' 这是用于确定工具栏是否应显示的函数路径,默认检测DEBUG设置为True...如果项目中拥有大型模板上下文,或者具有希望被评估的惰性数据结构的模板上下文,则关闭此选项非常有用。

1.8K20
领券