Android - 开发页面需了解的dip,sp,px知识,以及它们的转换

工作中,时常会有任务要求开发新页面,这时一般的流程是产品经理确定要开发的页面和功能,然后设计师提供设计稿,之后由我们开发人员完成开发工作。

通常,设计师提供的设计稿尺寸标注会很详细,例如涉及到字时,字的大小,位置,颜色,字体等,都会一一标注。这时注意的是,设计师提供的尺寸标注全部是px(像素)为单位。

但我们在开发时不能直接使用px,按照Android规范,间距需使用dip(dp),字体大小需使用sp.

这时就需要我们做出px与dip(dp),sp的转换。

一. 了解dip(dp),sp,px

  首先来了解一下。

  dip:device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA、HVGA和QVGA 推荐使用这个,不依赖像素

  dp:通常认为dp = dip,一般我们使用dip。

  sp:scaled pixels(放大像素). 主要用于字体显示。问个问题,为什么我们不用dip来控制字体大小?而是使用sp。下面会介绍。

  px:像素,是一个绝对值,不同设备显示效果相同,是多少就是多少,不会改变。

  所以由此可见,我们为了支持不同分辨率,制作页面时的间距应使用dip,而不是px。但也有特殊的例外情况,例如我们经常会需要在页面中画一条直线,做为分割线,那么线的高度直接用1px即可,这里要用px。

二. dip(dp),sp与px的转换

  转换时,涉及到的新概念是分辨率与密度值

  转换公式:dip = px/mdpi基准比例,sp = px/mdpi基准比例,注意不同分辨率的基准比例不同。

  例如在1080的分辨率下,比例值是3,设计稿上的间距如果是40px,那么对应的dip就是13.3333dip(尽量使用小数点,更精确)。这样的显示效果会与设计稿一致。

  但是,我在上网查阅资料时,发现sp的计算公式略有不同,有一个公式,sp = (int)(px/mdpi + 0.5f),这样最后得到一个整数,难道是字体大小一般要用整数?经过实践发现,还是直接sp=px/mdpi靠谱,例如字体大小是40px,那么13.3333sp才是最准确的答案。

三. 开发时,如果确保计算后的间距于设计稿一致?

  这时推荐大家使用的工具是Hierarchyviewer,通过它,可以一目了然的看到真实的px大小,保证开发时的正确。

四. 一个小问题,为何字体大小推荐使用sp,而不是dip?

  这是因为我们在手机设置里通常有字号大小的调整,当用户调整字号大小时,如从标准调整为超大号,如果你的字体使用sp,就是相应的根据换算调整,如果是dip,则会保持不变,那这样的效果不是我们想要的。

                                  — Kevin Song

                                                                                                 2016.5.29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Winter漫聊技术

一个随机播放的算法II

音乐时光? 骑着车,戴着耳机,播放列表里有几首歌。 突然,很想听《且听风吟》,但是不想掏出手机,于是一路双击耳机播放键切歌。 emmm,下面是切过的歌:

753
来自专栏VRPinea

VR建模工具Blocks发布新版本,将更加易于使用

3469
来自专栏AI研习社

Github 项目推荐 | 面向多设备和多框架的英特尔开源编译器 —— nGraph

英特尔近期开源了深度学习框架编译器 nGraph。nGraph 是一款开源 C++ 库,编译器和运行器,它能够让数据科学家能够专注于数据科学研发,不需要担心如何...

883
来自专栏Crossin的编程教室

【Python 第40课】 用文件保存游戏(2)

话接上回。我们已经能从文件中读取游戏成绩数据了,接下来就要考虑,怎么把我们每次游戏的结果保存进去。 首先,我们需要有一个变量来记录每次游戏所用的轮数: time...

3356
来自专栏Material Design组件

Human Interface Guidelines — Progress Indicators

853
来自专栏Python中文社区

利用人工智能实现小程序自动答题

之前有看到有人用python实现自动运行微信小程序《跳一跳》,后来看到别人用hash码实现《加减大师》的自动答题领取娃娃,最近一直在研究深度学习,为啥不用机器学...

1062
来自专栏LET

可视化之Earth NullSchool

1464
来自专栏数据小魔方

多维放射状流向图的最佳布局方案

最近,有很多小伙伴儿跟我咨询一个比较复杂的地图图表画法。 需求是这样的,一个国家各省或者全球各国之间存在的贸易关系、或者其他经济往来。想要用线条来表达这些指标的...

3519
来自专栏BY的专栏

iOS噪音计原理、分贝计

4046
来自专栏ATYUN订阅号

使用Unity3D和TensorFlow教AI投篮

在本文中,我们将深入探讨如何使用Unity3D和TensorFlow来教AI执行简单的游戏任务:投篮。完整的源代码可以在文末访问Github链接。

1043

扫码关注云+社区