type
Post
status
Published
date
Mar 24, 2015
slug
summary
tags
iOS
category
学习思考
icon
password
Autolayout 其实很早便引入了 Cocoa,但是可能在过去苹果的设备屏幕还并没有变得这么多样化,因此我们也就并没有过多的关注 Autolayout 的相关特征,更何况那个时候 Autolayout 还没有那么好用。在2014年的 WWDC 大会上,苹果发布了新的 iPhone6 plus 和至今仍未面市的 apple watch,开发者们大呼『oh shit ,又多了两种屏幕尺寸。。。』,不过好消息是苹果增加了两种尺寸的设备同时,也为开发者带来了更为强大的屏幕适配方式:Size Classes
在过去我们适用屏幕布局往往是通过设置 frame 来进行布局,Autolayout 给我们带来了更为强大的约束布局,我们只需要指定 view 间的约束关系,就可以根据不同尺寸自动生成相应的布局,如今的 Size Classes 又进一步的抽象,把不同尺寸抽象成 Compact,Any,Regular 三中不同的规格,两两组合就有了很多种变换方式,分别对应了不同的设备尺寸和设备方向(横屏/竖屏),下面这幅图很形象的描述了这种对应关系

Size-Classes
关于 Autolayout 在网上已经有很多介绍了,所以就不再细致的讲述Autolayout该怎么用了,以下只说明一下Autolayout使用过程中应该注意的一些问题,还有平时比较常用的一些布局方式如何用Autolayout来实现。
xib编辑页面Autolayout相关选项的功能


UIScrollView 的布局方式
UIScrollView 应该是比较常用的控件了,但是在Autolayout下使用scrollView经常不得其法,其关键在于不明白scrollView自动调整大小的原理。
下面看一个例子

Autolayout_03
scrollview与superview的边距0,contentview和scrollview的边距0,然后在contentview里面放入了一个subview,我们期望subview的布局是相对contentview来布局的,subview的宽度随contentview的宽度变化。但是这个时候xib就报了下面错误:
Has ambiguous scrollable content width
意思是告诉我们scrollview的宽度不明确。
首先要明确一点,scrollView通过计算内部subview的宽高来调整本身的contentSize,那么如果我们的subview设置了相对scrollview的左右边距,而没有设置width。那么问题就出现了,scrollview计算contentsize的时候不知道subview的宽度,没错,这就是我们在使用uiscrollview的时候经常会遇到的错误。例子中scrollview可以通过推断subview的高度和边距来计算contentsize的height,但是width却无法计算。
问题出在scrollview无法知道subview的宽度,但是subview的宽度需要和scrollview的宽度相等。实际上scrollview的宽度是和其superview等宽的,我们的根本需求是让scrollview里面的subview相对于屏幕宽度来布局。也就是说我们需要让contentview和屏幕宽度相等,然后内部的subview相对contentview布局。那么就好办了,我们只需要再加一个约束来指定contentview的宽度就好了,方法如下:

Autolayout_04
首先我们在superview里面加入了一个view,然后设置这个view的边距,然后我们指定contentview和这个view等宽,这样的话contentview的宽度就确定了,既不依赖于scrollview又能够随屏幕的宽度变化。
其实在Autolayout下使用scrollview确实是够蛋疼的,光是配置好scrollview,我们就需要添加10多条约束。。。
横向/纵向等间隙排列的布局方式
我们在布局的时候常会用到横向多个view等宽等距,但是在WWDC没有看到相关的操作,所以就自己摸索了一下。

Autolayout_05
我们先把每一个view设置top和leading属性,最后一个view还要加一个trailing,然后选中所有的view,设置equal width,这样就可以等宽等间距了。然后高度我们可以设置aspect ratio来让高与宽1:1比例,也可以先设置第一个view的高度然后选中所有equal height,或者分别设置。
UITableView cell自适应
该功能仅支持 ios8 ,待完善。。。
推荐一些代码Autolayout的三方库
注意
在xcode6 下新建的 xib 文件默认都是开启 size classes 和 auto layout 的,在这种模式下,如果这时你试图通过代码修改 frame 你会发现不管用,这个问题曾经困扰我很长时间,后来才发现在 Autolayout 模式下是不支持修改 frame 的,也就是说在 Autolayout 下就没有 frame 的概念,一切都是相对的,我们要通过约束来调整布局,不再是通过 frame 来调整布局。所以要使用 Autolayout 你必须要懂得 VFL 是如何书写的,要懂 Constraint 是如何使用的,如果你觉得这两个都非常的蛋疼,还是调整 frame 来的快捷,那你可以在 xib 里面取消 Autolayout 的选项,我们就又可以和 frame 愉快的玩耍了~