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

Material Design —卡片(Cards)

左:卡片有圆角、能有多个操作、可关闭/重现    右:是tile不是卡片,无圆角、最多两个操作 ? 左:快速可浏览列表,适合展示无操作同类内容    右:阻碍了快速浏览,且这些内容不能关闭 ?...例如,将主要内容放置顶部,或使用排版来强调最重要内容。 图像可以强化卡片其他内容。 但是,它们卡内大小和位置取决于图像是主要内容还是用于补充卡片其他内容。...卡片不会翻转以显示背面的信息。 支持手势 卡片手势应始终卡片集合实施。 支持手势包括: 滑动手势(swipe gesture)可以每张卡片上使用。限制视图轻扫手势,使其不会彼此重叠。...集合卡片中,始终展示操作。 补充操作 使用图标,文本和UI控件(通常放置底部)明确调出卡内补充操作。 除了溢出菜单之外,补充操作限制为两个操作。 ? ?...UI控件 与主内容内联放置UI控件(滑块)可以修改主内容视图。 例如,可以选择日期滑块,评分内容星星,或选择日期范围分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置右上角。

4.3K100

Android从零单排系列三十四】《Android布局介绍——ConstraintLayout》

ConstraintLayout允许将多个视图放置单个容器内,减少了嵌套和层次深度,提高了布局效率和可读性。...开发者可以使用约束条件(layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等)来定义视图与其他视图或边界关系,从而精确控制视图布局位置和大小...:XML文件,你可以通过预览功能(Android Studio布局编辑器)来查看布局效果,并根据需要进行微调和修改。...同时,它底部边缘与父容器底部边缘对齐。 通过这样约束条件,我们可以实现一种垂直排列布局,其中TextView 1位于顶部,TextView 2位于其下方,Button位于最底部。...开发者可以使用约束条件(layout_constraintLeft_toLeftOf、layout_constraintTop_toTopOf等)来定义视图与其他视图或边界关系,从而精确控制视图布局位置和大小

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

导航设计10种模式

实际项目中,顶部底部配合使用挺多。 ?...一般位于产品顶部,通过点击呼出导航菜单; 通常用来筛选同一信息模块下不同类别的信息,或者快速启动某些常用功能模块,不需要频繁页面跳转 ; Android对应控件为spinner控件,但该控件用于同一类别下不同视图之间切换...,不是跳转至完全不同视图。...08 列表导航 描述: 作为信息组织框架,是我们在产品设计必不可少一个信息承载模式。 适合用来显示较长或拥有次级文字内容标题,每行可以融入较多信息。...举例:淘宝首页 淘宝首页布局就是是顶部搜索框(非常重要)+banner轮播(精准推送广告、形成变现)+宫格(给阿里系产品进行导流)+卡片+底部tab。

3.4K40

GUI界面如何设计??|Mixlab指南推荐

最常见对话流设计是社交应用常用左右结构布局,即界面左右两侧分别显示对方输出内容以及用户自己输入内容;最新消息显示界面底部,包括用户即将输入内容,以图4 Google AlloGoogle...如果不考虑对话流,语音助手显示顶部或者底部都没问题,一旦考虑对话流,语音助手显示顶部会存在一个问题:对话流最新内容是从上往下排序,还是从下往上排序?...现有绝大部分语音助手状态显示会和ASR在位置上强绑定,因此它们相当于一个输入框。如果输入框显示在上方,最新内容显示底部,用户很有可能会觉得困扰。...目前只有新闻信息流会将最新信息显示界面顶部,但概念上和对话流有着较大差异。因此,笔者不建议将语音助手的当前状态和ASR内容显示界面顶部同时加入对话流设计。...当用户不点击提示词开始说话时候,ASR区域内提示词会自行消失并实时显示用户说内容,第二张图。

1K30

探索 Android Design Support Library v28 新增内容

Chip Chip 组件允许我们布局展示一个纸片组件. 其本质上一些文字被赋予一个圆形背景 -- 这样做目的是向用户显示某种形式文本集合, 可能被选择也可能不被选择....我们可以像这样布局添加一个 Chip , 使用 app:chipText 属性设置 Chip 显示文本: <android.support.design.chip.Chip android...这样做时, 你需要将 ChipGroup 封装在滚动视图( HorizontalScrollView ), 以便用户可以滑动正在显示 Chip....除了这两个属性之外, 还可以使用最初可用属性( app:cardBackgroundColor 等)设置卡片视图样式....Bottom App Bar 底部应用栏是一个新组件, 它允许我们布局底部显示一个类似工具栏组件. 这使我们能够以比标准工具栏更容易交互方式向用户显示组件. ?

