热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Android设计尺寸规范AndroidDesignGuidelines

Android设计尺寸规范–AndroidDesignGuidelines 字体Typography中文字体:SourceHanSansNoto英文字体:Roboto元素字重字号行

Android设计尺寸规范

–Android Design Guidelines 

字体 Typography

中文字体:Source Han Sans / Noto

英文字体:Roboto

元素字重字号行距字间距
App barMedium20sp––
ButtonsMedium15sp–10
HeadlineRegular24sp34dp0
TitleMedium21sp–5
SubheadingRegular17sp30dp10
Body 1Regular15sp23dp10
Body 2Bold15sp26dp10
CaptionRegular13sp–20

图标 icons

图标用途mdpi (160dpi)hdpi (240dpi)xhdpi (320dpi)xxhdpi (480dpi)xxxhdpi (640dpi)
应用图标48 x 48 px72 x 72 px96 x 96 px144 x 144 px192 x 192 px
系统图标24 x 24 px36 x 36 px48 x 48 px72 x 72 px196 x 196 px

应用图标 Product icons

  • 《Android设计尺寸规范--Android Design Guidelines》

    方形

    高度:152dp 宽度:152dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    圆形

    直径:176dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直长方形

    高度:176dp 宽度:128dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    水平长方形

    高度:128dp 宽度:176dp

系统图标 System icons

  • 《Android设计尺寸规范--Android Design Guidelines》

    方形

    高度:18dp 宽度:18dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    圆形

    直径:20dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直长方形

    高度:20dp 宽度:16dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    水平长方形

    高度:16dp 宽度:20dp

快捷图标 Shortcut icon

  • 《Android设计尺寸规范--Android Design Guidelines》

    实际面积

    高度:44dp 宽度:44dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    总面积

    高度:48dp 宽度:48dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    系统图标尺寸

    高度:24dp 宽度:24dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    实际面积位置

    剩余高度:24dp
    剩余宽度:24dp

单位和度量 Units and measurements

dpi =屏幕宽度(或高度)像素 / 屏幕宽度(或高度)英寸

dp =(宽度像素 x 160)/ dpi

名称分辨率 pxdpi像素比示例 dp对应像素
xxxhdpi2160 x 38406404.048dp192px
xxhdpi1080 x 19204803.048dp144px
xhdpi720 x 12803202.048dp96px
hdpi480 x 8002401.548dp72px
mdpi320 x 4801601.048dp48px

UI组件布局 Element Layout

列表 List

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边框和水平外边距

    边框左右外边距各16dp

    带有图标或者头像的内容有 72dp 的左边距。

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边距

    1. 状态栏:24dp
    2. 工具栏:56dp
    3. 子标题:48dp
    4. 列表项:72dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边框和水平外边距

    边框左右外边距各16dp

    带有图标或者头像的内容有 72dp 的左边距。

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边距

    1. 状态栏:24dp
    2. 工具栏:56dp
    3. 标题和列表项:48dp
    4. 子标题:48dp
    5. 内容区域间的距离:8dp

详情视图 Detail view

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边框和水平外边距

    边框左右外边距各16dp

    带有图标或者头像的内容有 72dp 的左边距。

    右边图标的右边距为32dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边距

    1. 状态栏:24dp
    2. 工具栏:56dp
    3. 内容区域间的距离:8dp
    4. 列表项:72dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边框和水平外边距

    边框左右外边距各16dp

    带有图标或者头像的内容有 72dp 的左边距。

    弹出菜单与右边框的距离为56dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    垂直边距

    1. 列表项:48dp
    2. 内容区域间的距离:8dp
    3. 导航右边距:56dp

触控区域尺寸 Touch target size

  • 《Android设计尺寸规范--Android Design Guidelines》

    头像:40dp

    图标:24dp

    触控区:48dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    实例

  • 《Android设计尺寸规范--Android Design Guidelines》

    触控区域高度:48dp

    按钮高度:36dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    实例

