iOS开发之代码约束

iOS开发app有时候我们为了方便，直接使用IB来构建我们的UI，毕竟图形界面操作还是挺方便的，直接拖拽控件到controller，然后添加约束，方便快捷。然而很多时候我们并不使用IB，而是用代码生成一些控件，甚至是controller，这时候就不能通过IB来约束控件了，而是使用代码来约束控件的位置关系。这里讲一讲如何使用constraint来约束控件。

不管是iOS，还是OSX，系统默认的约束都是autoresizing，所以在使用constraint之前我们首先要关闭autoresizing，即translatesAutoresizingMaskIntoConstraints要设置为false，看代码：

////  ViewController.swift//  ConstrainsTest////  Created by 凌       陈 on 6/21/17.//  Copyright © 2017 凌       陈. All rights reserved.//import UIKitclass ViewController: UIViewController {    let SCREEN_WIDTH = UIScreen.main.bounds.width    let SCREEN_HEIGHT = UIScreen.main.bounds.height        override func viewDidLoad() {        super.viewDidLoad()        // Do any additional setup after loading the view, typically from a nib.                print("屏幕分辨率宽度：\(SCREEN_WIDTH)")        print("屏幕分辨率高度：\(SCREEN_HEIGHT))")                let blueView = UIView();        blueView.backgroundColor = UIColor.blue        self.view.addSubview(blueView)                //系统默认会给autoresizing 约束        // 关闭autoresizing 不关闭否则程序崩溃        blueView.translatesAutoresizingMaskIntoConstraints=false                        //宽度约束        var width:NSLayoutConstraint = NSLayoutConstraint(item: blueView, attribute: NSLayoutAttribute.width, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:150)                blueView.addConstraint(width)//自己添加约束                //高度约束        var height:NSLayoutConstraint = NSLayoutConstraint(item: blueView, attribute: NSLayoutAttribute.height, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:150)        blueView.addConstraint(height)//自己添加约束                //右边约束        var left:NSLayoutConstraint = NSLayoutConstraint(item: blueView, attribute: NSLayoutAttribute.left, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.left, multiplier:1.0, constant: 20)        blueView.superview!.addConstraint(left)//父控件添加约束                //下边约束        var bottom:NSLayoutConstraint = NSLayoutConstraint(item: blueView, attribute: NSLayoutAttribute.bottom, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.bottom, multiplier:1.0, constant: -20)        blueView.superview!.addConstraint(bottom)//父控件添加约束                        let yellowView = UIView()        yellowView.backgroundColor = UIColor.yellow        self.view.addSubview(yellowView)                yellowView.translatesAutoresizingMaskIntoConstraints = false                //宽度约束        width = NSLayoutConstraint(item: yellowView, attribute: NSLayoutAttribute.width, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:100)                yellowView.addConstraint(width)//自己添加约束                //高度约束        height = NSLayoutConstraint(item: yellowView, attribute: NSLayoutAttribute.height, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:100)        yellowView.addConstraint(height)//自己添加约束                //右边约束        left = NSLayoutConstraint(item: yellowView, attribute: NSLayoutAttribute.left, relatedBy:NSLayoutRelation.equal, toItem:blueView, attribute:NSLayoutAttribute.right, multiplier:1.0, constant: 20)        yellowView.superview!.addConstraint(left)//父控件添加约束                //下边约束        bottom = NSLayoutConstraint(item: yellowView, attribute: NSLayoutAttribute.bottom, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.bottom, multiplier:1.0, constant: -20)        yellowView.superview!.addConstraint(bottom)//父控件添加约束                        let labelOne = UILabel()        labelOne.backgroundColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1)        labelOne.text = "这是blue view"        labelOne.font = UIFont.systemFont(ofSize: 13.0)        self.view.addSubview(labelOne)                labelOne.translatesAutoresizingMaskIntoConstraints = false                width = NSLayoutConstraint(item: labelOne, attribute: NSLayoutAttribute.width, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:150)        labelOne.addConstraint(width)//自己添加约束                //高度约束        height = NSLayoutConstraint(item: labelOne, attribute: NSLayoutAttribute.height, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:30)        labelOne.addConstraint(height)//自己添加约束                //右边约束        left = NSLayoutConstraint(item: labelOne, attribute: NSLayoutAttribute.left, relatedBy:NSLayoutRelation.equal, toItem:self.view, attribute:NSLayoutAttribute.left, multiplier:1.0, constant: 20)        self.view.addConstraint(left)//父控件添加约束                //下边约束        bottom = NSLayoutConstraint(item: labelOne, attribute: NSLayoutAttribute.bottom, relatedBy:NSLayoutRelation.equal, toItem:blueView, attribute:NSLayoutAttribute.top, multiplier:1.0, constant: -10)        self.view.addConstraint(bottom)//父控件添加约束                        let labelTwo = UILabel()        labelTwo.backgroundColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1)        labelTwo.text = "这是yellow view"        labelTwo.font = UIFont.systemFont(ofSize: 13.0)        self.view.addSubview(labelTwo)                labelTwo.translatesAutoresizingMaskIntoConstraints = false                width = NSLayoutConstraint(item: labelTwo, attribute: NSLayoutAttribute.width, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:100)        labelTwo.addConstraint(width)//自己添加约束                //高度约束        height = NSLayoutConstraint(item: labelTwo, attribute: NSLayoutAttribute.height, relatedBy:NSLayoutRelation.equal, toItem:nil, attribute:NSLayoutAttribute.notAnAttribute, multiplier:0.0, constant:30)        labelTwo.addConstraint(height)//自己添加约束                //右边约束        left = NSLayoutConstraint(item: labelTwo, attribute: NSLayoutAttribute.left, relatedBy:NSLayoutRelation.equal, toItem:blueView, attribute:NSLayoutAttribute.right, multiplier:1.0, constant: 20)        self.view.addConstraint(left)//父控件添加约束                //下边约束        bottom = NSLayoutConstraint(item: labelTwo, attribute: NSLayoutAttribute.bottom, relatedBy:NSLayoutRelation.equal, toItem:yellowView, attribute:NSLayoutAttribute.top, multiplier:1.0, constant: -10)        self.view.addConstraint(bottom)//父控件添加约束    }    override func didReceiveMemoryWarning() {        super.didReceiveMemoryWarning()        // Dispose of any resources that can be recreated.                    }}

运行结果：

竖屏：

横屏：

使用constraint需要提供自身的约束（控件的宽度、高度）和与其他控件的位置关系（比如屏幕的边，其他控件的上下左右），这里blue view的宽和高都设置为150，与屏幕左边的距离设置为20，与屏幕下边距离设置为20。yellow view的宽和高都设置为100，与blue view的距离设置为20，与屏幕下边的距离设置为20。labelOne宽设置为150，高设置为30，与blue view的距离设置为10，与屏幕左边的距离设置为20。labelTwo宽设置为100，高设置30，与yellow view的距离设置为10，与blue view的距离设置为20。出来的效果就像运行图像那样。使用constraint若是没有提供足够的constraint或者是提供的constraint不对，程序都会报错！这些都比较基础，以后会慢慢加深。