android显示布局边界的边距_Android设计规范 Material Design-Layout(2 度量与边框)

度量与边框

基准网络

所有组件都与间隔为8dp的基准网格对齐。排版/文字(Type)与间隔为4dp的基准网格对齐。在工具条中的图标同样与间隔为4dp的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。

有关详细信息请参见组件一节。

有关详细信息请参见字体排版一节。

边框与间距

移动设备

移动设备布局模板包含了多种多样的屏幕和信息,这些信息描述了边框与间距如何应用于屏幕边界和元素。下面是一个有关屏幕的实例,这个实例可以通过如下的链接获得。

内容

该屏幕演示图标、头像和一个2行文本的列表如何左对齐,以及一个56dp的浮动动作按钮和文本如何右对齐。

垂直边框和水平外边距

左右各有16dp的垂直边框。带有图标或者头像的内容有72dp的左边距。

在移动设备上有16dp的水平外边距。

垂直边距

24dp

56dp

48dp

72dp

内容

该屏幕演示图标、头像、2行文本列表、子标题和40dp的浮动动作按钮如何左对齐。小图标右对齐。

垂直边框和水平边距

图标(大小图标)有16dp的左右垂直边框。带有图标或者头像的内容有72dp的左边距。

在移动设备上有16dp的水平外边距。

垂直边距

24dp

56dp

72dp

48dp

8dp

内容

该屏幕演示图标如何左对齐,以及图标和一个56dp的浮动动作按钮如何右对齐。

垂直边框和水平边距

图标有16dp的左垂直边框。带有图标或头像的内容有72dp的左边距,32dp的右边距(考虑到56dp的圆形浮动动作按钮)。这样圆形浮动动作按钮下的图标也对齐了。

在移动设备上有16dp的水平外边距。

垂直边距

24dp

56dp

8dp

72dp

内容

该屏幕演示图标、头像和文本如何左对齐,浮动动作按钮、图标和文本如何右对齐。

垂直边框和水平边距

图标有16dp的左右垂直边框。带有图标或头像的内容区域左对齐,距左边界72dp。

在移动设备上有16dp的水平边距。

垂直边距

24dp

56dp

48dp

8dp

内容

该屏幕演示了侧边导航菜单的宽度,以及图标、头像和文本如何左对齐,小图标如何右对齐。

垂直边框和水平边距

图标距侧边导航菜单的左右边界分别有16dp的垂直边框。带有图标或者头像的内容距侧边导航菜单的左边界72dp。侧边导航菜单的宽度等于屏幕的宽度减去动作条的高度,即在本例中距屏幕右侧56dp的宽。

在移动设备上有16dp的水平外边距。

垂直边距

48dp

8dp

56dp

平板设备

平板设备布局模板包含了14种不同的屏幕,显示了边框和边距如何应用于屏幕的边界和元素。下面的实例是14种模板的两个,可以通过下面的链接获取。

24dp

64dp

8dp

72dp

24dp

64dp

8dp

48dp

80dp

桌面应用程序

桌面应用程序布局模板包含了4个不同的屏幕,每一个屏幕又包括了4个不同的窗口尺寸,显示了边框和边距如何应用于窗口和元素。下面是一个屏幕的实例,可以通过下面所示的链接下载。基于不同的窗口尺寸,边框和边距块会沿袭平板设备和移动设备的网格规则。

比率边框

应用于移动设备屏幕的宽度和移动设备、平板设备以及桌面应用程序中UI元素的宽度。

屏幕的宽度

示例

元素的宽度

示例

增量边框

增量边框

增量边框定义了一个增量,比如动作条的高度,然后使用几倍于这个增量的数字来决定应用中其它元素的尺寸和位置。

大多数应用于桌面应用程序,有些也适用于平板设备,很少应用在移动设备中。增量的数量会根据窗口的尺寸来改变。

触摸目标尺寸

最小的触摸目标尺寸是48dp。在布局中,当为图标(24dp)或者头像(40dp)设置边距时,要时刻记得。触摸目标不能重叠。

非常感谢这些辛苦翻译的小伙伴!!

文章转自:http://design.1sters.com/

=========================关于学ui网=========================

xueui.cn 学ui网发布高质量ui设计教程和设计分享经验,希望打造一个最好的ui学习教程平台!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276188.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《大规模分布式系统架构与设计实战》

《大规模分布式系统架构与设计实战》 基本信息 作者: 彭渊 丛书名: 大数据技术丛书 出版社:机械工业出版社 ISBN:9787111455035 上架时间:2014-2-21 出版日期:2014 年2月 开本:16开 页码&…

WINDOWS下的squid

今天写这篇教程目的在于分享自己在WINDOWS主机下配置squid的方法。哪些地方写的不完善或是不完整或是需要修改的地方,大家可以提出。我会第一时间纠正。下面看正文部分。先提条件,您预安装配置squid的这台计算机必须是联入网络的,系统版本是w…

Provide/inject 真的可以取代 Vuex 吗?

Hello,各位小伙伴,接下来的一段时间里,我会把我的课程《Vue.js 3.0 核心源码解析》中问题的答案陆续在我的公众号发布,由于课程的问题大多数都是开放性的问题,所以我的答案也不一定是标准的,仅供你参考喔。…

