iOS中代码使用Autolayout

  随着苹果手机不通尺寸的产品开发出来，ios开发人员对布局也逐渐的重视起来，目前用的最多的就是Autolayout。目前ios8新推出了一种布局，sizeclasses，但是这种布局也是配合autolayout使用，并且ios8目前的用户范围还是比较小的，所以我们还是先来看看autolayou如何在代码中实现约束吧。

 1，如果是从代码层面开始使用Autolayout,需要对使用的View的translatesAutoresizingMaskIntoConstraints的属性设置为NO.
即可开始通过代码添加Constraint,否则View还是会按照以往的autoresizingMask进行计算.

而在Interface Builder中勾选了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints属性都会被默认设置NO.

2，值得注意的是,添加约束之前一定要将子视图优先addSubview到父视图中,否则在添加约束时会产生编译器警告.
而我们在理解的时候,可以通过这种方式来理解.item1.attribute = multiplier ⨉ item2.attribute + constant，比如看下面的代码

1. UIView *newView = [[UIView alloc]init];  
2.     newView.backgroundColor = [UIColor redColor];  
3.       
4.     [self.view addSubview:newView];  
5.       
6. //   self.view.translatesAutoresizingMaskIntoConstraints =NO;  
7.   
8.     newView.translatesAutoresizingMaskIntoConstraints =NO;  
9.   
10.     NSLayoutConstraint *constraint = nil;  
11.   
12.     constraint = [NSLayoutConstraint constraintWithItem:newView  
13.                                               attribute:NSLayoutAttributeLeading  
14.                                               relatedBy:NSLayoutRelationEqual  
15.                                                  toItem:self.view  
16.                                               attribute:NSLayoutAttributeLeading  
17.                                              multiplier:1.0f  
18.                                                constant:20];  
19.     [self.view addConstraint:constraint];  
20.   
21.     constraint = [NSLayoutConstraint constraintWithItem:newView  
22.                                               attribute:NSLayoutAttributeTrailing  
23.                                               relatedBy:NSLayoutRelationEqual  
24.                                                  toItem:self.view  
25.                                               attribute:NSLayoutAttributeTrailing  
26.                                              multiplier:1.0f  
27.                                                constant:-20];  
28.     [self.view addConstraint:constraint];  
29.   
30.     constraint = [NSLayoutConstraint constraintWithItem:newView  
31.                                               attribute:NSLayoutAttributeTop  
32.                                               relatedBy:NSLayoutRelationEqual  
33.                                                  toItem:self.view  
34.                                               attribute:NSLayoutAttributeTop  
35.                                              multiplier:1.0f  
36.                                                constant:80];  
37.     [self.view addConstraint:constraint];  
38.   
39.     constraint = [NSLayoutConstraint constraintWithItem:newView  
40.                                               attribute:NSLayoutAttributeBottom  
41.                                               relatedBy:NSLayoutRelationEqual  
42.                                                  toItem:self.view  
43.                                               attribute:NSLayoutAttributeBottom  
44.                                              multiplier:1.0f  
45.                                                constant:-20];  
46.     [self.view addConstraint:constraint];  

创建了一个单视图，距离各边界的距离依次是：20  20  80  20（左，右，上，下），或许有人会疑问为什么距离右写的是-20，why, 其实原因很简单，因为我们参照的是self.view.trailing  ,而视图newView是加在self.view上，是在self.view.trailing 的左边，所以应该是赋值，以此类推距离底部也是一样

有人会问到底属性都有哪些，下面会给大家列举一下，这里包括ios 8 最新添加的(一下加红的是常用的一些方法)

    NSLayoutAttributeLeft = 1,    对齐对象的左边
    NSLayoutAttributeRight,        对齐对象的右边
    NSLayoutAttributeTop,          距离顶部的距离
    NSLayoutAttributeBottom,    距离底部的距离  
    NSLayoutAttributeLeading,   距离左边的距离
    NSLayoutAttributeTrailing,    距离右边部的距离
    NSLayoutAttributeWidth,      控件的宽度
    NSLayoutAttributeHeight,     控件的高度
    NSLayoutAttributeCenterX,  x 轴中线点的距离
    NSLayoutAttributeCenterY,  y 轴中线点的距离
    NSLayoutAttributeBaseline, 
    NSLayoutAttributeLastBaseline = NSLayoutAttributeBaseline,

    //   在API 8.0  文档中貌似没有详细的说明，但大家一看意思也明白了，就是距离各个边界的设置
    NSLayoutAttributeFirstBaseline NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeftMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeRightMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTopMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeBottomMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeLeadingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeTrailingMargin NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterXWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeCenterYWithinMargins NS_ENUM_AVAILABLE_IOS(8_0),
    NSLayoutAttributeNotAnAttribute = 0