1.8K20

一起看 IO | Android 开发工具最新更新

定义注解类来更便捷地一次性包含并启用多个 Compose 预览定义。 Layout Inspector (布局检查器) 追踪可组合项重排计数。...该功能可以帮助您在开发过程中发现并及时更新依赖,不是等到 Play Console 上发布应用时才去处理依赖问题。如需了解此新工具更多信息,请参阅 Android 开发者近期发布文章。...当我们收到大家反馈后,将会及时进行优化并将上述功能向前推进到更加稳定渠道,所以欢迎大家踊跃尝试。 如需了解更多新特性,请观看演讲视频 Android 开发工具最新更新。...图片 △ 多重预览注解 布局检查器 Compose 重新组合计数 - 布局检查器查看 Compose 应用重新组合计数。重新组合计数和跳过计数可配置显示组件树和属性窗格。...图片 △ 来自 Firebase Crashlytics 应用质量洞察 大屏幕 可变尺寸模拟器 - 使用单个模拟器实例,快速具有代表性参考设备之间切换从而测试不同应用布局状态。

9K40

Android Material Design系列之RecyclerView和CardView

RecyclerView、CardView为用于显示复杂视图新增Widget。接下来看看如何使用吧。...是复用RecyclerView,是把ViewHolder作为缓存单位了,然后convertView作为ViewHolder成员变量保持ViewHolder,也就是说,假设手机屏幕可显示10...所以它性能比以前应该好了不少。 LayoutManager:这个LayoutManager类决定视图被放在画面哪个位置,但这只是它众多职责之一。它可以管理滚动和循环利用。...Adapter和Activity全部代码太多,而且微信对代码支持不是很好,我就不贴出来了,想看代码去下载demo就可以了。...CardView属性 CardView中常用属性有: cardElevation:设置阴影大小 cardBackgroundColor:卡片布局背景颜色 cardCornerRadius:卡片布局圆角大小

2K80

【软件开发规范七】《Android UI设计规范》

物理世界运动和变化都是有加速和减速过程,忽然开始、忽然停止匀速动画显得机械不真实。考虑动画easing,要先考虑它在现实世界运动规律。...卡片通常是通往更详细复杂信息入口。卡片有固定宽度和可变高度。最大高度限制于可适应平台上单一视图内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后信息。 ​...编辑 **卡片集**是**卡片**一个平面布局 ​编辑 即使同一个列表卡片内容和布局方式也可以不一样。 ​编辑 卡片统一带有2dp圆角。...通过按压动作可以触发悬浮卡片(或者是全屏视图) Chip 对应实体视图,或者是弹出与 Chip 实体相关操作菜单。 狭小空间内表现复杂信息一个组件,比如日期、联系人选择器。 ​...网格列表与应用于布局和其他可视视图网格有着明显区别。 ​

4.9K20

Android Tangram模型:连淘宝、天猫都在用UI框架模型你一定要懂

应用场景 常规业务 复杂布局格式混排,:浮动布局、栏格布局、通栏布局、一拖N布局、瀑布流布局,还可以组合使用这些布局 具体场景是:电商平台首页、活动频道等等 Tangram 模型目前已在手机天猫...4.1 高性能 性能方面,希望 贴近Native开发,重点:页面渲染效率 & 组件回收复用 页面渲染:为了提升渲染效率,Tangram将在视图渲染之前把大量计算工作VM完成,并缓存在VM...回收和复用——TangramAndroid和iOS平台上分别开发了VLayout和 LazyScroll两个基础组件,通过一个双索引可见区域组件发现算法,实现了跨父节点组件高效回收和复用。...但这种动态化 是 面向粗粒度组件:通过 布局+组件形式搭建整个页面,不是一般从 基本UI元素(如按钮blabla)搭建页面。...其实也很好理解,业务人员需要用到是 能承担一定业务能力“业务布局”,不是单一UI元素(按钮、文本blabla) 好处:使用成本低,上线周期短 4.3 扩展性好 采用插件化扩展 内部本来就注册框架里

2.3K10

Google IO大会,炫酷产品汇总

