① iOS、android 开发单位换算及 UI 切图要求
在移动端 UI 设计中,经常会用到的单位有 4 种:px、pt、dp 和 sp,很多人分辨不清这几种单位及其换算关系,以及 iOS 和 Android 的切图要求,我在这里做下简单的介绍,希望大家读完后能有所收获(如有错误,欢迎纠正)。
px 即 pixel,像素点,电子屏幕上组成图像的最基本单位,在描述屏幕分辨率时也会使用该单位。1px 表示一个像素,例如 iPhone 8 的尺寸为 750px × 1334px,表示在该手机屏幕上,水平方向每行有宴握 750 个像素点,垂直方向每列有 1334 个像素点。
pt 即 point,有两个含义:一是印刷行业常用单位,是一个标准长度单位,绝对大小,1pt = 1/72 英寸 = 0.35mm;二是 iOS 开发用的基本单位,当设计师以 1 倍尺寸进行设计 (375pt × 667pt) 并给出标注稿时,开发人员无需除以 2 便可直接使用。
dp 是安卓开发用的基准单位,在 dpi (屏幕像素密度,即每英寸包含的像素点) 为 160 的屏幕为上,1dp = 1px。为了简单起见,Android 把屏幕密度分为了 5 种:mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi,下文会详细介绍其换算关系。
在安卓系统里,sp 与 dp 类似,不同的是 sp 可以根据用户的字体大小首选项进行缩放,晌告庆友老而 dp 则不会。 尽量使用 dp 作为空间大小单位,sp 作为文字相关大小单位,例如:新闻类和短信类等大篇幅文本,推荐使用 sp 为单位。
在 iOS 开发中,不同机型的 iPhone 设备需要用到不同倍率的切图,下表格为各 iPhone 机型显示屏参数对比:
这里再简单了解下两个概念,ppi 和 dpi。
ppi (iOS):即 pixel per inch,屏幕像素密度,表示每英寸所包含的像素点,该值越高,屏幕越细腻。
dpi (iOS) :开发像素密度,表示每英寸所包含的开发像素点。
在 iOS 开发中,规定以 ppi = 163,dpi = 163 作为开发基准,
当 ppi = 163,dpi = 163 时,则 1pt = 1px;
当 ppi = 326,dpi = 163 时,则 1pt = 2px;
当 ppi = 401,dpi = 154 时,则 1pt = 2.6px ≈ 3px。
(为什么 iPhone 8+/7+/6+ 的开发基准是154?可能要问问苹果了...)
依此类推,得出换算公式一:
若有小数,四舍五入即可。
在 iOS 开发中,目前只需要 @2x 和 @3x 两种切图,所以导出 2 倍和 3 倍的 png 图片即可。导出前注意检查切图是否存在半像素、毛边等情况,保证对齐像素,这样才能有效避免上线后页面上的 icon 出现虚边的问题,提高细节质量。
另外补充一点:从整体开发尺寸看,iPhone 8 是 375 × 667 pt (@2x),而 iPhone X 是 375 × 812 pt (@3x),同样的宽度,一个用 @2x 图,一个用 @3x 图,iPhone X 表现出了更高的清晰度,如图 2-1 所示。
在 Android 开发中,因为机型参差不齐,需要用屏幕密度来区分设计。
注意,这里的 dpi (Android) 和上文的 dpi (iOS) 是不同的概念,dpi (iOS) 是开发像素密度,而 dpi (Android) 即 dot per inch,表示屏幕像素密度 ,类似 iOS 开发里的 ppi。
Android 中,规定以 dpi = 160 为开发基准,
当 dpi = 160,基准dpi = 160,1dp = 1px;
当 dpi = 240,基准dpi = 160,1dp = 1.5px;
当 dpi = 320,基准dpi = 160,1dp = 2px。
依此类推,得出换算公式二:
在设计图标时,对于 5 种主流的屏幕像素密度 (mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi) 应按照 2:3:4:6:8 的比例进行缩放,如图 3-1 所示。
例如,一个启动图标的尺寸为 48 × 48 dp,这表示在 mdpi 的屏幕上其实际尺寸应为 48 × 48 px;在 hdpi 的屏幕上其实际大小是 mdpi 的 1.5 倍 (72 × 72 px);在 xhdpi 的屏幕上其实际大小是 mdpi 的 2 倍 (96 × 96 px),依此类推。
在某些况行下,还需要提供一种特殊的切图: 点九图 (上图所示)。点九图是 Android 开发中用到的一种特殊格式的图片,文件名以 “.9.png” 结尾。
这种图片能告诉程序,图像哪一部分可以被拉升,哪一部分不能被拉升需要保持原有比列。运用点九图可以保证图片在不模糊变形的前提下做到自适应,比如对话框背景图片就会用到点九图。
--
以上是全部内容,感谢你的阅读!
End
② Android UI里1px等于多少dp
dp、sp和px的区别:现在这里介绍一下dp和sp。dp也就是dip。这个和sp基本类似。如果设置表示长度、高度等属性时可以使用dp
或sp。但如果设置字体,需要使用sp。dp是与密度无关,sp除了与密度无关外,还与scale无关。如果屏幕密度为160,这时dp和sp和px是一
样的。1dp=1sp=1px,但如果使用px作单位,如果屏幕大小不变(假设还是3.2寸),而屏幕密度变成了320。那么原来TextView的宽度
设成160px,在密度为320的3.2寸屏幕里看要比在密度为160的3.2寸屏幕上看短了一半。但如果设置成160dp或160sp的话。系统会自动
将width属性值设置成320px的。也就是160 * 320 / 160。其中320 /
160可称为密度比例因子。也就是说,如果使用dp和sp,系统会根据屏幕密度的变化自动进行转换。
下面看一下其他单位的含义
px:表示屏幕实际的象素。例如,320*480的屏幕在横向有320个象素,在纵向有480个象素。
in:
表示英寸,是屏幕的物理尺寸。每英寸等于2.54厘米。例如,形容手机屏幕大小,经常说,3.2(英)寸、3.5(英)寸、4(英)寸就是指这个单位。这
些尺寸是屏幕的对角线长度。如果手机的屏幕是3.2英寸,表示手机的屏幕(可视区域)对角线长度是3.2*2.54 =
8.128厘米。读者可以去量一量自己的手机屏幕,看和实际的尺寸是否一致。
mm:表示毫米,是屏幕的物理尺寸。
pt:表示一个点,是屏幕的物理尺寸。大小为1英寸的1/72。
原帖地址http://www.ophonesdn.com/forum/thread-1946-2-1.html
px(Pixels ,像素):对应屏幕上的实际像素点。例如,320*480的屏幕在横向有320个象素,在纵向有480个象素。
in(Inches
,英寸):屏幕物理长度单位。每英寸等于2.54厘米。例如,形容手机屏幕大小,经常说,3.2(英)寸、3.5(英)寸、4(英)寸就是指这个单位。这
些尺寸是屏幕的对角线长度。如果手机的屏幕是3.2英寸,表示手机的屏幕(可视区域)对角线长度是3.2*2.54 =
8.128厘米。读者可以去量一量自己的手机屏幕,看和实际的尺寸是否一致。
mm(Millimeters ,毫米):屏幕物理长度单位。
pt(Points ,磅):屏幕物理长度单位, 表示一个点,是屏幕的物理尺寸。大小为1英寸的1/72。
dp(与密度无关的像素):逻辑长度单位,在 160 dpi 屏幕上,1dp=1px=1/160英寸。随着密度变化,对应的像素数量也变化,但并没有直接的变化比例。
dip:与dp相同,多用于Google示例中。
sp(与密度和字体缩放度无关的像素):与dp类似,但是可以根据用户的字体大小首选项进行缩放。
尽量使用dp作为空间大小单位,sp作为和文字相关大小单位
③ Android 关于"尺寸"的那些事(dp,dip,sp,pt,px...)
屏幕大小:屏幕大小是手机对角线的物理尺寸,以英寸inch为单位。比如我的Mix 2手机屏幕大小为5.99 inches,意味着我的屏幕对角线长度为5.99inches = 5.99 * 2.54 = 15.2146cm
分辨率:屏幕的像素点数,一般表示为a*b。例如某手机分辨率为21601080,意味着手机屏幕的竖直方向(长)有2160个像素点,水平方向(宽)有1080个像素点。
px :Pixels ,像素;对应屏幕上的实际像素,是画面中最小的点(单位色块),像素大小没有固定长度值,不同设备上1个单位像素色块大小不同。
这么说可能有点陌生,用屏幕分辨率来说,今年流行起来的“全面屏”分辨率是 2160*1080,但是你也可以发现,虽然很多全面屏手机分辨率一样,但是明显看得出来屏幕大小不一样,这也解释了“不同设备像素色块大小是不同的”。
pt :1pt=1/72 inch,用于印刷业,非常简单易用;
dpi :Dots Per Inch,每英寸点数;详见ppi
ppi :Pixels Per Inch,每英寸像素数;数值越大显示越细腻。计算式:ppi = 屏幕对角线像素数 / 屏幕对角线长度。
还是举全面屏的例子,分辨率2160*1080,屏幕大小是5.9inches,勾股定理可以得到对角线像素数大约是2415,那么ppi = 2415 / 5.99 = 403.
事实上dpi 和 ppi 一定程度上可以划等号,都表示像素密度,计算方式完全一致,只不过使用场景不一样。dpi中的dots点属于打印或印刷等领域,例如drawable 文件对应的就是dpi,而ppi中的pixel属于屏幕显示等领域
dp/dip : Density-independent Pixels,密度无关像素 - 基于屏幕物理密度的抽象单位。1dp等于 160 dpi 屏幕上的dpx,这是 系统为“中”密度屏幕假设的基线密度。在运行时,系统 根据使用中屏幕的实际密度按需要以透明方式处理 dp 单位的任何缩放 。dp 单位转换为屏幕像素很简单:px = dp * (dpi / 160)。 例如,在 240 dpi 屏幕上,1 dp 等于 1.5 物理像素。在定义应用的 UI 时应始终使用 dp 单位 ,以确保在不同密度的屏幕上正常显示 UI。
如果看完文章还是觉得很懵,那么可以直接记住: 1dp单位在设备屏幕上总是等于1/160 inch。
sp :Scale-independent Pixels ,与 dp 单位相似,也会根据用户的字体大小偏好进行缩放。
首先我们放上源码中对尺寸单位的转换
可以看到,输入值类型为dp时,返回 value * DisplayMetrics.density,到这里我们可能会发懵:嗯?不对啊,前面我们不是通过px 和 dp 的换算公式来计算的么,怎么这里就简简单单乘了一个DisplayMetrics.density?不要慌,我们先看看源码中对DisplayMetrics.density的介绍。
源码注释中说到“在160dpi的屏幕下,density的值为1,而在120dpi的屏幕下,density的值为0.75”,我们可以大胆的猜测一下,120dpi下的density=0.75的原因是120dpi * 1 /160dpi=0.75。实际上,也就是这么回事。我们下面会仔细的分析。
需要补充一下,通常意义上Android 屏幕的密度,指的是像素密度dpi/ppi,对应于源码中的DisplayMetrics.densityDpi。
为什么引入dp?
Android 引入了dp这一单位,使得不论多大屏幕,多大dpi,显示的效果始终保持一致。
但是根据前面我们提到的px与dp的换算公式px = dp * (dpi / 160),很显然,由于相同分辨率但不同屏幕大小的设备dpi是不同的,导致px和dp的基本不存在一个固定的换算关系,为了方便屏幕适配,Android设置了6个通用的密度,换算px与dp时采取通用密度计算,而非设备实际的密度。
以下为6种通用密度,以及其最小的分辨率
得到上面通用密度之后,我们换算dp与px多了一种简便方式。前面我们提到Android将mdpi作为基准,此时1px = 1dp,又有px = dp * (dpi / 160),所以我们可以很容易的得到以下换算:
还记不记得前面源码中的density属性,实际上DisplayMetrics.density = dpi / 160 ,表示的就是在某个通用密度下dp与px的换算比(1dp/1px的值)
这部分其实和程序员自身已经关系不大了,毕竟参与工作之后这些都是UI人员的活儿了。不过鉴于现在我还只是一枚在校生,还是记下来以免自己遗漏吧。
建议在xhdpi中作图
原因嘛,首先现在主流分辨率是1080p,以及最近流行起来的全面屏18:9,而xhdpi对应720p,向低dpi兼容自然没问题,即便在xxhdpi中显示,也会有个不错的效果。而如果以1920*1080作图,显然图片素材占用的内存很大,而且也会增大应用安装包的大小。
只有一个原则:资源放入对应dpi的文件夹中,Android会机智的加载合适的资源。
以drawable资源为例:
我们平时开发小项目&对UI要求不高时,只使用一套xhdpi的资源就足够了,虽然这可能会导致在hdpi及以下的手机中有些卡顿,因为xhdpi的图片运行在hdpi及以下的手机上会比较吃内存,不过无伤大雅。
而如果不为图片资源犯愁时(有UI人员的支持,就是任性),就可以添加所有dpi的资源。当然,重点还是要满足ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12的规律。
好像说了不少废话,哈哈,大概就这么多吧。
④ px、dp、sp、dpi之间的区别和转换
px、dp、sp、dpi之间的区别和转换
区别:
px (pixels)像素 -- 是像素,就是屏幕上实际的像素点单位。(一般UI人员在ps中经常使用)
dp/dip 设备独立像素,android layout经常使用的尺寸单位,与设备屏幕有关,dp是虚拟像素,在不同的像素密度的设备上会自动适配。即与像素密度无关。
sp 放大像素,主要是处理字体的大小
dpi:Android支持四种不同的dpi模式:ldpi mdpi hdpi xhdpi
hdpi里面存放高分辨率的图片,如WVGA (480x800),FWVGA (480x854)
mdpi里面存放中等分辨率的图片,如HVGA (320x480)
ldpi里面存放低分辨率的图片,如QVGA (240x320)
转换:
a.首先了解常见的分辨率Resolution:
分辨率:指手机屏幕垂直和水平方向上的像素个数。比如分辨率是480*320,则指设备垂直方向有480个像素点,水平方向有320个像素点。
VGA 显示绘图矩阵 640×480
HVGA half 480×320
QVGA quarter 320x240
b.dpi像素密度,指每英寸中的像素数,该值对应于DisplayMetrics类中属性densityDpi的值
(例子:设备分辨率为320*240,屏幕长2英寸宽1.5英寸 dpi=320/2=240/1.5=160)
c.density屏幕密度,指每平方英寸中的像素数,在DisplayMetrics类中属性density的值为dpi/160(用这个进行dp sp之间的转化)
如图:
d.px 和 dp 互转换
计算公式:实际像素数px=1dp*像素密度(dpi)/160 =dp*density
在320x480分辨率,像素密度dpi为160,1dp=1px
在480x800分辨率,像素密度dpi为240,1dp=1.5px
/**
* 根据手机的分辨率从 dp 的单位 转成为 px(像素)
*/
public static int dip2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
/**
* 根据手机的分辨率从 px(像素) 的单位 转成为 dp
*/
public static int px2dip(Context context, float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}