切图那些事儿

本文来自网易云社区

作者：孙有军

关于各种各样的概念

1：单位

px （pixel）：像素，屏幕上的点，最小的独立显示单位，px均为整数，没有小数。

in：表示英寸，每英寸相当于2.54厘米 

screen size（屏幕尺寸）：屏幕的物理尺寸，表示的是对角线长，如手机屏幕3.5寸，就表示对角线长度为3.5寸，大概8.89厘米。

dpi（dots per inch）：每英寸像素点数，比如120dpi，160dpi，如果一个手机屏幕分辨率为320*480像素，物理尺寸为 宽2in，高3in，则横向:320/2=160dpi，纵向：480/3 = 160dpi ，横向与纵向相等，原因是大部分手机屏幕使用正方形像素点（http://msdn.microsoft.com/zh-cn/library/cc294571.aspx）。

density ：屏幕密度， 换算公式为density=dpi/160。

dp=dip ： 设备独立像素， android特有的单位，在  dpi=160的手机屏幕上，屏幕密度为1，则1dp =1px。同理，屏幕密度为2，则1dp = 2px， 

sp：字体的推荐单位，与dp很类似。

ppi（pixels per inch）：图像分辨率的单位，ppi值越高，画面细节越丰富。

其他还有Aspect Ratio（ 宽高比率），Resolution（分辨率）。

样例：

Q: 屏幕分辨率480 * 800 , 屏幕尺寸3.7in，它的dpi是多少，在布局中宽设置320dp，该宽度为多少像素？

A：理论计算值：先计算出对角线的像素点数= 933，再计算出每英寸的像素点数 933/3.7 = 252dpi

最终计算出的dpi为252。

计算320dp对应的像素值：首先计算出屏幕密度，屏幕密度值则相当于1dp对应的像素值:

320 * （252/160） = 504px, (手机屏幕才480px，算出的宽度居然比屏幕还宽，如果成立，则说明如果在上诉屏幕上设置为320dp，则有一部分处于屏幕外)；

NOTE: 手机上面计算出的DPI为理论值,实际上只有120(low)、160(medium)、240(high)、320(xhigh)等这几种, 

因此实际的计算公式为：

320 * （240 /160）=480px，与屏幕宽度相同，说明在上诉屏幕设置为320dp，刚好占据整个屏幕。

2：屏幕分类

按尺寸： 小屏幕（2寸左右），普通屏幕（3~4），大屏幕（5寸及以上）

按屏幕密度：ldpi，mdpi，hdpi，xdpi，xxdpi。

http://www.36kr.com/p/214826.html  android碎片化报告，现在安卓支持18679设备

3：图标尺寸

以下是官方建议图标尺寸：

Icon Type	Standard Asset Sizes (in Pixels), for Generalized Screen Densities
	Low density screen (ldpi)	Medium density screen (mdpi)	High density screen (hdpi)
Launcher	36 x 36 px	48 x 48 px	72 x 72 px
Menu	36 x 36 px	48 x 48 px	72 x 72 px
Status Bar	24 x 24 px	32 x 32 px	48 x 48 px
Tab	24 x 24 px	32 x 32 px	48 x 48 px
Dialog	24 x 24 px	32 x 32 px	48 x 48 px
List View	24 x 24 px	32 x 32 px	48 x 48 px

4：.9图标

标注位置：相邻两边进行标注，不能只标注一遍，也不能只标注相对的两边，如果只标注两边，则拉伸区域为相交部分，文本区域为右边与下边控制，如果不标注则沾满整个宽度，

其次是可以分段标注

 

4：自动生成各种尺寸的图标
http://romannurik.github.io/AndroidAssetStudio/

5:切图中注意事项

a：hdpi ，xhdpi等中的相同图片大小要成比例，这样才能在相同屏幕不同分辨率下展现一致。

b：同一类型，图片大小要一致，可能多人做多个模块，导致切除的同一类型图片相差1，2个像素（可以建立一个资源库，反查已有图标尺寸）。

c：相同图片问题，不同人做不同模块，很多图标都是相同的，由于开发不同，会导致一个包中有相同图片，这样会导致包大小增长。

d：能使用纯色的图片，就让开发尽量使用颜色值，不用切图。

e：jpg与png图片相比较，jpg大小会小很多，如果有大图且没有模糊渐变等要求，尽量采用jpg格式。

f：很多简单图片都能用代码实现，比如圆，矩形等，可以让开发用代码实现，减少包的大小。

g：如果包的大小太大时，尽量保证更高尺寸的图片存在，这样低屏幕密度的手机也能展现很清晰的图片，但是如果只有小图，就会放大拉伸，会导致图片变形或者不清晰。

h：.9注意标注拉伸区域与内容区域，与图片外边距的padding，可以在图上直接标注。（如果内容区域上下距离不相等，再填充多行文字时会造成文字不居中，这时可以直接在图片上空出padding）

i：.9图片只能拉伸不能压缩，压缩会导致图片变形，因此在作图过程中要确定一下图片的最小尺寸，（比如，给出一个确定高度的矩形区域，里面放置一个初始高度大于矩形的.9图片，会导致图片压缩）。

j：.9图片一般只做小尺寸就可以，除非边框有渐变等元素，才做多个尺寸。

k：关于图片标注，美术要转换一下单位，px转换到相应的dp上，开发可以直接使用该数值。

l：关于字体，字体大小sp，但是如果字体呈现在一个固定高度的矩形框中时，再能调整字体大小的手机上时，可能会展示不全（展现字体的外部图片，背景等尽量不要写死高度）。

m：标注图片时，如果一个icon占满整个宽度，则可以不用标注icon宽度尺寸，只需要标注距离边框的尺寸，开发会采用自适应，如果确定宽度，在有的屏幕上只能占据一半宽度，

6：单位换算

视觉出分辨率为480 *800的图，屏幕尺寸大概为4寸左右，则改屏幕对应为240dpi （hdpi），屏幕密度为：1.5，则对应到dp上时：

dp = px / 1.5 

hdpi 与 xhdpi 图标转换公式：

xhdpi对应为 320dpi，hdpi对应为 240dpi，比例为： 320 / 240 = 1.33333.。。。。。

则hdpi图标对应的xhpi图标尺寸为长宽放大1.33333倍，取整数

hdpi 对应长宽为  x ，y 

xhdpi x1 = x * 1.3333   y1 = y * 1.33333

NOTE：以后做更大尺寸的图，也可以按照上面的公式换算而来。