iOS原生自动布局

自动布局核心公式：

view1.attr1 = view2.attr2 * multiplier + constant

方式一：自动布局构造函数

NSLayoutConstraint(item:视图, 
                    attribute:约束属性,
                    relatedBy: 约束关系,
                    toItem:参照视图,
                    attribute:参照属性,
                    multiplier:乘积,
                    constant:约束数值)

如果指定宽 、 高约束

- 参照视图设置为nil

- 参照属性选择 .notAnAttrubute

代码示例：

addConstraint(NSLayoutConstraint(item: iconView,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerX,
                                         multiplier: 1.0,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: iconView,
                                         attribute: .centerY,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerY,
                                         multiplier: 1.0,
                                         constant: -60))

方式二：自动布局类函数

NSLayoutConstraint.constraintsWithVisualFormat(VFL公式,
                options:[],
                metrics:约束数值字典[String:数值],
                views:视图字典[String:子视图])

VFL可视化格式语言

• H ：水平方形
• V ：垂直方向
• | ：边界
• [] ： 包含控件的名称字符串，对应关系在views 字典中定义
• ()：定义控件的宽/高，可以再metrics中指定

提示：VFL语言通常用于连续参照关系，如果遇到居中对齐，通常直接使用参照关系

代码示例：

// 添加自动布局
       contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[biv]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["biv" : TYImageView]))
       contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[biv]-0-|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: ["biv" : TYImageView]))

自动布局在项目中的应用：

  //3.自动布局
        let margin:CGFloat = 20.0
        //1、
        addConstraint(NSLayoutConstraint(item: iconView,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerX,
                                         multiplier: 1.0,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: iconView,
                                         attribute: .centerY,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerY,
                                         multiplier: 1.0,
                                         constant: -60))
        //2、
        addConstraint(NSLayoutConstraint(item: houseIconView,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: iconView,
                                         attribute: .centerX,
                                         multiplier: 1.0,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: houseIconView,
                                         attribute: .centerY,
                                         relatedBy: .equal,
                                         toItem: iconView,
                                         attribute: .centerY,
                                         multiplier: 1.0,
                                         constant: 0))
        //3、
        addConstraint(NSLayoutConstraint(item: tipLabel,
                                         attribute: .centerX,
                                         relatedBy: .equal,
                                         toItem: self,
                                         attribute: .centerX,
                                         multiplier: 1.0,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: tipLabel,
                                         attribute: .top,
                                         relatedBy: .equal,
                                         toItem: iconView,
                                         attribute: .bottom,
                                         multiplier: 1.0,
                                         constant: margin))
        addConstraint(NSLayoutConstraint(item: tipLabel,
                                         attribute: .width,
                                         relatedBy: .equal,
                                         toItem: nil,
                                         attribute: .notAnAttribute,
                                         multiplier: 1.0,
                                         constant: 236))
        
        //4、
        addConstraint(NSLayoutConstraint(item: registerBtn,
                                         attribute: .left,
                                         relatedBy: .equal,
                                         toItem: tipLabel,
                                         attribute: .left, multiplier: 1.0,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: registerBtn,
                                         attribute: .top,
                                         relatedBy: .equal,
                                         toItem: tipLabel,
                                         attribute: .bottom,
                                         multiplier: 1.0,
                                         constant: margin))

        addConstraint(NSLayoutConstraint(item: registerBtn,
                                         attribute: .width,
                                         relatedBy: .equal,
                                         toItem: nil,
                                         attribute: .notAnAttribute,
                                         multiplier: 1.0,
                                         constant: 100))
        //5、
        addConstraint(NSLayoutConstraint(item: loginBtn,
                                         attribute: .right,
                                         relatedBy: .equal,
                                         toItem: tipLabel,
                                         attribute: .right, multiplier: 1.0,
                                         constant: 0))
        addConstraint(NSLayoutConstraint(item: loginBtn,
                                         attribute: .top,
                                         relatedBy: .equal,
                                         toItem: tipLabel,
                                         attribute: .bottom,
                                         multiplier: 1.0,
                                         constant: margin))
        
        addConstraint(NSLayoutConstraint(item: loginBtn,
                                         attribute: .width,
                                         relatedBy: .equal,
                                         toItem: registerBtn,
                                         attribute: .width,
                                         multiplier: 1.0,
                                         constant: 0))

        
        //6、
        //views:定义 VFL 中的控件名称和实际名称映射关系
        //metrics:定义 VFL 中 （）指定的常熟映射关系
        let viewDict = ["maskIconView":maskIconView,
                        "registerBtn":registerBtn] as [String : Any]
        let metrics = ["spacing":-20]
        addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "H:|-0-[maskIconView]-0-|",
            options: [],
            metrics: nil,
            views: viewDict))
        addConstraints(NSLayoutConstraint.constraints(
            withVisualFormat: "V:|-0-[maskIconView]-(spacing)-[registerBtn]",
            options: [],
            metrics: metrics,
            views: viewDict))

转载于:https://my.oschina.net/u/3552209/blog/997523