在iOS中有兩種可以實現(xiàn)的可視化編程的方法，一種是StoryBoard，俗稱sb，是iOS下可視化編程的方式之一，另一種是XIB。
使用StoryBoard可以方便快捷的拖拽視圖控制器，控件，設(shè)置根視圖控制器，并且可以直觀的看到位置大小，效果等，如果能熟練使用可視化編程可以減少很多的代碼。
XIB是蘋果公司用來開發(fā)界面的可視化編程文件，可以通過直觀的界面布局，設(shè)計來完成使用代碼完成的界面布局，設(shè)計功能。同時，XIB方式也支持將布局后的界面控件元素同步代碼，以及同步事件函數(shù)，設(shè)計屬性等功能。
這兩種的區(qū)別：SB是一個文件管理多個可視化文件，在公司團(tuán)隊開發(fā)過程中很少會使用它，為了解決團(tuán)隊合作中的文件沖突問題，但是iOS 9 更新了新特性Storyboard References 可以解決這個問題，隨后我們在后面會講到這個東西。XIB是單獨的可視化文件，團(tuán)隊開發(fā)可以進(jìn)行使用，這兩者我們要掌握的內(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)的樣子，意思就是你可以選擇不同尺寸不同大小的屏幕，來對你的界面進(jìn)行適配。
AutoLayout的介紹和簡單使用
我們隨便創(chuàng)建一個可視化文件，無論是SB或者XIB都可以。然后我們開始對AutoLayout的學(xué)習(xí)和講解。如圖1：
上圖中我使用的是SB。在SB中的右下角有幾個按鍵。如圖2：
在左側(cè)圈中的就是SizeClasses,而右側(cè)就是我們要講解的AutoLayout。
我們先對其按鈕的意義進(jìn)行介紹。如圖3所示：
我們依次對每個按鈕進(jìn)行介紹：
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)自動給不足的約束進(jìn)行添加，一般我們不會選用這個按鈕，如果真的出錯。我們一般會選擇清除約束重新添加。
Reset to suggested constraints：解決約束沖突。我們一般也不會采用他，讓系統(tǒng)幫我們解決約束沖突的問題。
Clear Constraints：清除約束。
在約束中出現(xiàn)問題有3種情況：
1.約束警告
黃色的警告，一般指的的是當(dāng)前視圖中的約束和呈現(xiàn)出來的布局不一致，但是這個不影響開發(fā)，我們需要做的就是更新下約束。如圖6-1，
我們添加完約束后，視圖會程序這樣的黃色警告如圖6-2。
我們可以點擊紅色選中的按鈕，進(jìn)入到詳情查看約束問題。如圖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)默認(rèn)會給我們添加8像素的空白區(qū)域。我們在開發(fā)過程中一般會取消掉它。
圖10-3中，我們發(fā)現(xiàn)上邊距還是有20像素的邊距空白，接下來我們要講下這個相對約束，我們添加的約束，系統(tǒng)一般會自己默認(rèn)給我們一個相對的控件進(jìn)行添加，比如上面的左右的約束，我們相對的是視圖的左邊距和右邊距，但是上邊距系統(tǒng)會有一個20像素的菜單欄，也就是我們的電池，時間等菜單欄，我們也可以自己選擇進(jìn)行約束的布局，如圖10-4所示：
上邊距約束，系統(tǒng)默認(rèn)選擇的是菜單欄，所以會有20像素的邊距，我們懸著父視圖View，這個邊距就會消失。如圖10-5所示：
添加完成后更新下約束，我們就能得到效果，如圖10-6所示：
注意：當(dāng)我們視圖中的控件較多時，一定要點開看看，系統(tǒng)選擇的相對控件是哪一個，如果不是你想要的，一定要切換。每次添加完約束后，如果不是想要的效果，大家可以清除下約束，重寫添加，不要一直添加，否者就會造成約束的沖突。以上的所有效果，每次的添加約束，我都清除了約束之后進(jìn)行的添加。
練習(xí)3
在開發(fā)過程中，我們會有一種情況，就是圖片，圖片在進(jìn)行拉深后，圖就會變形，那么我們?nèi)绾谓鉀Q這個問題呢？這就需要用到我們的寬高比約束。一個imageView在屏幕的左上角，寬度為距左100，距右100。寬高比為3：2.無論是橫屏還是豎屏情況下，我們都需要進(jìn)行讓他不能被拉深，只能按照比例進(jìn)行增長。如圖11所示：
那這個效果如果添加約束我們?nèi)绾翁砑幽兀咳鐖D11-1所示：
添加完成后，我們選中我們的imageview發(fā)現(xiàn)，我們的比例不是我們想要的如圖11-4所示：
這個時候，我們需要進(jìn)行約束的修改.如圖11-5所示：
點中Edit進(jìn)行編輯。如圖11-6所示：
修改完成后enter就可以了，不需要進(jìn)行更新約束，系統(tǒng)會自動更新。關(guān)于參數(shù)的修改，我們在后面會更加詳細(xì)的修改。
練習(xí)4
橫屏效果圖如圖12-1所示。
豎屏效果圖如圖12-2所示。
那這種效果添加成約束，左側(cè)imageview添加約束如圖12-3所示：
右側(cè)imageview的視圖添加約束如圖12-4所示：
(ps:雖然相同的約束可以一起添加，但是我建議大家約束盡可能的一個控件一個控件的進(jìn)行添加，不要一次性進(jìn)行添加，因為在添加約束的過程中是相對控件進(jìn)行添加約束的，一起添加很容易出錯。)
這個時候添加完這2個約束，只能是寬度固定和位置固定了，也就是每個控件各占屏幕的一半，但是高度我們還沒有添加，所以這個時候，我們的約束是不足的，是爆紅的。然后我們把約束補全。左側(cè)和右側(cè)的約束分別添加高度的約束。如圖12-5所示：
這種效果，我們也可以用其他的約束進(jìn)行實現(xiàn)，左側(cè)和右側(cè)的控件進(jìn)行等高等寬的處理，或者添加上中心線對齊。
如圖12-6所示：通過按住command不松手，同時選中2個控件。同時添加約束。
練習(xí)5
我們接下來練習(xí)下對齊方式。如圖13-1所示：
如13-1所示：一個控件在屏幕的中心位置。
那么我們就可以通過對齊方式的約束進(jìn)行實現(xiàn)。
約束添加如圖13-2，圖13-3所示：
在13-3中，框中的0，代表的是距離父視圖中心線的距離，大家可以通過自己添加不同的數(shù)字，來讓視圖進(jìn)行一定的偏移。
如圖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個控件進(jìn)行寬高的固定，然后給其中一個控件進(jìn)行位置的確定，另外一個控件進(jìn)行中心線對齊就可以了上圖約束添加如圖14-2，下圖約束添加入圖14-3所示：
這樣的話上面的控件就已經(jīng)固定住了。下面的控件我們垂直方向已經(jīng)固定，現(xiàn)在還剩下水平方向的沒有固定，我們需要給它添加一個和上視圖的垂直中心對齊如圖14-4所示：
這樣的話，更下下視圖Frames就能得到我們剛剛的效果圖所呈現(xiàn)的效果了。
那其他那些左對齊，右對齊，也是同理，大家可以自行進(jìn)行練習(xí)，唯一一點就是大家需要注意對齊方式的約束是需要2個以上的控件才能進(jìn)行添加，在添加對齊方式的時候，一定要先固定住其中一個控件，才能達(dá)到效果。
這里需要提到一個基線對齊。所為的基線指的就是我們當(dāng)初寫英語單詞的四線格如圖15所示：
但是這種對齊方式，在我們開發(fā)過程中很少使用。這里就不再演示效果了。
以上就是約束的簡單使用。
預(yù)告：下章更新的內(nèi)容是約束的進(jìn)階，主要講的內(nèi)容是約束的修改，約束的動畫效果，以及幾種復(fù)雜界面約束的實現(xiàn)。
如果喜歡我的文章，或者幫助到你，大家可以點個贊或者添加個關(guān)注。如果你能請我喝瓶可樂或者來包小浣熊，那我就再開心不過了。感謝你對開發(fā)界的支持！