php 计算代码执行时间

转载链接:http://blog.csdn.net/php_boy/article/details/6450678 class runtime {var $StartTime 0;var $StopTime 0;function get_microtime(){list($usec, $sec) explode( , microtime());return ((float)$usec (float)$sec);}function start(){$this->S…

参数方程求二阶偏导_偏微分方程

常微分方程(ODE) 的时候我们更多是关于时间的导数。偏微分方程(partial differential equation) 则不仅仅是与时间相关,加上了与空间位置相关的一些信息。解当 ODE 满足 利普希茨连续(Lipschitz continuity&#xff09…

Spring Batch 批量处理策略

为了帮助设计和实现批量处理系统,基本的批量应用是通过块和模式来构建的,同时也应该能够为程序开发人员和设计人员提供结构的样例和基础的批量处理程序。当你开始设计一个批量作业任务的时候,商业逻辑应该被拆分一系列的步骤,而这…

CString原理介绍

看了很多人写的程序,包括我自己写的一些代码,发现很大的一部分bug是关于MFC类中的CString的错误用法的.出现这种错误的原因主要是对CString的实现机制不是太了解。 CString是对于原来标准c中字符串类型的一种的包装。因为,通过很长时间的编程&#xff0c…

如何从零开始开发一个 Chrome 插件?

什么是浏览器插件?简单来说浏览器插件,是浏览器上的一种工具,可以提供一些浏览器没有的功能,帮你做一些有趣的事情。开发者可以根据自己的喜欢,去实现一些功能。插件基于Web技术(html、css、js)…

mysql 重复字段查询及排除重复值

转载链接:http://blog.sina.com.cn/s/blog_3edc5e2e010131ys.html mysql 重复字段查询及排除重复值 SELECT a.id,a.title FROM dede_archives a left join dede_taglist t on t.taga.title WHERE t.typeid$id and t.arcrank>-1 and a.typeid28 group by t.tag; …

swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播

首先是实例化swiper这里有一个注意点,就是实例化的时机如果你的swiper内容是写死的,可以在componentDidMount中实例化,但是如果你的内容是通过接口异步请求过来的,就必须在componentDidUpdate里实例化,因为如果在 comp…

轉Excel的一種簡單方法

写了这么久的程序﹐越来越喜欢那种简单的解决方法﹐这段时间在做一个报表系统﹐其中有需要转Excel﹐而且要求兼容openoffice﹐遂利用asp语法,asp.net的控件封装特性以及excel 2003的xml试算清格式做了一个看起来比较"清爽"的excel转档方案。一.开始原理很简单﹐excel…

详解MySQL中EXPLAIN解释命令

转载链接:http://database.51cto.com/art/200912/168453.htm explain显示了mysql如何使用索引来处理select语句以及连接表。可以帮助选择更好的索引和写出更优化的查询语句。 使用方法,在select语句前加上explain就可以了: 如:…

Shell编程基础

我们可以使用任意一种文字编辑器,比如gedit、kedit、emacs、vi等来编写shell脚本,它必须以如下行开始(必须放在文件的第一行): # !/bin/sh ...注意:最好使用“!/bin/bash”而不是“!/bin/sh”,…

总结:自学前端的高效学习路线

提到前端,大多数人都会想到薪资高。也正因为如此,很多人想要从事前端开发这个岗位,也由此衍生出来一个问题:为什么前端工程师供不应求,但还是有很多学前端的人找不到工作?其实行业不是缺前端工程师&#xf…

机器人出魔切还是三相_英雄联盟:辅助也要去上单,机器人布里茨玩法介绍

英雄联盟:辅助也要去上单,机器人布里茨玩法介绍出装方面我们都知道他的被动是可以将法力值化为机的护盾的,而这样的话装备就可以选择魔切,然后再出一个鞋子,为什么不先出三项呢?三项的性价比是比较高的&…

vmware创建虚拟机不识别网卡

今天在给虚拟机添加网卡的时候,出现了虚拟机不识别新加的网卡,很纳闷,连的一样的端口组,为什么新加的网卡识别不了呢 然后查看pci设备,发现网卡的驱动为 AMD 79C970 PCnet32- LANCE 然后都vc上查看,果真驱动…

转:26个Jquery使用小技巧(jQuery tips, tricks solutions)

26个Jquery使用小技巧(jQuery tips, tricks & solutions) 前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接…

周末包邮送书和小红包中奖名单公布

大家好,我是若川。周末送福利,给大家送红包、包邮送新书!这篇文章中,准备了3本自选前端新书,10个2元小红包,在看抽10人每人5元红包,2月28日晚8点开奖。现将名单公布如下:在看抽奖&am…

Ubuntu 命令行修改网络配置方法

转载链接:http://www.jb51.net/article/15807.htm Ubuntu 命令行修改网络配置方法 /etc/network/interfaces 打开后里面可设置DHCP或手动设置静态ip。前面auto eth0,让网卡开机自动挂载. 1. 以DHCP方式配置网卡 编辑文件/etc/network/interfaces: sudo v…

python treeview底部加个按钮_Python爬取京东商品信息(GUI版本)

前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。作者:DYblog转载:https://www.cnblogs.com/dy8888/p/13257918.htmlPS:如有需要Python学习资料的小伙伴可以加点击…