注：NSLayoutAttributeLeft/NSLayoutAttributeRight 和 NSLayoutAttributeLeading/NSLayoutAttributeTrailing的区别是left/right永远是指左右，而leading/trailing在某些从右至左习惯的地区会变成，leading是右边，trailing是左边。

下面的例子直接设定了控件的尺寸：

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];[button setTitle:@"测试按钮" forState:UIControlStateNormal];[button sizeToFit];[button setBackgroundColor:[UIColor yellowColor]];button.translatesAutoresizingMaskIntoConstraints = NO;[self.view addSubview:button];NSLayoutConstraint *constraint;//设置宽度constraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:130.0f];[self.view addConstraint:constraint];//设置高度constraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:70.0f];[self.view addConstraint:constraint];

注意：如果我们使用了Autolayout代码布局，那么我们就不要设置view或者控件的frame。下面我们用约束来创建一个中心在self.view上面，宽高都是100的约束。

代码如下：

UIView *myview= [[UIViewalloc]init];

    myview.backgroundColor=[UIColorgrayColor];

    [self.viewaddSubview:myview];

    myview.translatesAutoresizingMaskIntoConstraints=NO;

    NSLayoutConstraint* constraint=nil;

    

    constraint=[NSLayoutConstraintconstraintWithItem:myview attribute:NSLayoutAttributeCenterXrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeCenterXmultiplier:1constant:0];

    [self.viewaddConstraint:constraint];

    

    constraint=[NSLayoutConstraintconstraintWithItem:myview attribute:NSLayoutAttributeCenterYrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeCenterYmultiplier:1constant:0];

    [self.viewaddConstraint:constraint];

    

    constraint=[NSLayoutConstraintconstraintWithItem:myview attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:nilattribute:NSLayoutAttributeNotAnAttributemultiplier:1.0fconstant:200];

    [self.viewaddConstraint:constraint];

    

    constraint=[NSLayoutConstraintconstraintWithItem:myview attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:nilattribute:NSLayoutAttributeNotAnAttributemultiplier:1.0fconstant:100];

    [self.viewaddConstraint:constraint];

以上就是通过简单的代码实现了自动布局（单一控件），大家会发如果页面上试图多的话，用这种方式显得特别麻烦，的确是的，下面我介绍一下另一种方法

通过可视化语言的方式

先学点基础知识, 

1 调用的方法

1. + (NSArray *)constraintsWithVisualFormat:(NSString *)format  
2.                                  options:(NSLayoutFormatOptions)opts  
3.                                  metrics:(NSDictionary *)metrics  
4.                                    views:(NSDictionary *)views  

介绍一下各个参数的意思

1 format   约束的规格要求  说白了就是条件。

2 opts       主要用来描述属性和用来指导可视化语言中的布局样式。

3 metrics  一个字典实例主要用来显示你在可视化话中用的字符串的参数设置，比如：nextwidth:@12, 必须是一个字典对象。

4 views   所有描述的空间字典集合，也必须以字典的形式展现出来。

下面通过一个实例的方式

IView *two = [UIView new];  

   two.backgroundColor = [UIColor greenColor];  

   [self.view addSubview:two];  

   two.translatesAutoresizingMaskIntoConstraints = NO;  

   NSDictionary *views = NSDictionaryOfVariableBindings(two, self.view);  

     

   NSMutableArray *constraintArray = [NSMutableArray array];  

   [constraintArray addObjectsFromArray:[NSLayoutConstraint   constraintsWithVisualFormat:@"H:|-20-[two]-20-|"  

                                                                                options:0  

                                                                                  metrics:nil  

                                                                                    views:views]];  

   [constraintArray addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-80-[two]-20-|" options:0 metrics:nil views:views]];  

   [self.view addConstraints:constraintArray];  简单的几句话就实现了和上面同样的效果，从而可以充分的看到可视化语言是多么的方便

下面为大家带来介绍一些第三方实现该效果的代码

首推：PureLayout 他是UIView+Layout  的后继者，项目中建议使用PureLayout , 使用起来特方便，至于如何导入请大家参考文档自己完成 

下载地址：https://github.com/smileyborg/PureLayout

直接上代码：

1. UIView *newView = [UIView new];  
2.     newView.backgroundColor = [UIColor blueColor];  
3.     [self.view addSubview:newView];  
4.       
5.     newView.translatesAutoresizingMaskIntoConstraints = NO;  
6.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeLeading) withInset:20];  
7.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeTrailing) withInset:20];  
8.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeTop) withInset:80];  
9.     [newView autoPinEdgeToSuperviewEdge:(ALEdgeBottom) withInset:20];  

