探讨,如何使用一套效果图适配IOS & Android 全系列

现在手机分辨率越来越多,光是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 像素

dpi-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 布局

 

未标题-1

了解完了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 的方式布局就是这样的。

未标题-1

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

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

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

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

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

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

返回顶部