header_v1.7.40

2017 Material Design中文完整版:第四章节第二节《布局:单位和尺寸》

323天前发布

翻译文章 / 多领域 / 教程
D27_ 翻译,如需商业用途或转载请与D27_联系,谢谢配合。

【站酷首发】10大章79小节重译!半年心血只为让更多人正确认识、学习MD。由于单篇文章字数限制,全文将分为N篇文章陆续发布。

二、单位和尺寸(Units and measurements)  

有些单位在不同的语境中有着不同的含义。这章讨论的是设备独立像素(dp)、可缩放像素(sp)以及其他像素密度概念。


- 像素密度  

每英寸拥有的像素被称为“像素密度”。高密度屏幕比低密度屏幕每英寸拥有的像素高。因此UI元素(如按钮)在低密度屏幕上显示得更大而在高密度屏幕上显示得更小。


屏幕分辨率是指存在于显示器中的总的像素数量。


像素密度=√(X的平方+Y的平方)/ Z(X:屏幕长度像素;Y:屏幕宽度像素;Z:屏幕尺寸)


相关链接

支持多种屏幕,为了适应不同的屏幕密度进行优化设计

更多资源类型,支持安卓系统的测量单位


 

925859511840a8012193a3226290.jpg高密度屏幕

 

d170595102ffa8012193a327b990.jpg 低密度屏幕


-设备独立像素(dp)  

设备独立像素(也叫做”dips“),它一个是灵活的单位。在开发Android应用时,使用dp能够统一不同像素密度的手机/平板中的UI元素。

e82459510315a8012193a3c168b3.jpg

1dp等于160dpi中的1px:

计算dp的方式:dp =(像素(单位px)* 160)/像素密度(单位dpi)  

例如:界面上有一张120px的的图片,那么它在240dpi的手机上,它的dp值就是(120*160)/240=80  


如果设计稿是使用px,那么在写CSS时需要换算成dp或sp来进行开发。


像素密度 像素 设备独立像素
120 180px
160 240 px 240dp
240 360 px

如果你有三个不同像素密度的屏幕(如上表数据),屏幕大小都是1.5英寸,那他们的设备独立像素依旧是240dp。


-可缩放像素(sp)  

在开发Android时,sp的功能与dp相似,但sp只用于字体。默认sp与dp的值是一样的。可以理解为文字的大小一律用sp单位,非文字的大小一律使用dp单位。


sp和dp之间的主要区别在于sp会保留用户的字体设置。需要辅助功能调节字体大小需求的用户可以按自己偏好设置字体大小。


以dp为单位进行设计  

计算dp的方式:dp=(像素(单位px)* 160)/像素密度(单位dpi)

举个例子:一个 32 x 32 px的icon在一个像素密度为320的屏幕上显示效果为 16 x 16 dp。


图像缩放

通过换算,图像可以缩放到不同分辨率的屏幕上并且看起来效果都一样:


屏幕分辨率 dpi 像素比例 图像尺寸(像素px)
xxxhdpi(超超超高) 640 4.0 400 x 400
xxhdpi(超超高) 480 3.0 300 x 300
xhdpi(超高) 320 2.0 200 x 200
hdpi(高) 240 1.5 150 x 150
mdpi(中) 160 1.0 100 x 100



8

    文章信息

    • 文章标签

    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功