应用栏 App bar

  • 《Android设计尺寸规范--Android Design Guidelines》

    应用栏高度:56dp
    应用栏左右内边距:16dp
    应用栏图标上、下、左内边距:16dp
    应用栏标题左内边距:72dp
    应用栏标题下内边距:20dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    应用栏高度:128dp

  • 《Android设计尺寸规范--Android Design Guidelines》

    操作栏高度:56dp
    标题栏高度:80dp
    标题栏底部内边距:8dp
    描述区域高度:72dp
    描述区底部内边距:16dp

 

(如有侵权,请联系作者删除文章)


推荐阅读
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文详细介绍了Android中的坐标系以及与View相关的方法。首先介绍了Android坐标系和视图坐标系的概念,并通过图示进行了解释。接着提到了View的大小可以超过手机屏幕,并且只有在手机屏幕内才能看到。最后,作者表示将在后续文章中继续探讨与View相关的内容。 ... [详细]
  • android 触屏处理流程,android触摸事件处理流程 ? FOOKWOOD「建议收藏」
    android触屏处理流程,android触摸事件处理流程?FOOKWOOD「建议收藏」最近在工作中,经常需要处理触摸事件,但是有时候会出现一些奇怪的bug,比如有时候会检测不到A ... [详细]
  • 开发笔记:图像识别基于主成分分析算法实现人脸二维码识别
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了图像识别基于主成分分析算法实现人脸二维码识别相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 涉及的知识点-ViewGroup的测量与布局-View的测量与布局-滑动冲突的处理-VelocityTracker滑动速率跟踪-Scroller实现弹性滑动-屏幕宽高的获取等实现步 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • SpringBoot整合SpringSecurity+JWT实现单点登录
    SpringBoot整合SpringSecurity+JWT实现单点登录,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文介绍了pack布局管理器在Perl/Tk中的使用方法及注意事项。通过调用pack()方法,可以控制部件在显示窗口中的位置和大小。同时,本文还提到了在使用pack布局管理器时,应注意将部件分组以便在水平和垂直方向上进行堆放。此外,还介绍了使用Frame部件或Toplevel部件来组织部件在窗口内的方法。最后,本文强调了在使用pack布局管理器时,应避免在中间切换到grid布局管理器,以免造成混乱。 ... [详细]
  • 带添加按钮的GridView,item的删除事件
    先上图片效果;gridView无数据时显示添加按钮,有数据时,第一格显示添加按钮,后面显示数据:布局文件:addr_manage.xml<?xmlve ... [详细]
  • Android源码中的Builder模式及其作用
    本文主要解释了什么是Builder模式以及其作用,并结合Android源码来分析Builder模式的实现。Builder模式是将产品的设计、表示和构建进行分离,通过引入建造者角色,简化了构建复杂产品的流程,并且使得产品的构建可以灵活适应变化。使用Builder模式可以解决开发者需要关注产品表示和构建步骤的问题,并且当构建流程发生变化时,无需修改代码即可适配新的构建流程。 ... [详细]
  • 本文整理了Java中com.evernote.android.job.JobRequest.getTransientExtras()方法的一些代码示例,展示了 ... [详细]
  • Java图形化计算器设计与实现
    本文介绍了使用Java编程语言设计和实现图形化计算器的方法。通过使用swing包和awt包中的组件,作者创建了一个具有按钮监听器和自定义界面尺寸和布局的计算器。文章还分享了在图形化界面设计中的一些心得体会。 ... [详细]
  • SmartRefreshLayout自定义头部刷新和底部加载
    1.添加依赖implementation‘com.scwang.smartrefresh:SmartRefreshLayout:1.0.3’implementation‘com.s ... [详细]
  • python3 logging
    python3logginghttps:docs.python.org3.5librarylogging.html,先3.5是因为我当前的python版本是3.5之所 ... [详细]
  • 我收到这个错误.我怎么能在我的情况下解决这个问题?Bitmapcannotberesolvedtoatype发生错误的行publicvoidonPageStart ... [详细]
author-avatar
手机用户2502911617_428
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有