interfaceBuilder 自動(dòng)布局的約束

假設(shè)在xib中放入一個(gè)textview,那我們需要讓它在屏幕上完全顯示魁兼。

設(shè)置textview的絕對(duì)位置,在iPhone4上一點(diǎn)對(duì)應(yīng)2個(gè)像素咐汞，而在iphone6或者是在iphone6s上對(duì)應(yīng)的將是3個(gè)像素化撕，如是進(jìn)行橫豎屏切換侯谁，顯然iphone4的像素顯然就不合適了

textview.png

如何對(duì)控件添加約束

其實(shí)蘋(píng)果默認(rèn)識(shí)對(duì)每一個(gè)控件進(jìn)行自動(dòng)的auto layout 热芹，trait variations 的惨撇，只是這種默認(rèn)的視圖大小是600*600的尺寸伊脓，顯然這個(gè)大小也是不合適的

系統(tǒng)默認(rèn)的布局.png

使用約束布局一個(gè)界面

*注意點(diǎn)一：為textvie w添加約束后，就不可以在設(shè)置控件的frame。以后的動(dòng)畫(huà)也需要根據(jù)約束進(jìn)行操作报腔。

*注意點(diǎn)二：每一條約束就相當(dāng)于一個(gè)等式

設(shè)置控件的約束.png

改變約束的高度

設(shè)置約束的高度.png

在view上放置一個(gè)label,為 label添加約束株搔，右鍵label拖向view控件，松手纯蛾。

注意點(diǎn)：藍(lán)色的指示線代表正常的約束纤房，橘黃色的約束代表的是約束被破壞了。

破壞的約束視圖.png

解決辦法：

解決png

此時(shí)翻诉，label于view之間約束的關(guān)系為：

label于vie w約束的關(guān)系.png

修改label的center的位置

修改label的位置約束.png

為vie w添加一個(gè)約束，為but ton添加約束

注意點(diǎn)：添加同級(jí)約束蛾派，label和button之間約束時(shí)，仍然是從lab e l右鍵拖至label典尾，松手
注意點(diǎn)2:修改同級(jí)約束的值科平，仍然是相同的做法髓考，而此時(shí)妓湘，我們要的是label按照l(shuí)abel進(jìn)行對(duì)齊豌研。因此，first iterm應(yīng)該是button晶衷，seconditerm應(yīng)該是label

為控制器視圖添加一個(gè)tabelview温眉，設(shè)置約束

注意點(diǎn)：此時(shí)的ta be view 設(shè)置的top bottom屬性都是根據(jù)它最近的控件進(jìn)行的設(shè)置露懒。left right屬性是相對(duì)于父視圖進(jìn)行的設(shè)置

ta be view注意點(diǎn)視圖.png

自動(dòng)布局的方法就這樣了坎弯，接下來(lái)就是如何利用約束創(chuàng)建動(dòng)畫(huà)

讓autolayout正常工作撩炊，我們不可以直接的操作視圖的frame屬性，只可以利用約束創(chuàng)建autolayout動(dòng)畫(huà)

首先做一個(gè)點(diǎn)擊button按鈕，讓view的高度變化阅签，再次點(diǎn)擊button，高度返回原來(lái)的值衷戈。
創(chuàng)建一個(gè)NSLayoutConstraint屬性并關(guān)聯(lián)導(dǎo)航的高度約束
@IBOutlet var menuHeightConstraint : NSLayoutConstraint!

關(guān)聯(lián)高度.png

@IBAction func actionToggleMenu(_ sender: Any) { isMenuOpen = !isMenuOpen menuHeightConstraint.constant = isMenuOpen ? 200.0 : 60.0 titleLabel.text = isMenuOpen ? "select iterm" : "packing list" }
注意點(diǎn)：我們修改了約束后，視圖的布局并不會(huì)立即進(jìn)行刷新，重繪。只是進(jìn)行一次標(biāo)記捂寿，會(huì)在之后的時(shí)間點(diǎn)進(jìn)行重繪治笨。這個(gè)時(shí)間點(diǎn)就是在調(diào)用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) }

接下來(lái)就是讓button按鈕旋轉(zhuǎn)一個(gè)角度：
let angle = self.isMenuOpen ? CGFloat(M_PI_4) : 0.0 self.buttonMenu.transform = CGAffineTransform(rotationAngle: angle)

查看一個(gè)控件所有的約束
for con in (titleLabel.superview?.constraints)! { print("->\(con.description)") }
點(diǎn)擊button的時(shí)候讓title label可以向左移動(dòng)100個(gè)點(diǎn),首先應(yīng)該從constraints屬性中找出這個(gè)label流济，改變它在x軸上的約束
for constraint in titleLabel.superview!.constraints { if constraint.firstItem as? NSObject == titleLabel && constraint.firstAttribute == .centerY { // constraint.constant = isMenuOpen ? 10 : 0.0 } }

那么怎樣通過(guò)約束修改創(chuàng)建動(dòng)畫(huà)呢，可以為每個(gè)約束分配一個(gè)標(biāo)示斤彼，可以更好地對(duì)約束進(jìn)行管理

約束標(biāo)示.png

if constraint.identifier == "TitleCenterY" { constraint.isActive = false; //移除之前的約束去团，需要添加一個(gè)新的約束 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 }
運(yùn)行效果：

運(yùn)行效果.gif

下載地址