许多虚拟现实优化内容和游戏还在开发,包括谷歌自己Play Movies, Street View 和Google Photos。 Android N 今年三月,谷歌发布Android N预览版。...Instant App Instant App是提高效率另外一项尝试,在这种情况下,集成移动网络和独立移动应用程序。该技术可以下载需要应用程序独立模块不是下载整个应用程序。...它顶部是一个斜面,有几个LED灯会闪烁,表明其正在工作,底部是若干随着音乐舞动多彩LED,内部是一枚音箱。 Google Home是Google向Amazon Echo发出挑战。...开发工具 谷歌开发环境:Android Studio 2.2预览版,改变开发方式、测试记录、更快构建与布局布局设计已经有更多自动化。...还有新APK分析器,用于布局检查,代码分析中新质量检测工具,和最新intelliJ IDE。扩展平台支持,包括改进C++和Jack编译器/Java8。

2K100

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

我们先来进行第一项优化,使用 NavRail 而非底部应用栏,首先我们要考虑是导航模型,所幸我们不会更改很多具体视图,仅仅只会更改导航方式,因为 NavRail 会一直存在于整个视图体系,可以通过它导航到任何其他视图...Android Studio 查看显示是否一切正常,通过各种 Reference Devices 来回切换查看布局是否按照我们预期进行。...所有的界面都是通过代码描述而成,这样也就很容易在运行时做出关于界面样式决策,而在传统视图系统,我们通过对不同屏幕配置进行编译,从而实现对视图配置,这两者有着巨大不同。... JetNews 我们首先获取窗口大小类信息,较小和中等型宽度显示单窗口,而在展开型宽度显示列表/详情布局。...但这次更改是针对屏幕尺寸做决策,我们是不是可以让单个组件自身根据页面拥有不同尺寸呢?例如我们有一张卡片,当在列表因为空间限制只展示标题和副标题,而有更多空间时,则调整为显示图像。

4.1K20

android常用布局详解「建议收藏」

大家好,又见面了,我是你们朋友全栈君。 view和布局 一个Android应用程序,用户界面通过View和ViewGroup对象构建。...View布局显示方式直接影响用户界面,View布局方式是指一组View元素如何布局,准确说是一个ViewGroup包含一些View怎么样布局。...center:居中显示,这里并不是表示显示LinearLayout中心,当LinearLayout线性方向为垂直方向时,center表示水平居中,但是并不能垂直居中,此时等同于 center_horizontal...android:layout_weight: 权重,用来分配当前控件剩余空间大小,如果你不设置,所有的视图都有一个layout_weight值,默认为零,意思是需要显示多大视图就占据多大屏幕空间...” android:layout_alignParentTop 控件顶部与父控件顶部对齐; android:layout_alignParentBottom 控件底部与父控件底部对齐; android

1.7K40

Android从零单排系列三十二】《Android布局介绍——AbsoluteLayout》

前言 小伙伴们,在上文中我们介绍了Android布局TableLayout,本文我们继续盘点介绍Android开发另一个常见布局,绝对布局AbsoluteLayout。...AbsoluteLayout,每个子视图位置和大小都是通过设置其android:layout_x和android:layout_y属性来确定。...然而,由于Android设备多样性和不同屏幕尺寸存在,使用绝对坐标来布局视图可能会导致不同设备上显示效果不一致,可能会出现重叠、截断或遮挡情况。...:layout_alignParentRight: 这些属性用于将控件相对于父布局顶部底部、左边和右边进行对齐。...: 这些属性用于将控件相对于其他控件顶部底部、左边和右边进行对齐。

17110

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

一些第三方开源库PullToRefresh、SmartRefreshLayout固然能让整体页面下滑,可是顶部下拉布局很难个性化定制,至于状态栏、工具栏背景色修改更是三不管。...所以此处得捕捉页面滚动到顶部事件,相对应则是页面滚动到底部事件。鉴于App首页基本采用滚动视图ScrollView实现页面滚动功能,故而该问题就变成了如何监听该视图滚到顶部或者滚到底部。...这个和事佬必须是下拉布局和滚动视图上级布局,考虑到下拉布局在上,滚动视图在下,故它俩上级布局继承线性布局LinearLayout比较合适。...新上层视图需要完成以下三项任务: 一、在下层视图最前面自动添加一个下拉刷新头部,保证该下拉头部位于整个页面的最上方; 二、给前面自定义滚动视图注册滚动监听器和触摸监听器,其中滚动监听器用于处理到达顶部.../底部事件,触摸监听器用于处理下拉过程持续位移。

2.8K40

详解Android ConstraintLayout 约束布局用法

