ios-AutoLayout(自动布局代码控制)简单总结

关于手码编写autolayout约束 

storyboard界面里面的托拉拽固然方便但是不能批量操作（董铂然原创），假如有类似的30个小控件，storyboard就太麻烦了，手码的话一个循环就完事了 

手码创建就是所谓的那七个参数的长的像句子似得方法 

之后再在相应的节点下添加约束，有添加一个和添加一组 两种方法。 

// 高度约束（添加到yellowView身上）
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:50];
    [yellowView addConstraint:heightConstraint];

    // 间距约束（添加到self.view身上）
    CGFloat margin = 20;
    [self.view addConstraints:@[
                                // 左边
                                [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margin],

                                // 右边
                                [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant: - margin],

                                // 底部
                                [NSLayoutConstraint constraintWithItem:yellowView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0 constant: - margin]
                                ]];
}

这里用到了一个核心公式，任何两个控件间的约束都可以通过这个公式算出 

obj1.property1 =（obj2.property2 * multiplier）+ constant value

multiplier和constant 就是向量系数和偏移量

还有为了避免和系统生成的自动伸缩的约束不冲突 一般加上这句

系统默认这个属性是yes

  

  

关于VFL语言  

Visual Format Language，翻译过来是“可视化格式语言”  是苹果公司为了简化Autolayout的编码而推出的抽象语言 

相当于打出象形文字似得，而且要全在字符串里写，遇到错误比较难调，但是相对来说代码精简了不少。 

然后在添加约束的时候就会用到系统提供的另外一种方法。 

 NSArray *contraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:kNilOptions metrics:metrics views:views];

VFL的详细语法 可以在官方文档中 搜 “Visual Format” 就能搜到  

上面的方法中传到的两个参数metrics 和 views 是两个字典。（董铂然原创） 第一个字典metrics是用来告诉系统里面的每一个值对应哪个字母  

第二个字典views是 用来告诉里面的每一个控件对应字符串里的什么 

如果整个VFL语言里的所有控件你都是用原名写在里面的，那可以用宏代替 

括号里可以传多个值逗号隔开 

  

关于常用的手码约束的第三方框架 

有 Masonry 和 UIView+Autolayout 

框架地址是： 

https://github.com/Masonry/Masonry  

https://github.com/smileyborg/UIView-AutoLayout 

  

UIView+Autolayout框架 

这个相对于masonry，是个轻量级的框架易于上手，里面一共也就两个文件。也非常好用，都是用auto开头。适用于约束不经常改变的项目 

事例用法： 

直接设置四周的间隔距离 

[self.yellowView autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(20, 20, 20, 20)]; //直接设置四周的间隔距离 

设置三个间隔，然后再添加个高度， 

[self.yellowView autoPinEdgesToSuperviewEdgesWithInsets:UIEdgeInsetsMake(20, 20, 20, 20)excludingEdge:ALEdgeTop]; // 让顶部约束无效 [self.yellowView autoSetDimension:ALDimensionHeight toSize:100]; // 自己再添加个高度约束正好四个

也可以直接设置大小 

[self.yellowView autoSetDimensionsToSize:CGSizeMake(200, 200)];

总之还有很多用法，在这不一一介绍了，大概就是这个代码风格。有兴趣的可以去上面说的那个github地址上仔细查看。 

  

  

Masonry框架 

这个框架是重量级的里面好多文件，难于上手，但是用熟练了的话比上面那个牛X，适合于约束要经常改变的项目。 

示例代码： 

添加距离四个方向20的间隔约束 

[yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        // make代表yellowView
        // 添加约束
        make.edges.equalTo(self.view).insets(UIEdgeInsetsMake(20, 20, 20, 20));
    }];

下面这个是更新约束，非常方便会自动识别上左下右的属性来更改。 

[self.yellowView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.view.mas_left).offset(100);
        make.top.equalTo(self.view.mas_top).offset(100);
        make.right.equalTo(self.view.mas_right).offset(-100);
        make.bottom.equalTo(self.view.mas_bottom).offset(-100);
    }];

还有一些别的属性用法。 

主要是作者设置的属性比较多这张图摘自他的github，有兴趣可以去github仔细看 

  

关于想给约束改变添加动画。 

因为约束的改变是瞬时操作和frame的概念不一样，所以把约束的代码放在动画的block里是无效的 

  错！

正确做法是，把约束写在外面面，然后在动画的block中包裹 layoutifneed 

  对！

 如果你不是在董铂然博客园看到本文  请点击查看原文

对了还有一个注意点是：需要依赖父控件的约束要在添加了父控件之后再写。 

其他:

原理：IOS6.0 之后，苹果优化了UI界面的布局方式，提出了自动布局的概念，和之前的autoresizing相比功能更强大。子视图基于父视图的自动布局显示。都是父视图去添加对子视图的约束。

在这里主要说的是通过代码对自动布局视图的实现。

代码中一般用到的有两个添加约束的方式：

1.- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);

2.- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);

<

在使用自动布局之前要对子视图的布局方式进行调整，用到这个UIView的属性。

- (BOOL)translatesAutoresizingMaskIntoConstraints NS_AVAILABLE_IOS(6_0); // Default YES

需要将其设置为NO；

>

下面用简单例子说明一下：

   UIView *v1 = [[UIView alloc] initWithFrame:CGRectZero];
   v1.translatesAutoresizingMaskIntoConstraints = NO;
    v1.backgroundColor = [UIColor redColor];
    [self.view addSubview:v1];

    UIView *v2 = [[UIView alloc] initWithFrame:CGRectZero];
    v2.backgroundColor = [UIColor grayColor];
    v2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:v2];//添加两个允许自动布局的子视图

   

   [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeWidth