在iOS中有兩種可以實現(xiàn)的可視化編程的方法赴捞，一種是StoryBoard，俗稱sb，是iOS下可視化編程的方式之一蒜田，另一種是XIB。
使用StoryBoard可以方便快捷的拖拽視圖控制器选泻，控件冲粤，設(shè)置根視圖控制器，并且可以直觀的看到位置大小页眯，效果等梯捕，如果能熟練使用可視化編程可以減少很多的代碼。
XIB是蘋果公司用來開發(fā)界面的可視化編程文件窝撵，可以通過直觀的界面布局傀顾，設(shè)計來完成使用代碼完成的界面布局，設(shè)計功能碌奉。同時短曾，XIB方式也支持將布局后的界面控件元素同步代碼寒砖，以及同步事件函數(shù)，設(shè)計屬性等功能嫉拐。
這兩種的區(qū)別：SB是一個文件管理多個可視化文件哩都，在公司團隊開發(fā)過程中很少會使用它，為了解決團隊合作中的文件沖突問題婉徘，但是iOS 9 更新了新特性Storyboard References 可以解決這個問題漠嵌，隨后我們在后面會講到這個東西。XIB是單獨的可視化文件判哥，團隊開發(fā)可以進行使用献雅，這兩者我們要掌握的內(nèi)容是：SB的創(chuàng)建方式和傳值問題，XIB的創(chuàng)建方式和XIB的類關(guān)聯(lián)塌计。
無論是那種可視化編程挺身，我們都需要掌握的是AutoLayout和SizeClasses。那我們就先從AutoLayout+SizeClasses開始锌仅。
AutoLayout+SizeClasses
AutoLayout：指的是自適應(yīng)布局章钾，控件在屏幕中通過約束來固定控件的位置。
SizeClasses：指的是就是不同的屏幕热芹，一個控件在不同屏幕上所呈現(xiàn)的樣子贱傀，意思就是你可以選擇不同尺寸不同大小的屏幕，來對你的界面進行適配伊脓。
AutoLayout的介紹和簡單使用
我們隨便創(chuàng)建一個可視化文件府寒，無論是SB或者XIB都可以。然后我們開始對AutoLayout的學(xué)習(xí)和講解报腔。如圖1：
上圖中我使用的是SB株搔。在SB中的右下角有幾個按鍵。如圖2：
在左側(cè)圈中的就是SizeClasses,而右側(cè)就是我們要講解的AutoLayout纯蛾。
我們先對其按鈕的意義進行介紹纤房。如圖3所示：
我們依次對每個按鈕進行介紹：
Leading Edges：左對齊
Trailing Edges：右對齊
Top Edges：頂部對齊
Bottom Edges：底部對齊
Horizontal Centers：垂直中心線對齊
Vertrical Centers：水平中心對齊
Baselines：基線對齊
Horizontally in container：和父視圖的垂直中心線對齊
Verically in Container ：和父視圖的水平中心線對齊
update Frames：約束添加完成后刷新當(dāng)前的可視化文件，方便開發(fā)人員看到效果翻诉。我們也可用快捷鍵’alt’ + ’command’ + ‘=‘來快速的操作炮姨。
繼續(xù)來看第二個按鈕，如圖4所示：
圖中圈中的就是添加約束的位置碰煌。
下面勾選框constrain to margins 會對邊界添加8px的空白舒岸。
width：控件的寬度。
height：控件的高度拄查。
equal widths：等寬吁津。
equal heights： 等高。
aspect Ratio ：寬高比堕扶。
align：對齊方式碍脏。也就我們在圖3中介紹的全部內(nèi)容，我們可以通過右邊的選項卡選擇你想要的對齊方式稍算。
update Frames： 更新frames典尾。
隨后，我們會對該圖中的約束重點講解糊探。
我們繼續(xù)往后看钾埂，如圖5：
圖5中，我們用的最多的是清除約束科平，當(dāng)我們約束添加錯誤的時候褥紫，我們可以清除約束重新添加。
在Selected Views 中：這里我們做的操作只對你選中的控件有影響瞪慧，而在All Views in View Controller 中指的是當(dāng)前可視化文件的所有視圖都有影響髓考，
update constraint constants ：根據(jù)當(dāng)前的控件所在位置更新約束。將控件的約束更新為你控件目前所在的位置的約束弃酌，一般不建議使用他刷新氨菇，而update Frames是根據(jù)你的約束讓控件刷新位置。開發(fā)過程中妓湘，我們一般是加好約束查蓉，讓控件去根據(jù)約束去刷新下位置，而不是讓控件根據(jù)目前所在的位置去更新約束榜贴。所以在開發(fā)過程中豌研，一般使用update Frames，而不是用update constraint constants唬党。
Add missing Constraints ：系統(tǒng)自動給不足的約束進行添加鹃共，一般我們不會選用這個按鈕，如果真的出錯初嘹。我們一般會選擇清除約束重新添加及汉。
Reset to suggested constraints：解決約束沖突。我們一般也不會采用他屯烦，讓系統(tǒng)幫我們解決約束沖突的問題坷随。
Clear Constraints：清除約束。
在約束中出現(xiàn)問題有3種情況：
1.約束警告
黃色的警告驻龟，一般指的的是當(dāng)前視圖中的約束和呈現(xiàn)出來的布局不一致温眉，但是這個不影響開發(fā)，我們需要做的就是更新下約束翁狐。如圖6-1类溢，
我們添加完約束后，視圖會程序這樣的黃色警告如圖6-2。
我們可以點擊紅色選中的按鈕闯冷，進入到詳情查看約束問題砂心。如圖6-3所示：
我們只需要update Frames就可以解決這個黃色警告∩咭或者使用快捷鍵Alt + command + =辩诞。 我一般喜歡使用快捷鍵。
如果你采用了這個按鍵纺涤，如圖6-4所示译暂。那么控件的約束就更改成，你現(xiàn)在可視化文件中的位置的約束撩炊，所以大家盡可能是去使用update Frames外永，而不是如6-4所示的方法。
使用command+alt+=也就是update Frames更新后的效果如圖6-5所示：
2約束不足
紅色的警告拧咳，我們需要補全約束才行伯顶。如圖7-1所示。我們可以根據(jù)系統(tǒng)的提示，補全對應(yīng)的約束，當(dāng)然篱瞎，我們也可以通過系統(tǒng)的建議使用Add missing Constraints來讓系統(tǒng)自動補全約束，但是這種方法不建議大家使用汪厨，建議大家通過系統(tǒng)的提示自己添加約束。
3約束沖突
約束的添加出現(xiàn)沖突愉择，比如說劫乱，你讓一個控件距離左邊10px，距離右邊10px锥涕，但是你又給控件添加寬度為46px衷戈，這樣一種情況就出現(xiàn)了約束的沖突，如圖8-1所示层坠。這樣一種錯誤殖妇，我們需要根據(jù)提示刪除多余的約束，或者使用系統(tǒng)的自動約束解決方法破花，Reset to suggested constraints谦趣，不建議大家使用。
以上是給大家先說下約束中的問題座每，應(yīng)對如何解決前鹅，接下來我們開始是我們的重點，約束的添加和使用峭梳。
約束的熟練掌握需要大量的練習(xí)來完成舰绘。接下來我們一起練習(xí)幾個例子來掌握約束。
練習(xí)
練習(xí)1
一個view 寬100 ，高度200捂寿，距上10口四，距左10，如圖9-1所示者蠕。
這樣一個布局窃祝，如果想用約束來實現(xiàn)的話掐松，我們可以添加以下的約束來實現(xiàn)踱侣，如圖9-2所示：
點擊下面的add 4 constraints 就可以添加上約束了。添加完約束后大磺，更新下Frames 就能呈現(xiàn)我們想要的效果抡句。
練習(xí)2
一個view占滿整個屏幕。如圖10-1所示：
添加約束如圖10-2所示：
我們來驗證下Constraints to margins的作用杠愧，現(xiàn)在我們換成取消掉整個選項卡看下效果待榔，如圖10-3所示：
我們可以注意到左右兩邊的空白消失了。這個選項的作用就是系統(tǒng)默認會給我們添加8像素的空白區(qū)域流济。我們在開發(fā)過程中一般會取消掉它锐锣。
圖10-3中，我們發(fā)現(xiàn)上邊距還是有20像素的邊距空白绳瘟，接下來我們要講下這個相對約束雕憔，我們添加的約束，系統(tǒng)一般會自己默認給我們一個相對的控件進行添加糖声，比如上面的左右的約束斤彼，我們相對的是視圖的左邊距和右邊距，但是上邊距系統(tǒng)會有一個20像素的菜單欄蘸泻，也就是我們的電池琉苇，時間等菜單欄，我們也可以自己選擇進行約束的布局悦施，如圖10-4所示：
上邊距約束并扇，系統(tǒng)默認選擇的是菜單欄，所以會有20像素的邊距抡诞，我們懸著父視圖View穷蛹，這個邊距就會消失。如圖10-5所示：
添加完成后更新下約束沐绒，我們就能得到效果俩莽，如圖10-6所示：
注意：當(dāng)我們視圖中的控件較多時，一定要點開看看乔遮，系統(tǒng)選擇的相對控件是哪一個扮超，如果不是你想要的，一定要切換。每次添加完約束后出刷，如果不是想要的效果璧疗，大家可以清除下約束，重寫添加馁龟，不要一直添加崩侠，否者就會造成約束的沖突。以上的所有效果坷檩，每次的添加約束却音，我都清除了約束之后進行的添加。
練習(xí)3
在開發(fā)過程中矢炼，我們會有一種情況系瓢，就是圖片，圖片在進行拉深后句灌，圖就會變形夷陋，那么我們?nèi)绾谓鉀Q這個問題呢？這就需要用到我們的寬高比約束胰锌。一個imageView在屏幕的左上角骗绕，寬度為距左100，距右100资昧。寬高比為3：2.無論是橫屏還是豎屏情況下酬土，我們都需要進行讓他不能被拉深，只能按照比例進行增長榛搔。如圖11所示：
那這個效果如果添加約束我們?nèi)绾翁砑幽嘏捣玻咳鐖D11-1所示：
添加完成后，我們選中我們的imageview發(fā)現(xiàn)践惑，我們的比例不是我們想要的如圖11-4所示：
這個時候腹泌，我們需要進行約束的修改.如圖11-5所示：
點中Edit進行編輯。如圖11-6所示：
修改完成后enter就可以了尔觉，不需要進行更新約束凉袱，系統(tǒng)會自動更新。關(guān)于參數(shù)的修改侦铜，我們在后面會更加詳細的修改专甩。
練習(xí)4
橫屏效果圖如圖12-1所示。
豎屏效果圖如圖12-2所示钉稍。
那這種效果添加成約束涤躲，左側(cè)imageview添加約束如圖12-3所示：
右側(cè)imageview的視圖添加約束如圖12-4所示：
(ps:雖然相同的約束可以一起添加，但是我建議大家約束盡可能的一個控件一個控件的進行添加贡未，不要一次性進行添加种樱，因為在添加約束的過程中是相對控件進行添加約束的蒙袍，一起添加很容易出錯。)
這個時候添加完這2個約束嫩挤，只能是寬度固定和位置固定了害幅，也就是每個控件各占屏幕的一半，但是高度我們還沒有添加岂昭，所以這個時候以现，我們的約束是不足的，是爆紅的约啊。然后我們把約束補全邑遏。左側(cè)和右側(cè)的約束分別添加高度的約束。如圖12-5所示：
這種效果棍苹，我們也可以用其他的約束進行實現(xiàn)无宿，左側(cè)和右側(cè)的控件進行等高等寬的處理，或者添加上中心線對齊枢里。
如圖12-6所示：通過按住command不松手，同時選中2個控件蹂午。同時添加約束栏豺。
練習(xí)5
我們接下來練習(xí)下對齊方式。如圖13-1所示：
如13-1所示：一個控件在屏幕的中心位置豆胸。
那么我們就可以通過對齊方式的約束進行實現(xiàn)奥洼。
約束添加如圖13-2，圖13-3所示：
在13-3中晚胡，框中的0灵奖，代表的是距離父視圖中心線的距離，大家可以通過自己添加不同的數(shù)字估盘，來讓視圖進行一定的偏移瓷患。
如圖13-4所示，如果我其他的約束不改變遣妥，在框中添加了100的數(shù)字擅编，當(dāng)前控件的位置就會發(fā)生改變。
那么呈現(xiàn)的效果如圖13-5所示：
大家也可以寫成-100看下效果箫踩，這里就不再演示爱态。
接下來，我們練習(xí)其他的對齊方式境钟。
練習(xí)6
效果如圖14-1所示：
圖13中锦担，我們練習(xí)的是父視圖中心線的對齊，現(xiàn)在我們練習(xí)2個空間的中心線對齊慨削。目前我們聯(lián)系的是垂直中心線的對齊方式洞渔。在我們剛剛在練習(xí)5中鱼的，添加父視圖中心線對齊的時候，不知道大家發(fā)現(xiàn)了沒有痘煤，我們的其他對齊方式是灰色的凑阶，也就是不能使用的。在此之前衷快，我也說過宙橱，添加約束是需要有相對對象的，你如果想要添加等高等寬的約束蘸拔，我們是需要選中2個以上的控件才能使用师郑，否者就會是灰色的。那么對齊方式也是一樣的调窍，現(xiàn)在你需要同時選中2個控件才能使用其他的對齊方式的約束宝冕。
以上的效果顯示，我們?nèi)绻砑由霞s束的邓萨，我們首先需要給2個控件進行寬高的固定地梨，然后給其中一個控件進行位置的確定，另外一個控件進行中心線對齊就可以了上圖約束添加如圖14-2缔恳，下圖約束添加入圖14-3所示：
這樣的話上面的控件就已經(jīng)固定住了宝剖。下面的控件我們垂直方向已經(jīng)固定，現(xiàn)在還剩下水平方向的沒有固定歉甚，我們需要給它添加一個和上視圖的垂直中心對齊如圖14-4所示：
這樣的話万细，更下下視圖Frames就能得到我們剛剛的效果圖所呈現(xiàn)的效果了。
那其他那些左對齊纸泄，右對齊赖钞，也是同理，大家可以自行進行練習(xí)聘裁，唯一一點就是大家需要注意對齊方式的約束是需要2個以上的控件才能進行添加雪营，在添加對齊方式的時候，一定要先固定住其中一個控件咧虎，才能達到效果卓缰。
這里需要提到一個基線對齊。所為的基線指的就是我們當(dāng)初寫英語單詞的四線格如圖15所示：
但是這種對齊方式砰诵，在我們開發(fā)過程中很少使用征唬。這里就不再演示效果了。
以上就是約束的簡單使用茁彭。
預(yù)告：下章更新的內(nèi)容是約束的進階总寒，主要講的內(nèi)容是約束的修改，約束的動畫效果理肺，以及幾種復(fù)雜界面約束的實現(xiàn)摄闸。
如果喜歡我的文章善镰，或者幫助到你，大家可以點個贊或者添加個關(guān)注年枕。如果你能請我喝瓶可樂或者來包小浣熊炫欺，那我就再開心不過了。感謝你對開發(fā)界的支持熏兄！