2017年Google发布了 Android Studio 2.3 正式版, Android Studio 2.3 版本中新建Module默认布局就是 ConstraintLayout 。...另外,ConstraintLayout 还有一个优点,它可以有效地解决布局嵌套过多问题。我们平时编写界面,复杂布局总会伴随着多层嵌套,嵌套越多,程序性能也就越差。...layout_constraintTop_toBottomOf // 将所需视图顶部与另一个视图底部对齐。...layout_constraintBottom_toTopOf // 将所需视图底部与另一个视图顶部对齐。...那么我们有个疑问,为什么Button 是居中显示?因为在上面的布局中有两个重要属性没有写出来,但是却有默认属性值,那就是水平、垂直偏移比例。

3.7K20

Android性能优化-渲染优化

通常来说,帧率超过刷新频率只是一种理想状况,超过60fps情况下,GPU所产生帧数据会因为等待VSYNC刷新信息被Hold住,这样能够保持每次刷新都有实际数据可以显示。...我们实际项目中了已通过Monitor进行内存抖动分析,再通过分析源码来看是否某一时刻重复创建大量对象,导致GC回收。 ?...现在,我们选择一个特定方法,我们跳转到跟踪视图窗口底部,这里,我们看到一些分析数据显示出来。我们可以看到哪些方法调用了我们选定方法。...CPU方面,最常见性能问题是不必要布局和失效,这些内容必须在视图层次结构中进行测量、清除并重新创建,引发这种问题通常有两个原因:一是重建显示列表次数太多,二是花费太多时间作废视图层次并进行不必要重绘...首先我们要从视图中清除那些,不必要背景和图片,他们不会在最终渲染图像显示,这些都会影响性能。其次,对视图中重叠屏幕区域进行定义,从而降低CPU和GPU消耗。

1.4K20

Flutter 2.8正式版发布了,还不来看看

之前版本 Flutter ,嵌入平台视图会创建一个新 canvas,每嵌入一个平台视图都会新增一个 canvas。...这意味着你可以 Web 应用拥有多个 HtmlElementView 实例不会降低性能,同时还可以减少使用平台视图滚动卡顿。...因为新功能数量增加,我们提升了主要版本号,但也因为 Web 视图 Android工作方式可能发生了重大变化。...之前 webview_flutter 版本,Hybrid composition 已经可用,但不是默认现在它修复了先前默认以虚拟显示模式运行许多问题。...当然,这也可能不是唯一一处初始化代码地方,比如你需要在 Android 或 iOS 创建 Crashlytics 调试符号 (dSYM) 时候。

22.3K30

Flutter 2.8 新特性【flutter专题17】

此外为了创建更少卡顿动画效果,开发者可能会想要更多关于光栅缓存行为性能跟踪信息,因为这个行为对于 Flutter 来说是比较昂贵,可以重复使用图片进行 blit, 不是每一帧上重新绘制它们,...选择此标签会显示应用启动配置文件数据。 Web platform views Android 和 iOS 并不是唯一获得性能改进平台,该版本还改进了 Flutter web 平台性能。...所以该版本会复用早期平台视图创建画布,这意味着开发者可以 HtmlElementView Web 应用拥有多个实例不会降低性能,同时还可以减少使用平台视图滚动卡顿。...DartPad DartPad 改进,其中最大改进是对更多包支持,事实上现在有 23 个包可供导入,除了几个 Firebase 服务,该名单包含常用软件 bloc,characters,collection...以前 DartPad 总是运行最新稳定版本,在此版本可以使用状态栏新频道菜单,来选择最新 Beta 频道版本以及之前稳定版本(称为“旧频道”)。

2.4K10

Flutte部件目录-Material Components 顶

实现Material Design指南视觉,行为和运动丰富小部件。 应用程序结构和导航 按钮 输入和选择 对话框,弹出框和面板 信息显示 布局 查看Flutter窗口小部件目录更多小部件。...应用程序结构和导航 Scaffold Appbar 上面两个基本部件已经讲过。 BottomNavigationBar ? 底部导航栏可轻松浏览并在单次点击之间顶层视图之间切换。...一个显示应用底部材质小部件,用于少量视图中进行选择,通常介于3到5之间。 底部导航栏由文本标签,图标或两者多个项目组成,并放置一块材料顶部。 它提供了应用程序顶级视图之间快速导航。...SnackBar 带有可选操作轻量级消息,简要显示屏幕底部。 ? 信息显示 Image 一个显示图像小部件。 ? Icon 材质设计图标。 ?...芯片代表小块复杂实体,联系人。 ? Tooltip 工具提示提供文本标签可帮助解释按钮或其他用户界面操作功能。

9.4K40
领券