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 条评论
登录 后参与评论

相关文章

来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

4012
来自专栏机器学习养成记

十九大讲话文本分析(R语言)

18日观看了十九大的开幕直播,聆听了习大大的重要讲话,如此重要的讲话,怎能不结合我们的文本挖掘技术来深刻学习一下呢!这次的文章就让我们用R里面的jiebaR包和...

3297
来自专栏数据小魔方

交叉柱形图

今天继续跟大家分享一组交叉柱形图的制作技巧! 该图表是从一本图表书中看到的,可以在同一幅图表中以两种视角展示同一组年度数据指标,步骤相对比较复杂,甚至有点炫技之...

4127
来自专栏数据小魔方

think-cell char 4——瀑布图案例应用

今天要分享的是瀑布图的两个案例应用。 因为瀑布图的用法比较特殊,在数据组织方面需要很强的技巧,所以这里再用两个案例来讲解瀑布图的用法。 ? ? 首先来看第一个案...

6807
来自专栏小白课代表

有了它,图片放大100倍不是梦

2234
来自专栏MixLab科技+设计实验室

用代码生成Glitch Art风格的抖音字体

最近看到不少文章教大家用 photoshop 实现抖音的 logo 跟字体,我也非常喜欢这种风格的字体,于是趁着晚上的时间,动手用代码实现了下此类风格的字体特效...

5338
来自专栏MixLab科技+设计实验室

从Storyboard到DIY实现一个漫画生成器-01

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧,并将其应用于6种视觉样式中的一种。生成的漫画...

1404
来自专栏数据小魔方

竟然是一个升级版的数据透视表,Tableau真的没有那么神秘~

前一篇跟大家详述了关于Excel在作图理念上的诸多细节,今天让我们把聚焦于多分类维度的数据呈现问题。 当然今天这篇我会把视角从Excel切换到Tableau,没...

1.1K7
来自专栏前端儿

小明的调查作业

小明的老师布置了一份调查作业,小明想在学校中请一些同学一起做一项问卷调查,聪明的小明为了实验的客观性,想利用自己的计算机知识帮助自己。他先用计算机生成了N个1到...

1191
来自专栏天天P图攻城狮

终端图像处理系列 - 图像混合模式的Shader实现

在图像处理应用中,将两张或者多张图片混合显示是非常常见的一种操作,应用场景包括但不限于:加水印、标签,插入画中画,遮盖等等...

1.1K17

扫码关注云+社区

领取腾讯云代金券