swift使用NSLayoutConstraint进行控件布局

摘抄部分概念

---

该函数有如下参数:
第一个参数 view1: 要设置的视图；
第二个参数 attr1: view1要设置的属性，稍后详解；
第三个参数 relation: 视图view1和view2的指定属性之间的关系，稍后详解；
第四个参数 view2: 参照的视图；
第五个参数 attr2: 参照视图view2的属性，稍后详解；
第六个参数 multiplier: 视图view1的指定属性是参照视图view2制定属性的多少倍；
第七个参数: 视图view1的指定属性需要加的浮点数。

Paste_Image.png

代码实例

---

import UIKit
class ViewController: UIViewController {

        override func viewDidLoad() {
        super.viewDidLoad()
        
        /// 添加ImageView
        let myImageView = UIImageView(frame: CGRect(x: 0 ,  y: 0, width: 80, height: 80))
        myImageView.image = UIImage(named: "xxx")
        myImageView.contentMode = UIViewContentMode.scaleAspectFill
        self.view.addSubview(myImageView)     

        myImageView.translatesAutoresizingMaskIntoConstraints = false  //这里必须要设置成false

        //居中对齐(centerX,centerY属性)
        let myImageViewcentx:NSLayoutConstraint = NSLayoutConstraint(item: myImageView, attribute:  NSLayoutAttribute.centerX, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.centerX, multiplier:1.0, constant: 0 )
        myImageView.superview!.addConstraint(myImageViewcentx)//父控件添加约束
               
        let myImageViewcenty:NSLayoutConstraint = NSLayoutConstraint(item: myImageView, attribute: NSLayoutAttribute.centerY, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.centerY, multiplier:1.0, constant:0 )
        myImageView.superview!.addConstraint(myImageViewcenty)//父控件添加约束
        

        //标签示例
        let label1 = UILabel(frame: CGRect(x: 105, y: 93, width: 164, height: 56))
        label1.font = UIFont.boldSystemFont(ofSize: 25)
        label1.textAlignment = NSTextAlignment.center
        label1.textColor = UIColor.white
        //label1.backgroundColor = UIColor.blue
        label1.text = "test"
        self.view.addSubview(label1)

        label1.translatesAutoresizingMaskIntoConstraints = false
        
        //距右边60
        let Label1right:NSLayoutConstraint = NSLayoutConstraint(item: label1, attribute:  NSLayoutAttribute.right, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.right, multiplier:1.0, constant: -60 )
        label1.superview!.addConstraint(Label1right)//父控件添加约束
        
        //距左边60
        let Label1left:NSLayoutConstraint = NSLayoutConstraint(item: label1, attribute: NSLayoutAttribute.left, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.left, multiplier:1.0, constant: 60 ) 
        label1.superview!.addConstraint(Label1left)//父控件添加约束
        
        //距上部73
        let Label1top:NSLayoutConstraint = NSLayoutConstraint(item: label1, attribute: NSLayoutAttribute.top , relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.top, multiplier:1.0, constant: 73)     
        label1.superview!.addConstraint(Label1top)

        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()

    }


}

---

实现一个覆盖圆形图案的正方形按钮:

    @IBOutlet weak var uiButton: UIButton!
    let layer = CAShapeLayer()

    override func viewDidLoad() {
        super.viewDidLoad()

        //在界面中间画一个直径100的圆
        self.layer.fillColor = UIColor.white.cgColor
        layer.strokeEnd = 0.4 //设置透明度
        layer.strokeColor = UIColor.gray.cgColor
        self.layer.path = UIBezierPath(arcCenter: CGPoint(x: UIScreen.main.bounds.width / 2, y: UIScreen.main.bounds.height / 2), radius: 50, startAngle: 0, endAngle: 2.0*CGFloat(M_PI), clockwise: false).cgPath
        self.view.layer.addSublayer(layer)
 
        //设置按钮宽度和高度为100. 
        //宽度约束
        let width:NSLayoutConstraint = NSLayoutConstraint(item: uiButton, attribute: NSLayoutAttribute.width, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:100)
        uiButton.addConstraint(width)//自己添加约束
        
        //高度约束
        let height:NSLayoutConstraint = NSLayoutConstraint(item: uiButton, attribute: NSLayoutAttribute.height, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute: NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:100)
        uiButton.addConstraint(height)//自己添加约束
        
        
      }

实现效果:

Paste_Image.png

---

控件A顶部,距离 控件B底部的距离:

      let outTexttop:NSLayoutConstraint = NSLayoutConstraint(item: A控件, attribute: NSLayoutAttribute.top , relatedBy:NSLayoutRelation.equal, toItem:B控件 , attribute:NSLayoutAttribute.bottom, multiplier:1.0, constant: 50)
        outText.superview!.addConstraint(outTexttop)