swift之自动布局，系统自带的布局、SnapKit布局

=============SnapKit使用

自动布局核心公式

view.attr1 = view2.attr2 * multiplier + constant

自动布局构造函数

NSLayoutConstraint(item: 视图,

                   attribute: 约束属性,

                   relatedBy: 约束关系,

                   toItem: 参照视图,

                   attribute: 参照属性,

                   multiplier: 乘积,

                   constant: 约束数值)

如果指定宽高的约束, 参数值图设置为nil, 参照属性选择.notAnAttribute

SnapKit的使用方法

通过 snp.makeConstraints 方法给view添加约束，约束有几种，分别是边距，宽，高，左上右下距离，基准线。同时，添加过约束后可以有修正，修正有位移修正（inset、offset）和倍率修正（multipliedBy）

语法一般是： make.equalTo 或 make.greaterThanOrEqualTo 或 make.lessThanOrEqualTo + 倍数和位移修正。

    

    .equalTo：等于

    .lessThanOrEqualTo：小于等于

    .greaterThanOrEqualTo：大于等于

注意： 使用 snp.makeConstraints 方法的元素必须事先添加到父元素的中，例如：self.view.addSubview(view)

5，约束条件参数支持如下三种类型：

（1）视图属性（ViewAttribute）

视图属性（ViewAttribute）    布局属性（NSLayoutAttribute）

view.snp.left    NSLayoutAttribute.Left

view.snp.right    NSLayoutAttribute.Right

view.snp.top    NSLayoutAttribute.Top

view.snp.bottom    NSLayoutAttribute.Bottom

view.snp.leading    NSLayoutAttribute.Leading

view.snp.trailing    NSLayoutAttribute.Trailing

view.snp.width    NSLayoutAttribute.Width

view.snp.height    NSLayoutAttribute.Height

view.snp.centerX    NSLayoutAttribute.CenterX

view.snp.centerY    NSLayoutAttribute.CenterY

view.snp.baseline    NSLayoutAttribute.Baseline

import SnapKit

imageV.snp.makeConstraints { (make) in

            make.top.equalTo(self).offset(10)//如果这样简写make.top.equalTo(10)，就是默认相对于自己的父view,也可以写成这样make.top.equalToSuperview().offset(10)

            

            make.left.equalTo(self).offset(0)

           

 make.width.height.equalTo(50)

            

        }

        

        lab.snp.makeConstraints { (make) in

            

make.edges.equalTo(self)// edges(边缘）

           

 make.size.greaterThanOrEqualTo(imageV)//size(尺寸）,当前视图宽高 >= imageV

           

 make.center.equalTo(self)//center(中心）,当前视图与self的中新相同

        

make.edges.equalTo(self).inset(UIEdgeInsetsMake(10, 15, 20, 25))//内位移修正：inset,它距离父视图上、左、下、右边距分别是10、15、20、25

            

 make.size.equalTo(imageV).offset(-50)//外位移修正：offset ,与imageV相比（size）视图宽度、高度均减50

           

make.size.equalTo(self).multipliedBy(0.5)  //倍率修正：multipliedBy ,视图的尺寸设置self视图的一半大小。

             

 make.top.equalTo(self.snp.top)//当前视图与self的顶部齐平

        

 make.left.greaterThanOrEqualTo(imageV)//这个其实等价于：make.left.greaterThanOrEqualTo(imageV.snp.left)

            

    make.centerX.lessThanOrEqualTo(self.snp.left)//使当前视图对象的中心x坐标小于等于视图self的左边的x坐标

        }

======================系统自动布局的使用

