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 UIKit

class 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不对，程序都会报错！这些都比较基础，以后会慢慢加深。