关于IOS的Autolayout特性的理解以及使用

前段时间时间总是在纠结这个ios的Autolayout的布局问题。总感觉Apple这样做很麻烦，感觉Autolayout的代码写起来很别扭。半个眼都不想去看那些代码，又臭又长。其实不然，当现在Apple发布的各个产品上市之后，设备的屏幕分辨率也有了很大的变化，iPhone4/4S是3.5寸，iPhone5是4.0寸，ipad2/new
ipad/ipad4是9.7寸的，ipad mini是7.0的，分辨率也各不相同。

要是当我们需要开发一款产品要同时在这些设备上完美运行的时候，如果不用Autolayout，光靠一个View根本就是行不通的，当然，你也可以为一个ViewController做出几个不同的尺寸的View来，但是这样会大大的影响到开发的速度；鄙人以前就那么干过。一个Controller控制2个View分别适配3.5寸和4寸的屏幕。
但是如果用的Autolayout之后，根本就不用那么麻烦。更大化的加快了开发效率。
好了，下来闲话少说，上点实际的东西。
一般运用Autolayout的方法可以直接在IB里面用，用法大概如下：
（1）首先点击当前View，勾选Use
Autolayout选项，表示已经启用了AutoLayout



（2）选择某一个Control然后在属性窗口选择如下：



（3）点击齿轮形状的按钮选择Select
and Edit



Relation选项分别表示大于/等于/小于
Constant表示当前控件相对于SuperView的x/y的相对距离
Priority表示优先级；
关于优先级，Apple官方代码是这么说的：



也可以两个控件进行相对定位，以确保控件在各个尺寸的屏幕下面还保持原有的距离值；

上面说的都是用IB直接操作，下面说下关于代码如何操作
- (void)viewDidLoad
{
UIButton *btn1=[UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn1 setTitle:@"Click Me" forState:UIControlStateNormal];
[btn1 setTranslatesAutoresizingMaskIntoConstraints:NO];
//标记是否自动布局
[self.view addSubview:btn1];

UIButton *btn2=[UIButton buttonWithType:UIButtonTypeRoundedRect];
[btn2 setTitle:@"Click Me Please" forState:UIControlStateNormal];
[btn2 setTranslatesAutoresizingMaskIntoConstraints:NO];
//标记是否自动布局
[self.view addSubview:btn2];

NSDictionary *views=NSDictionaryOfVariableBindings(btn1,btn2);
[self.view addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-(==50)-[btn1(100)]"
options:0
metrics:nil
views:views]];
[self.view addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(==50)-[btn1(30)]"
options:0
metrics:nil
views:views]];
//H=Horizontal，水平方向，同时设定控件宽度
[self.view addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:@"H:[btn2(==150)]"
options:0
metrics:nil
views:views]];
//V=Vertical,垂直方向，同时设定控件高度
[self.view addConstraints:
[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-(>=200)-[btn2(==btn1)]" options:0
metrics:nil
views:views] ];
//注意AddConstraints和AddConstraint之间的区别，一个添加的参数是(NSArray *)，一个是(NSLayoutConstraint *)
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:btn2
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:btn1
attribute:NSLayoutAttributeRight
multiplier:1
constant:10]];
[self.view addConstraint:
[NSLayoutConstraint constraintWithItem:btn2
attribute:NSLayoutAttributeTop
//要设定的属性
relatedBy:NSLayoutRelationGreaterThanOrEqual
//大于还是小于相对的View的值
toItem:btn1
//相对于某个View或者控件
attribute:NSLayoutAttributeTop
//指定要设定的关联View的属性
multiplier:1 //因子值
constant:0]];
[super viewDidLoad];
}

上面代码中constraintsWithVisualFormat:参数为NSString型，指定Contsraint的属性，是垂直方向的限定还是水平方向的限定，参数定义一般如下：
V:|-(>=XXX) :表示垂直方向上相对于SuperView大于、等于、小于某个距离
若是要定义水平方向，则将V：改成H：即可
在接着后面-[]中括号里面对当前的View/控件 的高度/宽度进行设定；
options：字典类型的值；这里的值一般在系统定义的一个enum里面选取
metrics：nil；一般为nil ，参数类型为NSDictionary，从外部传入//衡量标准
views：就是上面所加入到NSDictionary中的绑定的View
在这里要注意的是AddConstraints 和 AddConstraint之间的区别，一个添加的参数是NSArray，一个是NSLayoutConstraint
下面看看Apple官方对这几个Constraint的说明：
／＊Create constraints explicitly(明确的). Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant"
If your equation（等式） does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
*/
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

/* Create an array of constraints using an ASCII art-like visual format string. */

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views; +

使用方式

这里只介绍Storyboard/Xib使用方式，如果想了解code实现，还要继续阅读其他资料。

设计及实现方法：

理清view想要摆放的位置逻辑（设计），根据这个逻辑来设置Constraints（实现）。比如这个Button要距离那个Button固定20个点的距离，并且两个Button要顶端对齐等。把这些逻辑条件变成constraints，当constraints完备到可以确定view的位置时，就完成了设计和实现。

在Storyboard/Xib上使用

Autolayout的checkbox默认是check上的，这个配置是对整个Storyboard或整个Xib生效的

可以设置Constraints的地方

1 Editor菜单下的Pin以上的4个菜单



2 在View层次列表中选中Constraints后，在Attributes Inspector中设置





3 最方面快捷的方式是在悬浮在界面编辑右下角的几个图标



蓝色的辅助线：表明Constraints已经足以说明这个view的位置了



橙色的辅助线：表示constraints没有完备到可以说明这个view的位置



橙色的辅助线上的数字：有时是正数，有时是负数。当你设定或更改了Constraints的时候，可能Constraints与界面上你放置的view的位置是不同的。系统会以Constraints为准，界面上提示你橙色辅助线，线上的数字是这个view的位置与Constraints的差距。这时可以在“Resolve Auto Layout Issues”中选择update frame，这样这个view会自动移动到Constraints所指示的地方；也可以update constraints，这时view的位置不变，constraints变为与界面上的view位置一致的数值

对没有提供Constraints的view，系统会自动加上constraints，这些constraints是界面上不可见的。这一点是Xcode5与Xcode4在Autolayout技术升级上最大的改进！Xcode4是系统强加constraints，往往会对开发者进行了干扰，因为强加的Constraints往往不是你想要的。Xcode5的这个改进方便了开发者按照自己的意图去设计和实施：首先不用去修改系统强加的constraints；其次有些view的位置你不需要增加Constraints，就可以不用理会。注：这种自动给View加Constraints的方式只适用于你一个Constraints都没加的情况，如果你加了x方向的，y方向的也需要手动添加。

preview：preview可真方便，你一边在左侧（Portrait、4寸屏）设计实施，一边在preview中看到lanscape的样子或者在3.5寸屏中的样子



可设置的constraints的类别：

几个View之间对齐

边缘对齐、中心对齐等

这几个view宽、高相等等

相对距离。

距离最近的一个view的距离

两个view之间的距离

距离顶端、底端、左边缘、右边缘的距离

自己的宽、高

有些特殊的场景，使用Storyboard/Xib的autolayout是无法实现，需要代码方式的autolayout来实现。代码实现主要围绕着对NSLayoutConstraint对象的操作。