/* 约束的设置,控件内部约束由自己添加，比如宽高，如果是与其他的

           控件约束那么有父控件添加

        

        ＊创建约束 NSLayoutConstraint  参数 说明：

        * item 自己

        * attribute

        * relatedBy 大于等于 小于等于 等于

        * toItem 另外一个控件

        * attribute 另一个控件的熟悉

        * multiplier 乘以多少

        * constant : 加上多少

        * NSLayoutConstraint : 某个控件的属性值 等于 另外一个控件的属性值 

                       乘以多少 加上多少

        

        * 添加约束 addConstraint

        */

 //注意事项1:设置translatesAutoresizingMaskIntoConstraints为NO;

    view0.translatesAutoresizingMaskIntoConstraints =NO;

    //注意事项2:两个view在同一个hierarchy中才有可能添加相关约束。

  // 注意事项 3: 当 firstAttribute 不为宽或者高时， multipler 不能为 0 。

 //注意事项4:同上，当firstAttribute不为宽或者高时，secondItem不能为nil。

//当两个Attribute全是宽或高时multiplier才可以为0；（错误提示：

A multiplier of 0 or a nil second item together with a location for the first attribute creates an illegal constraint of a location equal to a constant. Location attributes must be specified in pairs'

乘数(0)或零第二项与位置的第一个属性创建一个非法约束位置等于一个常数。

）

 //当secondItem为nil时，secondAttribute应为NSLayoutAttribute.notAnAttribute

使用：

 imageV.isUserInteractionEnabled=true

        imageV.translatesAutoresizingMaskIntoConstraints=false// 关闭autoresizing 不关闭否则程序崩溃

        //设置imageV的左边约束

        let left:NSLayoutConstraint=NSLayoutConstraint(item: imageV, attribute: NSLayoutAttribute.left, relatedBy:NSLayoutRelation.equal, toItem:self, attribute: NSLayoutAttribute.left, multiplier:1, constant:10)

        

        imageV.superview?.addConstraint(left)//自身的约束要添加到父控件上

        

     let top:NSLayoutConstraint=NSLayoutConstraint(item: imageV, attribute: NSLayoutAttribute.top, relatedBy:NSLayoutRelation.equal, toItem:self, attribute: NSLayoutAttribute.top, multiplier:1, constant:10)

      

        imageV.superview?.addConstraint(top)//自身的约束要添加到父控件上

        

        let wid:NSLayoutConstraint=NSLayoutConstraint(item: imageV, attribute: NSLayoutAttribute.width, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier:1, constant:50)

        

        imageV.addConstraint(wid)//宽度的约束可以添加到自己身上

        

        let heig:NSLayoutConstraint=NSLayoutConstraint(item: imageV, attribute: NSLayoutAttribute.height, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier:1, constant:50)

        imageV.addConstraint(heig)//高度的约束可以添加到自己的身上

===========VFL布局

自动布局类函数

NSLayoutConstraint.constraints(

    withVisualFormat: VLF公式

    options: [],

    metrics: 约束数值字典[Strong : 数值],

    views: 视图字典[String : 子视图])

VLF 可视化格式语言

H : 水平方向

V : 垂直方向

| 边界

[] 包含空间的名称字符串, 对应关系在views字典中定义

() 定义空间的宽/高, 可以再metrics中指定, 具体是宽还是高, 看布局方向

示例代码

// metrics: 定义 VFL 中 () 指定的参数映射关系

// views: 定义VFL 中的控件名称和实际名称的映射关系

let viewDic = ["maskIconView" : maskIconView,

               "registerButton" : registerButton

    ] as [String : Any]

let metrics = ["spacing" : -35]

// 设置约束: 左边界 - 零间距 - 视图maskIconView - 零间距 - 右边界

addConstraints(NSLayoutConstraint.constraints(

    withVisualFormat: "H:|-0-[maskIconView]-0-|",

    options: [],

    metrics: nil,

    views: viewDic))

// 设置约束: 上边界 - 零间距 - 视图maskIconView(高100) - (间距-35) - 视图registerButton - 右边界

addConstraints(NSLayoutConstraint.constraints(

    withVisualFormat: "V:|-0-[maskIconView(100)]-(spacing)-[registerButton]-|",

    options: [],

    metrics: metrics,

    views: viewDic))