OC和Swift纯代码进行Autolayout布局

OC中纯代码进行Autolayout布局

   /*

     利用 NSLayoutConstraint 类创建具体的约束对象；

     添加约束对象到相应的 view 上，代码有这两种：

     1)- (void)addConstraint:(NSLayoutConstraint *)constraint;

     2)- (void)addConstraints:(NSArray *)constraints;

     */

 

//   创建一个红色的View
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    //禁止将AutoresizingMask转化为Constraints
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
//    添加约束
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
    [self.view addConstraint:widthConstraint];//添加一个约束
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100];
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];
//    添加多个约束
    [self.view addConstraints:@[heightConstraint,topConstraint,leftConstraint]];

/*

 上面的NSLayoutConstraint的类方法是:

 +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

 总共有7个参数：

 view1：要约束的控件(redView)

 attr1:约束的类型，就是要做什么样的约束

 relation：与参照控件之间的关系,比如大于、等于。。。

 view2:参照的控件

 attr2:约束的类型，常量

 multiplier: 乘数，就是多少倍

 c:常量，做好了上面的约束后会加上这个常量

 因此，上面的topConstraint代表着要约束的控件redView的上边距等于参照控件self.view的左边距的1.0倍加上100

 添加约束的规则是

     在创建约束了之后，需要将其添加到作用的控件上才能生效，注意在添加约束的时候目标控件需要遵循以下规则（这里控件就用 view 简单表示吧）：

  （1）对于两个同层级 view 之间的约束关系，添加到它们的父 view 上

  （2）对于两个不同层级 view 之间的约束关系，添加到他们最近的共同父 view 上

  （3）对于有层次关系的两个 view 之间的约束关系，添加到层次较高的父 view 上

  （4）对于比如长宽之类的，只作用在该 view 自己身上的话，添加到该 view 自己上

 使用代码实现Autolayout的要注意：

 （1）要先禁止 autoresizing 功能，防止 AutoresizingMask 转换成 Constraints，避免造成冲突，需要设置 view 的translatesAutoresizingMaskIntoConstraints属性为 NO；

 （2）添加约束之前，一定要保证相关控件都已经在各自的父控件上；

 （3）不用再给 view 设置 frame；

 看到Apple自带的Autolayout的实现总感觉很不好，这里推荐使用Masonry,里面用到了block，代码很优雅，

 比如上面的约束的代码可以写成：

 [redView mas_makeConstraints:^(MASConstraintMaker *make) {

 // 在这个 block 里面，利用 make 对象创建约束

     make.size.mas_equalTo(CGSizeMake(150, 150));

     make.top.equalTo(self.view).offset(100);

     make.left.equalTo(self.view).offset(100);

 }];

 是不是很优雅、简洁

 这里不做详解，要了解请自行Google。

 */

Swift中进行Autolayout布局

    let redView = UIView()
//        禁止将AutoresizingMask转化为Constraints
        redView.translatesAutoresizingMaskIntoConstraints = false
        redView.backgroundColor = UIColor.red
        view.addSubview(redView)
//        创建约束
        let widthConstraint = NSLayoutConstraint(item: redView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 150)
        let heightConstraint = NSLayoutConstraint(item: redView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 150)
        let topConstraint = NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 100)
        let letConstraint = NSLayoutConstraint(item: redView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1.0, constant: 100)
       //添加多个约束
view.addConstraints([widthConstraint,heightConstraint,letConstraint,topConstraint])

/* 可以看出和OC基本一致 */

        

        

/* 为了代码方便，Apple团队为开发者提供了另外一种创建约束对象的方法--VFL语言创建约束对象。VFL，全称Visual Format Language，可以理解为格式化约束语言，其使用象形的方式将复杂的约束关系转化为NSLayoutConstraint约束对象。

 */

//    要创建一个视图，将其上、左、右边距都设置60个单元，高度设置为200个单位。

        let cyanView = UIView()
        cyanView.backgroundColor = UIColor.cyan
        cyanView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(cyanView)
        let stringH = "H:|-60-[cyanView]-60-|"
        let  stringV = "V:|-60-[cyanView(200)]|"
        let constraintArrayH = NSLayoutConstraint.constraints(withVisualFormat: stringH, options: NSLayoutFormatOptions(), metrics: nil, views: ["cyanView":cyanView])
        let constraintArrayV = NSLayoutConstraint.constraints(withVisualFormat: stringV, options: NSLayoutFormatOptions(), metrics: nil, views: ["cyanView":cyanView])
        view.addConstraints(constraintArrayH)
        view.addConstraints(constraintArrayV)

/*

 卧槽，看起来是不是很懵逼啊，其实也很好理解

         NSLayoutConstraint提供了constraints()方法来将VFL字符串翻译成约束对象。这个方法中的withVisualFormat参数为VFL字符串，views参数是要设置为VFL字符串中使用到的视图控件的名称与对应的视图控件的映射。在VFL语言中，H代表水平方向的约束，V代表竖直方向的约束，|符号表示父视图的边沿，-60-表示相距20个单位的距离，[]内是要摆放的视图控件名称，()内为约束值。总的来说，尽管VFL语句进行约束对象的创建可以减少一部分工作负担，但是其代码风格却与Swift显得格格不入，并且如果需要对约束进行修改更新，就不太适用了。这里推荐三方的SnapKit框架，其实SnapKit就是Masonry的Swift版本。

         比如上面的cyanView的约束就可以写成

         cyanView.snp.makeConstraints{(make) in

             make.left.equalTo(100)

             make.top.equalTo(100)

             make.width.equalTo(150)

             make.height.equalTo(150)

         }

         另外，SnapKit也支持链式编程,上面可简化为：

         cyanView.snp.makeConstraints{(make) in

             make.left.top.equalTo(100)

             make.width.height.equalTo(150)

         }

         关于更新和移除的约束操作，在SnapKit中也很简单，调用：

         cyanView.snp.makeConstraints{(make) in

             将要更新的约束代码重新编写

         }

         //移除所有约束

         cyanView.snp.removeConstraints()

         

*/