iOS开发适配的简单思考。

相对布局

因为iOS设备多样性越来越多,因此在布局中要尽量要相对布局,保证适配性。

一个控件要在手机上显示,包括两方面的信息

  • 控件大小
  • 控件位置

控件位置

控件位置一般都不能给绝对的位置,需要给到相对位置,那么如何给到相对位置呢?

iPhone 6P 相对位置示例1

参考上图,因为在iOS开发中(0,0)坐标是在屏幕的左上角,因此这个位置是绝对的。当我们要确定一个控件的位置时,可以依赖这个锚点,利用好iOS设备屏幕的上下左右边缘进行标注,如上图所示。

以上是相对于屏幕的相对位置,其实相对于其他元素的相对位置也是一样的,一旦我们如上确定了一个元素,那这个元素的位置就固定了,接下来,我们就可以将这个元素作为锚点来决定我们另外的元素的位置。 iPhone 6P 相对位置示例2

所以,在我们进行布局的时候,一定要有非常良好的层次感,在iOS中叫View Hierarchy,找准相对的位置,这样才能更好的进行布局。

控件大小

那么在不同的尺寸的屏幕上,究竟应该如何决定控件的大小呢?其实在定义控件位置的期间,很多控件的大小也已经定下来了,需要真正考虑控件大小的时候其实挺少的。因此每次在决定控件大小的时候,一定需要仔细的考虑这样做是否是必须的。

标注值

上面说的是布局的基本原则,那么在开发的时候应该怎么去保证在不同的iOS设备上都有良好的体验呢?

  • iOS设备尺寸
Device iPhone 4 iPhone 5 iPhone 6 iPhone 6+
px 640x960 640x1136 750x1334 1080x1920
point 320x480 320x568 375x667 414x736

可以发现不一样的机型屏幕的比例是不一样的,要想保证视觉体验的良好,我们可以选择等比例显示,这意味标注值需要随着屏幕尺寸的变化而变化,注意,我们这里讨论的都是point

这里假设我们的设计稿是以iPhone6为基准设计的,那如下的宏定义可以用于适配不同的机型。

    #define WidthRatio SCREEN_WIDTH/375
    #define HeightRatio SCREEN_HEIGHT/667
    #define AdaptWidth(width) width*WidthRatio
    #define AdaptHeight(height) height*HeightRatio

对所有的标注值,比如与屏幕边缘的距离、控件的高度等,都需要进行等比例的变化,以下图片展示了等比例变换之后的效果。下图是使用了该宏和不使用该宏的效果,请大家自行品鉴,红色是使用了适配,灰色是没有使用适配,大家可以重点看看整体的布局。 标注值适配和没适配的效果比较

另外有一个比较通用的标准可以考虑,视觉设计师在标注的时候,希望哪些地方保持不变就标注哪些地方。

视觉给3x 2x的问题

那咱们就这个约定了,6为准标注,5和6标注是一样的,4会缩小0.8, 6会放大1.1