【UXRen原创】Units and measurements——Material Design专题分享(13)
非凡回来了,今天讲几个概念,主要和UI有关系,理解这些概念的话对适配屏幕和切图很有好处。
- Pixel density
- Density-independent pixels(dp)
- Scalecabel pixels(sp)
- Designing layouts fordp
- Image scaling
Pixel density
像素密度,指一英寸屏幕下的像素数量。
如:160dpi=一英寸屏幕包含160个Pixl.
不同分辨率的屏幕下,相同像素大小的元素,在高分辨率下,显示比较小;在低分辨率屏幕下显示比较大。在几年前我们会发现安卓屏幕分辨率低的手机下载应用,有些应用没有做适配,就会出现只显示局部的现象,无法正常使用,这就是屏幕分辨率不同(像素密度不同)导致的。
下面看两站照片:
一个UI element (such asa Button),appear physically larger on low- density and smaller on hight-density screens.
高分辨率 低分辨率它的计算公式:
- dpi = screen width (or height) in pixel/screen width(or height) in inches
- dpi = 屏幕像素宽度(或高度)/ 屏幕英寸高度(或高度)
Density-independent pixels(dp)
独立像素密度是为了在不同像素密度的屏幕中,能够均匀的显示。是一个过度单位,在开发中并没有这个概念。
这是一个能适应任何屏幕的的单位。在开发安卓应用的时候,非常实用。
如下图,实用像素单位和DP单位的效果演示。
这里有一个表:
如果有三个屏幕,全部1.5英寸宽度,在不同的屏幕分辨率下,屏幕宽度都是240dp.
一个DP就相当于160dpi下的一个像素。这就可以计算出这个单位。
DP=(widthin pixels * 160)/dpi
Scalecabel pixels(sp)
SP是专门用于字体的,一个sp就相当于一个dp.
他们主要的不同在于SP是用于字体设置的,为了让用户设置字体大小的时候仍然能看到适合的显示效果。
Designing layouts for dp
在设计界面的时候使用这个公式:
- DP=(widthin pixels * 160)/dpi
比如一个32 *32 PX 的icon 在320dpi下等于16*16dp.
Image scaling
图像缩放就用这个表就好:
不用再纠结不会切图了,不用再问什么是1.0x 1.5x 这些事什么意思了。不想去理解公式和原理就直接看这个表吧!其实也很容易理解总结一下:
- Pxiel:是指屏幕像素
- PxielDensity:是指像素密度,在英寸屏幕宽度或高度下,有几个像素。
- ScaleabelPixels:是专门针对字体的单位,SP。和DP差不多。
- Density-independent pixels:指独立的像素密度,DP,它和PX的换算是一个DP等于160dpi(像素密度)下的一个像素。

======================================================================================= 不知不觉本网站已经一岁半了, 在这里小编要感谢那么一如既往支持本站的油茶人。 同时也欢迎各位喜欢13太保的同学们把自己收集的好资源一起分享给更多油茶人,如果有意愿在网站发布原创性的文章也欢迎随时和我们联系!我们收到邮件后会认真的查看和回复。 投稿邮箱:contact@13tech.com.cn
=======================================================================================