文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Material Design 实战 之 第六弹 —— 可折叠式标题栏(CollapsingToolbarLayout) & 系统差异型的功能实现（充分利用系统状态栏空间）

首先实现标题栏部分，这里使用CoordinatorLayout来作为最外层布局（我们在讲监测snackbar弹出，解决其遮挡悬浮按钮问题的时候用到过这个布局），如下： android.support.design.widget.CoordinatorLayout...> 这里使用了新的布局CollapsingToolbarLayout。...由于CoordinatorLayout本身已经可以响应滚动事件了， 因此我们在它的内部就需要使用NestedScrollView或RecyclerView这样可以响应滚动事件的布局。...> 接下来在LinearLayout中放入具体的内容， 使用一个TextView来显示水果的内容详情， 并将TextView放在一个卡片式布局当中： .........在 CoordinatorLayout（外层监听框架）、 AppBarLayout（水果详情界面标题栏外层）、 CollapsingToolbarLayout（水果详情界面标题栏）这种嵌套结构的布局中

2.9K40

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

不过，Android在实现展开效果的时候，并非直接让Toolbar展开或收缩，而是另外提供了CollapsingToolbarLayout，通过该布局包裹Toolbar，从而控制标题栏的展开和收缩行为。...只是许多App把这两者的背景设为一样的，所以看起来像是统一的标题栏在收缩和展开。...下面是演示折叠模式使用的布局文件例子： android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com...下面是标题栏在折叠时显示渐变图片的效果图： ?...要实现图片的折叠渐变，其实很简单，只需在Toolbar节点前面加个ImageView节点的声明即可，下面是演示折叠模式使用的布局文件例子： android.support.design.widget.CoordinatorLayout

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

    Android 折叠式布局

    折叠式布局 效果图如下 ?...从头开始 先建立一个名为 Folding 项目，然后在创建一个Activity, OneActivity 这个Activity带有自身的XML布局文件， ** 标题栏折叠** 首先打开activity_one.xml...嵌套好之后设置一些简单的样式即可 到这一步基本上这个折叠布局已经完成了，然后只要填充相关的控件即可实现效果，要注意的点是Toolbar中放置的是你需要折叠和展开的控件，而AppBarLayout中放置的是...到这里我们就已经实现了这个折叠式，当你点击这个蓝色背景标题往上面滑动时，ImageView就会折叠起来，往下滑动时图片就会展开。...这个时候再运行一下就有比较好的折叠效果了 ? 最后我再放一下整体的布局页面的代码 <?xml version="1.0" encoding="utf-8"?

    1.7K20

    Material Design中的一些趣事

    当然了，这个是我完成任务之后又写的一个demo，大家可能会想到这里用的是谷歌极力推荐我们使用的一个全新的设计语言——Material Design，然后再配上谷歌的下拉刷新控件SwipeRefreshLayout...首先我们来看布局，最上面是我们自己的一个标题栏，往下图片那一整块我用的是toolbar，里面包含了整个的头部信息，再往下面是一个Tablayout，里面是三个tab，最下面放的是三个fragment 好了...，我们来看看布局信息 android.support.design.widget.CoordinatorLayout...布局写完之后，我们来完成viewpager和Fragment的结合。...接下来我们来看刷新之后数据分配的地方，这里我们使用set方式直接将数据设置到Fragment中的方法中，然后再由Fragment中的方法进行数据的展示。

    65410

    用 CoordinatorLayout 处理滚动

    当渲染一个 Snackbar 时，它通常出现在可见屏幕的底部。Floating action button 必须上移以便腾出空间。...创建视差动画 CollapsingToolbarLayout 可以让我们做出更高级的动画，例如使用一个在折叠的同时可以渐隐的 ImageView。在用户滑动时，标题的高度也可以改变。...最著名的例子就是使用了多阶表的 Google Maps： 下述教程和代码示例可以帮助你实现这些更加复杂的效果： CustomBottomSheetBehavior Sample - 描述了在底部表滑动时三种状态来回切换...如果你在使用 behavior 时遇到了问题，请查看下面的建议： 关于如何高效使用 CoordinatorLayout 的例子请仔细参考 cheesesquare 源码。...在一个使用了内部有 items 列表的 ViewPager 的 fragment 和一个父 activity 之间使用协调时，你想像这里描述的那样在ViewPager 上添加 app:layout_behavior

    5.8K92

    进阶篇 - 交互式邮件应用布局

    ， 欢迎fork & star效果演示引言在基础篇中，我们学习了如何使用HarmonyOS NEXT的ColumnSplit组件构建一个基本的邮件应用布局。...删除等常用操作按钮 用户可以快速对邮件进行各种操作 响应式布局根据屏幕大小调整布局结构 在不同设备上都能提供良好的使用体验 状态管理与数据绑定在交互式邮件应用中...} else { // 显示提示信息}当用户选中了一封邮件时，我们显示邮件的详细信息，包括：邮件操作栏：包含回复、转发、删除等按钮邮件主题：使用大号粗体字显示邮件头部：显示发件人和日期信息邮件正文...邮件预览在邮件列表中，我们可以添加邮件内容的预览，让用户在不打开邮件的情况下就能了解邮件的大致内容：Column() { Text(email.subject) .fontSize(...响应式布局我们可以根据屏幕宽度调整布局，在小屏幕上使用单栏布局，在大屏幕上使用两栏布局：@StorageProp('screenWidth') screenWidth: number = 0build(

    21300

    BottomSheet底部动作条使用

    使用环境 底部动作条(Bottom Sheets)特别适合有三个或者三个以上的操作需要提供给用户选择、并且不需要对操作有额外解释的情景。...如果只有两个或者更少的操作，或者需要详加描述的，可以考虑使用菜单(Menu)或者对话框替代。 底部动作条(Bottom Sheets)可以是列表样式的也可以是宫格样式的。...宫格布局可以增加视觉的清晰度。 你可以使用底部动作条(Bottom Sheets)展示和其 app 相关的操作，比如做为进入其他 app 的入口(通过 app 的 icon 进入)。...当窗口覆盖整个屏幕的时候，需要在上部的标题栏左侧增加一个收起按钮。...，slideOffset为0-1 完全收起为0 完全展开为1 } }); } } 当然BottomSheet这种效果是高度可扩展的，你可以在布局中实现你想要的任何效果

    2.3K80

    Android开发笔记（一百三十四）协调布局CoordinatorLayout

    使用CoordinatorLayout时，要注意以下几点： 1、导入design库； 2、根布局采用android.support.design.widget.CoordinatorLayout； 3、...，有以下几个办法： 1、使用layout_gravity属性，指定子视图在CoordinatorLayout内部的对齐方式。...： 1、FloatingActionButton会悬浮在其他视图之上，即使别的视图在布局文件中位于FloatingActionButton后面； 2、在隐藏、显示按钮上时会播放动画；其中隐藏操作是调用hide...BottomSheetBehavior在代码中使用的方法如下所示： from : 从指定视图获取底部弹窗行为。 getState : 获取该行为的状态。 setState : 设置该行为的状态。...下面是使用底部弹窗的布局例子： android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com

    2.8K30

    HarmonyOS：ComposeTitleBar 组件自学指南

    入参对象不可为 ​​undefined​​​：即 ​​ComposeTitleBar(undefined)​​ 这种写法是错误的，确保在使用组件时传入正确且有效的参数值。...它为图标提供标签描述，在一些图标表意不够清晰或者需要辅助说明的情况下，能帮助用户更好地理解操作功能，特别是对于无障碍访问场景尤为重要。​​...用于控制菜单项是否可用，当 ​​isEnabled​​​ 为 ​​true​​​ 时表示启用，用户可以点击触发相应操作；为 ​​false​​​ 时表示禁用，避免用户误操作或者在特定场景下限制某些功能的使用...六、示例剖析与实践拓展下面让我们深入研究给定的示例，理解如何将这些知识转化为实际的界面构建。 示例实现了简单的标题栏，带有返回箭头的标题栏和带有右侧菜单项目列表的标题栏。...编辑、删除等操作对应的提示信息，让用户在交互时有明确的反馈。

    51410

    CoordinatorLayout的最简入门

    序言 本文力求用最短的篇幅，让读者明白CoordinatorLayout的用法。原理不作深入讨论。 CoordinatorLayout是什么 由Google加入Android系统的一个新的布局容器。...CoordinatorLayout 如何使用 网上有很多文章结合xxxView，结合yyyView使用，仿佛CoordinatorLayout只能与部分结合使用，其实并非如此！...那些奇奇怪怪的View，只是Android官方为我们写好的示例。 CoordinatorLayout的核心是协调，它能够协调任何View之间的动作和效果。...parent 是 Button和Snackbar的容器 child 是Button dependency 是Snackbar 因为在本例中，是Button的背景色依赖Snackbar的位置变化。...布局文件 android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/

    1.4K80

    【HarmonyOS 5】鸿蒙中常见的标题栏布局方案

    【HarmonyOS 5】鸿蒙中常见的标题栏布局方案 ##鸿蒙开发能力 ##HarmonyOS SDK应用服务##鸿蒙金融类应用 （金融理财# 一、问题背景： 鸿蒙中常见的标题栏：矩形区域，左边是返回按钮...理想的标题栏应满足： 跨设备适配（手机、平板等多终端显示一致） 组件对齐精准（垂直居中、水平间距合理） 交互反馈清晰（按钮点击有明确状态变化） 扩展灵活（可快速添加用户头像、通知图标等元素） 那有几种布局方式...常见的思维是，有老铁使用row去布局，怎么都对不齐。...这种布局会自动分配剩余空间，在不同屏幕尺寸下保持组件相对位置稳定。...（复杂扩展场景） 当标题栏需要包含更多元素（如用户头像、多按钮组）时，可采用Row嵌套Column的组合布局，通过权重分配实现灵活排列。

    44210

    【Android 性能优化】布局渲染优化 ( CPU 渲染优化 | 减少布局的嵌套 | 测量布局绘制时间 | OnFrameMetricsAvailableListener | 布局渲染优化总结 )

    FrameMetrics 代码示例 三、 布局渲染优化总结 一、 减少布局嵌套 ---- 在 【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout..., 可以在屏幕中绘制这些布局 ; 能够被优化的布局 : 假如父布局中只有一个子布局 , 子布局中有若干组件 , 那么可以直接将子布局的组件放在父布局中 , 将子布局这个层级干掉 , 或者将父布局层级删除...; 一个父布局没有分支的布局 , 只有一个子布局 , 那么大概率可以优化删除父布局或子布局中的一个 , 两者保留一个 ; 强烈推荐使用 ConstraintLayout 约束布局 , 没有以上布局嵌套问题...布局包含 : 布局文件中尽量使用 include 包含其它布局 , 如标题栏 Toolbar 组件 , 这样 GPU 中缓存一次之后 , 之后的界面再加载该 Toolbar 组件时 , 直接复用 GPU...自定义组件裁剪 : 在 Canvas 绘制重叠时 , 使用裁剪后的画布绘制 ;

    2.5K10

    181.HarmonyOS NEXT系列教程之列表交换组件整体架构详解

    组件概述1.1 功能介绍ListExchangeViewComponent是一个支持列表项交换和删除的自定义组件，主要用于实现如扣款列表等场景。...主要功能包括：列表项拖拽排序滑动删除自定义列表项样式平滑的动画效果1.2 核心依赖// 导入相关依赖import { ListInfo } from '../.....布局实现4.1 整体布局Column() { // 标题栏 Row() { ... } // 列表交换视图 ListExchange({ ... })}.height('...最佳实践6.1 开发建议合理组织代码结构使用状态管理实现自定义视图处理生命周期6.2 性能优化避免频繁更新状态优化列表渲染合理使用缓存实现延迟加载7....小结本篇教程详细介绍了：组件的整体架构设计核心功能的实现方式布局系统的构建开发流程和最佳实践这些内容帮助你理解ListExchangeViewComponent的基础架构。

    17600

    自定义 Behavior，实现嵌套滑动、平滑切换周月视图的日历

    [1240] 使用 CoordinateLayout 可以协调它的子布局，实现滑动效果的联动，它的滑动效果由 Behavior 实现。以前用过小米日历，对它滑动平滑切换日月视图的效果印象深刻。...简介 先上个小米日历的图，让大家知道要做一个什么效果： [strip] 这是小米日历的效果，在用户操作列表的时候，将日历折叠成周视图，扩大列表的显示区域，同时也不影响日历部分的功能使用，有趣且实用。...原本想用原生的 CalendarView，但是 CalendarView 不支持周视图，可自定义程度也不高。 在 GitHub 搜了一下，决定使用 MaterialCalendarView。...引入该库，在布局文件中使用： <com.prolificinteractive.materialcalendarview.MaterialCalendarView android:id="@+id...在布局中，对子控件配置 app:layout_behavior 属性，实现对应的联动效果。所以这里我们需要自定义日历和列表的两个 Behavior。 Behavior 有两种实现联动的方式。

    4K10

    02 HarmonyOS Next仪表盘案例详解（一）：基础篇

    项目概述本文将详细分析 HarmonyOS 应用中的仪表盘(Dashboard)示例，该示例展示了一个业务数据概览页面，包含数据卡片和趋势图表区域。...UI 布局与组件5.1 整体布局结构DashboardExample 的 UI 结构如下：Column (根容器)├── MyNavbar (导航栏)├── Flex (顶部标题栏)│ ├── Text...(标题文本)│ └── Flex (筛选器)├── Flex (数据卡片网格)│ └── ForEach (循环渲染数据卡片)└── Column (图表区域) ├── Flex (图表标题栏...5.2 基础组件使用案例中使用了多种基础 UI 组件：Text：文本显示组件，用于显示标题、数值等Image：图片显示组件，用于显示图标Column：垂直布局容器Flex：弹性布局容器，支持更灵活的布局方式...总结本文介绍了 HarmonyOS 仪表盘示例的基础部分，包括项目概述、技术架构、数据结构设计、生命周期与页面路由以及 UI 布局与组件等内容。

    32400

    【前端性能优化】深入解析重绘和回流，构建高性能Web界面

    回流（Reflow） 在Web浏览器的工作流程中，回流是一个关键步骤，它发生在浏览器需要根据DOM元素的尺寸、位置或某些视觉属性变化来重新计算元素的布局情况时。...回流（Reflow）触发条件 添加或删除DOM元素：当文档中添加新的可见元素或删除已存在的元素时，可能会导致周围元素或整体布局的变化，从而触发回流。...文本样式变化：诸如字体大小、字体样式、文本装饰（如下划线、删除线）的变化，只要不影响元素尺寸和位置布局，就会触发重绘。...答案: 引起回流的操作包括但不限于： 添加或删除可见的DOM元素； 元素尺寸或位置的动态改变（例如，通过JavaScript修改元素的宽高或使用动画）； 浏览器窗口尺寸变化，导致页面布局调整； 计算某些特定的...重绘是指当元素的外观发生变化但不影响布局时（例如颜色改变），浏览器重新绘制该元素的行为。

    1.1K10

    鸿蒙5开发宝藏案例分享---平板开发实践

    **自由窗口标题栏定制**```// 隐藏系统标题栏 + 自定义window.getTopWindow().then(mainWindow => { mainWindow.setWindowSystemBarEnable...(["status", "navigation"]) // 保留状态栏 mainWindow.setWindowLayoutFullScreen(true) // 沉浸式布局});// 自定义标题栏组件...长列表滚动 | 启用组件复用 | `.cachedCount(5)` || 图片加载 | 设置固定宽高比 | `.aspectRatio(16/9)` || 动画卡顿 | 减少渲染节点...**调试技巧**：- - 平板开发者选项中打开 **“强制横屏”** 测试兼容模式 - DevEco Studio的**多设备预览**功能实时调试布局**最后叮嘱**：“平板开发不是简单拉伸界面...吃透本文5大布局方案，效率提升50%！” —— 来自踩坑3周的老司机

    28210

    基础篇 - 垂直分割布局构建聊天界面

    包含以下内容：聊天标题栏：使用Row组件水平排列聊天标题栏内容，包括：联系人头像：使用Image组件，显示当前选中联系人的头像。联系人名称：使用Text组件，显示当前选中联系人的名称。...更多按钮：使用Button组件，显示更多操作的按钮。整个标题栏设置了内边距和底部边框。消息列表：使用Column组件包裹一个List组件，宽度为100%，布局权重为1（占据剩余空间）。...使用ForEach组件循环渲染消息列表，每条消息使用一个ListItem组件显示。消息项：根据消息是否是自己发送的，使用不同的布局：自己发送的消息：使用Row组件水平排列，靠右对齐。...消息内容使用绿色背景，时间显示在消息下方，靠右对齐。对方发送的消息：使用Row组件水平排列，靠左对齐。包含联系人头像和消息内容，消息内容使用白色背景和灰色边框，时间显示在消息下方。...条件渲染我们使用条件渲染显示或隐藏某些组件，如未读消息数和不同类型的消息布局：if (contact.unread > 0) { // 显示未读消息数}if (message.isMe) {

    29010

    147. 粘性头部列表基础篇

    一、粘性头部列表概述粘性头部列表是List组件与ListItemGroup组件结合使用的一种应用场景，它具有以下特点：分组显示：内容按照一定规则分组显示粘性头部：当滚动时，当前分组的头部会固定在屏幕顶部层级结构...Stack容器，包含两个主要部分：主内容区（Column容器）：包含标题栏和音乐列表底部播放控制栏：仅在有歌曲播放时显示2....：使用ForEach遍历专辑数据，为每个专辑创建一个ListItemGroup使用自定义的AlbumHeader构建器作为ListItemGroup的头部在每个ListItemGroup中，再次使用ForEach...粘性头部的实现粘性头部功能主要通过List组件的sticky属性实现：.sticky(StickyStyle.Header) // 设置粘性头部这个属性使得ListItemGroup的头部在滚动时保持可见...条件渲染我们使用条件渲染来控制底部播放控制栏的显示：if (this.currentSong) { Row() { /* ... */ }}只有当currentSong不为null时，才会显示底部播放控制栏

    31200
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券