下面咱们来点有难度的代码。

1. - (void)viewDidLoad {  
2.     [super viewDidLoad];  
3.     self.view.backgroundColor = [UIColor whiteColor];  
4.     // 1 创建三个视图 红/绿/蓝/黄/橙色视图  
5.       
6.     // 红  
7.     UIView *redView = [self alive];  
8.     redView.backgroundColor = [UIColor redColor];  
9.     [self.view addSubview:redView];  
10.     // 绿  
11.     UIView *greenView = [self alive];  
12.     greenView.backgroundColor = [UIColor greenColor];  
13.     [self.view addSubview:greenView];  
14.     // 蓝  
15.     UIView *blueView = [self alive];  
16.     blueView.backgroundColor = [UIColor blueColor];  
17.     [self.view addSubview:blueView];  
18.     // 黄  
19.     UIView *yellowView = [self alive];  
20.     yellowView.backgroundColor = [UIColor yellowColor];  
21.     [self.view addSubview:yellowView];  
22.     // 橙  
23.     UIView *orangeView = [self alive];  
24.     orangeView.backgroundColor = [UIColor orangeColor];  
25.     [self.view addSubview:orangeView];  
26.       
27.     [self.view addConstraints:[self portraitConstraints:redView :greenView :blueView yellowView:yellowView orangeView:orangeView]];  
28.       
29. }  
30. // 这样写完全是为了代码的方便使用,创建对象的同时初始化控件  
31. - (UIView *)alive  
32. {  
33.     UIView *newView = [UIView new];  
34.     newView.translatesAutoresizingMaskIntoConstraints = NO;  
35.     return newView;  
36. }  
37. - (NSMutableArray *) portraitConstraints:(UIView *)redView :(UIView *)greenView :(UIView *)blueView yellowView:(UIView *)yellowView orangeView:(UIView *)orangeView  
38. {  
39.     NSMutableArray *array = [NSMutableArray array];  
40.     // 注1：红色视图的宽度大于等于10 小于30    黄色视图的宽度大于40 小于120  水平  
41.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView(>=10,<=30)]-20-[greenView(>=40,<=120)]-20-[yellowView]-20-|" options:0 metrics:nil  
42.                                                                              views:NSDictionaryOfVariableBindings(redView, greenView, yellowView)]];  
43.     // 注2：垂直方向 red高度H:100<= <=160  蓝色 H:30<= <=60  橙色待定  
44.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[redView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
45.                                                                          views:NSDictionaryOfVariableBindings(redView, blueView, orangeView)]];  
46.     // 和注2类似  
47.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[greenView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
48.                                                                          views:NSDictionaryOfVariableBindings(greenView, blueView, orangeView)]];  
49.     // 和注2类似   或许有人会问 为什么得添加黄色和绿色，原因很简单，就是为了满足各个约束，避免造成约束不足  
50.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-70-[yellowView(>=100,<=160)]-20-[blueView(>=30,<=60)]-[orangeView]-20-|" options:0 metrics:nil  
51.                                                                          views:NSDictionaryOfVariableBindings(yellowView, blueView, orangeView )]];  
52.       
53.       
54.     // 注3：控制blued的宽度  
55.     [array addObjectsFromArray:[NSLayoutConstraint  
56.                                           constraintsWithVisualFormat:@"H:|-20-[blueView]-120-|" options:0 metrics:nil  
57.                                           views:NSDictionaryOfVariableBindings(blueView)]];  
58.     // 注4：为橙色高度添加约束条件  
59.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[blueView]-20-[orangeView(>=blueView)]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];  
60.       
61.     // 注4：为橙色添加宽度约束条件  
62.     [array addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[orangeView]-20-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(blueView, orangeView)]];  
63.     return array;  
64. }  

转自：http://blog.csdn.net/daiyelang/article/details/43792219