interfaceBuilder 自动布局的约束

假设在xib中放入一个textview,那我们需要让它在屏幕上完全显示。

设置textview的绝对位置,在iPhone4上一点对应2个像素，而在iphone6或者是在iphone6s上对应的将是3个像素，如是进行横竖屏切换，显然iphone4的像素显然就不合适了

textview.png

如何对控件添加约束

其实苹果默认识对每一个控件进行自动的auto layout ，trait variations 的，只是这种默认的视图大小是600*600的尺寸，显然这个大小也是不合适的

系统默认的布局.png

使用约束布局一个界面

*注意点一：为textvie w添加约束后，就不可以在设置控件的frame。以后的动画也需要根据约束进行操作。

*注意点二：每一条约束就相当于一个等式

设置控件的约束.png

改变约束的高度

设置约束的高度.png

在view上放置一个label,为 label添加约束，右键label拖向view控件，松手。

注意点：蓝色的指示线代表正常的约束，橘黄色的约束代表的是约束被破坏了。

破坏的约束视图.png

解决办法：

解决png

此时，label于view之间约束的关系为：

label于vie w约束的关系.png

修改label的center的位置

修改label的位置约束.png

为vie w添加一个约束，为but ton添加约束

注意点：添加同级约束，label和button之间约束时，仍然是从lab e l右键拖至label，松手
注意点2:修改同级约束的值，仍然是相同的做法，而此时，我们要的是label按照label进行对齐。因此，first iterm应该是button，seconditerm应该是label

为控制器视图添加一个tabelview，设置约束

注意点：此时的ta be view 设置的top bottom属性都是根据它最近的控件进行的设置。left right属性是相对于父视图进行的设置

ta be view注意点视图.png

自动布局的方法就这样了，接下来就是如何利用约束创建动画

让autolayout正常工作，我们不可以直接的操作视图的frame属性，只可以利用约束创建autolayout动画

首先做一个点击button按钮，让view的高度变化，再次点击button，高度返回原来的值。
创建一个NSLayoutConstraint属性并关联导航的高度约束
@IBOutlet var menuHeightConstraint : NSLayoutConstraint!

关联高度.png

@IBAction func actionToggleMenu(_ sender: Any) { isMenuOpen = !isMenuOpen menuHeightConstraint.constant = isMenuOpen ? 200.0 : 60.0 titleLabel.text = isMenuOpen ? "select iterm" : "packing list" }
注意点：我们修改了约束后，视图的布局并不会立即进行刷新，重绘。只是进行一次标记，会在之后的时间点进行重绘。这个时间点就是在调用layoutifneed方法之后。
核心代码：
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.4, options: .curveEaseInOut, animations: { () -> Void in self.view.layoutIfNeeded()// }, completion: nil) }

接下来就是让button按钮旋转一个角度：
let angle = self.isMenuOpen ? CGFloat(M_PI_4) : 0.0 self.buttonMenu.transform = CGAffineTransform(rotationAngle: angle)

查看一个控件所有的约束
for con in (titleLabel.superview?.constraints)! { print("->\(con.description)") }
点击button的时候让title label可以向左移动100个点,首先应该从constraints属性中找出这个label，改变它在x轴上的约束
for constraint in titleLabel.superview!.constraints { if constraint.firstItem as? NSObject == titleLabel && constraint.firstAttribute == .centerY { // constraint.constant = isMenuOpen ? 10 : 0.0 } }

那么怎样通过约束修改创建动画呢，可以为每个约束分配一个标示，可以更好地对约束进行管理

约束标示.png

if constraint.identifier == "TitleCenterY" { constraint.isActive = false; //移除之前的约束，需要添加一个新的约束 let newConstraint = NSLayoutConstraint(item: titleLabel, attribute: .centerY, relatedBy: .equal, toItem: titleLabel.superview, attribute: .centerY, multiplier: isMenuOpen ? 0.67 : 1.0, constant: 5.0) newConstraint.identifier = "TitleCenterY" newConstraint.isActive = true continue }
运行效果：

运行效果.gif

下载地址