一套效果图适配(Android和IOS)全尺寸和标注规范-（三）（360x640）

现在手机分辨率越来越多，光是ios就有4, 5, 6, 6+，设计上的确很麻烦，出稿到底是设计出，还是程序直接改？看了很多大神的无私分享，简单的总结一些，希望能给大家提供帮助，欢迎大家一起补充，讨论！一起从基础学起。

 

【首先】我们了解一下Android的适配原则， 因为Android开发用到的是 dp 和 sp（字体）

dpi、dip、分辨率、屏幕尺寸、px、density 关系以及换算

一、基本概念：

dip              ：density independent pixels，设备无关像素。
dp               ：就是dip
px               ：像素
dpi              ：dots per inch ，直接来说就是一英寸多少个像素点。常见取值 120,160,240。 一般称作像素密度，简称密度
density      ：直接翻译的话貌似密度。常见取值1.5 , 1.0。和标准dpi的比例（160px/inc）
分辨率       ：横纵2个方向的像素点的数量，常见取值 480×800,320×480
屏幕尺寸   ：屏幕对角线的长度。电脑电视同理。

二、应用：

density ：其实是DPI/(160像素/英寸)后得到的值。

从上面就看得出了，DPI本身的单位也是 像素/英寸，所以density其实是没单位的，他就是一个比例值。

三、各单位间转换：

1、计算dpi

比如一个机器，屏幕4寸，分辨率 480×800，它的dpi能算么。

因为不知道边长，肯定不能分开计算，4是对角线长度，那直接用勾股定理算对角线像素，除以4，算出来大概是 dpi=233 像素/尺寸。

那么density就是 （233px/inch）/ （160px/inch）=1.46 左右

顺带说一下，Android默认的3个 dpi，low，medium 和high，对应 120、160、240，如果没有特别设置，所有的 dpi都会被算成这3个

2、计算 dp 与 px

我们写布局的时候，肯定还是要知道1个dp到底有多少px的。

换算公式如下： dp = （DPI/（160像素/英寸））px = density px

注意，这里都是带单位的。px是单位，dp是单位，density 没单位。

为了方便，假设 dpi 是 240像素/英寸，那么density 就是 1.5

那么就是 dp = 1.5 px，注意这是带了单位的，也就是 设备无关像素 = density 像素

3、为啥 标准 dpi = 160

（1）Android design 里把主流设备的 dpi 归成了四个档次，120dpi、160dpi、240dpi、320dpi

实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来
进行尺寸定义。

也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的 公倍数，XHDPI 下乘以1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel。

但假设以 240dpi 作为标准，那需要 DP 是 3 的公倍数，XHDPI 下乘以 1.333，MDPI 下乘以0.666，LDPI 下除以2

而以 LDPI 和 XHDPI 为基准就更复杂了，所以选择 160 dpi

（2）这个在Google的官方文档中有给出了解释，因为第一款Android设备（HTC的T-Moblie G1）是属于 160dpi的。

 

【其次】我们了解一下 IOS auto layout 布局

 

了解完了IOS和Android的布局和尺寸单位，那我们来考虑一下最基本的效果图 我们应该用多大尺寸？

当然，大家都知道iPhone6的尺寸出效果图，然后开向上适配iPhone plus 向下适配iPhone 5 这种方法肯定是没有问题的，但是要想适配Android就需要调整UI了

所以，我个人的方法是制作 360*640的图……

因为，360-640扩大2倍就是 安卓 720*1280（xhdpi）下的大小，接近于iPhone6的大小

当然，大家都知道如何用一套UI适配iPhone5s之前和Android的全系列。实际上，
iPhone6的基本控件和5s的一样，ppi也一样，就是距离稍微稀疏了一点。

也就是说，如果使用 Auto Layout 的方式布局就是这样的。

也就是说IOS工程师看到的切图实际上并不是iPhone的效果图，但一定要清楚标明元素，控件，确定的位置，因为Auto Layout布局中，有些可变的标注对工程师来说是不需要的。

当然，我们所出的的效果图是用sketch做的，然后基于sketch将效果图（360*640）等比扩大2倍，变成720*1280的图，将标注模式改为dp（xhdpi），然后输出给Android工程师看的dp标注，这样，所标注出来的图单位是dp，字体单位是sp

然后，基于360*340，输出1x 1.5x 2x 3x的切图，分别对应安卓开发的4个文件夹

然后，基于360*640，输出@1 @2 @3的切图，对应IOS的切图

也可以出一套svg或者pdf的矢量图，让苹果自己去弄

最后，避免不了一些不适合的尺寸，需要微调。