Android UI设计中px、pt、ppi、dpi、dp、sp之间的关系

做了几个移动端的项目之后,深感UI设计移动端尺寸换算的必要性,在此做个总结。

先介绍下各自的定义:

px: pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元

pt: point,点,印刷行业常用单位,等于1/72英寸

ppi: pixel per inch,每英寸像素数,该值越高,则屏幕越细腻

dpi: dot per inch,每英寸多少点,该值越高,则图片越细腻

dp: dip,Density-independent pixel, 是安卓开发用的长度单位,1dp表示在屏幕像素点密度为160ppi时1px长度

sp: scale-independent pixel,安卓开发用的字体大小单位。

以下是换算关系:

一、pt和px

公式一: 1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 ), 1pt=1px; 当新建画布分辨率为72*2=144ppi时,1pt=2px

二、ppi和dpi

dpi最初用于衡量打印物上每英寸的点数密度。DPI值越小图片越不精细。当DPI的概念用在计算机屏幕上时,就应称之为ppi。同理: PPI就是计算机屏幕上每英寸可以显示的像素点的数量。因此,在电子屏幕显示中提到的ppi和dpi是一样的,可认为

公式二:dpi=ppi

三、ppi计算方法

ppi是指屏幕上的像素密度,其计算方法为:

公式三: ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度

以小米2s为例,该屏幕分辨率为720px*1280px,4.3英寸。则点密度为 √ (720^2 +1280^2) /4.3 = 342ppi。

四、px和dp

dp为安卓开发时的长度单位,根据不同的屏幕分辨率,与px有不同的对应关系。

安卓端屏幕大小各不相同,根据其像素密度,分为以下几种规格:

1dp定义为屏幕密度值为160ppi时的1px,即,在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即,在xhdpi的密度下,1dp=2px;在hdpi情况下,1dp=1.5px。其他类推。

公式四: 1dp=(屏幕ppi/ 160)px

以WVGA屏为例,该屏幕为480px*800px,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,对应于hdpi屏幕,所以该屏幕1dp=1.5px

五、dp和sp

dp和sp都是安卓的开发单位,dp是长度单位,sp是字体单位。sp与dp类似,但是可以根据用户的字体大小首选项进行缩放。Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),

公式五:当文字尺寸是“正常”时1sp=1dp,而当文字尺寸是“大”或“超大”时,1sp>1dp。

一般情况下可认为sp=dp。

总结:由于做设计时以xhdpi为模板,xhdpi条件下,1dp=2px。若新建画布时,将画布分辨率设为144ppi,则1pt=2px=1dp。此时,即可将pt等同于dp。标注长度的时候,将长度像素除以2即为dp值。

结语

在photoshop cc中切图时,可直接在.png 图片图层名称前加上200%获得2倍大小的图,其他比例的切图以此类推。输出的两倍图不模糊的前提是,该图是photoshop中用形状工具画出来的未被栅格化的图形,而不是已被栅格化的图层或外部导入的图片。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Android 设备上,像素(Pixel)是指显示屏上的最小颜色点,而 dpsppx 则用于描述在不同分辨率的设备上,一个视觉元素的尺寸和位置。 - dp(density-independent pixels):密度无关像素。是一种基于屏幕密度的抽象单位,它可以让布局在不同的设备上有相同的显示效果。1dp 对应的像素数取决于设备的屏幕密度。通常,在设计 UI 时应使用 dp 单位。 - sp(scale-independent pixels):与 dp 类似,但用于描述文字大小。与 dp 不同的是,用户可以在系统设置调整字体大小,因此 sp 的值会随着用户在系统设置的调整而发生变化。 - px(pixels):像素。是屏幕上的最小显示单位,1px 对应一个实际的像素点。在设计 UI 时,应该尽量避免使用 px,因为在不同分辨率的设备上会导致 UI 显示效果不一致。 在布局文件,可以使用 dpsp 单位来设置视觉元素的尺寸和位置,例如: ``` <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="16sp" android:padding="8dp" android:text="Hello, world!" /> ``` 在代码,可以使用以下方法将 dpsp 转换为 px: ``` // 将 dp 转换为 px int px = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_DIP, 16, getResources().getDisplayMetrics()); // 将 sp 转换为 px int px = (int) TypedValue.applyDimension( TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

金戈鐡馬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值