感覺好久沒有寫博客了，最近博主在複習java web準備考試，順便爲後面使用UIWebKit做鋪墊吧。
今天就用xcode中的stroyboard實現自動佈局，我們不用寫一句代碼，就能實現一些基本的佈局。
第一套佈局
這兒有兩套佈局，我們先來看看簡單的那一套。
看這套佈局特別簡單，只需要創建三個UIView，然後讓他們總的寬度等於屏幕的寬度，然後各自的長寬相等就可以了。接下來看一步一步的操作吧。
首先創建一個工程，然後在Main.stroyboard中向界面拖三個UIView並設置各自的背景顏色即可。(大小和位置不用在意)
接下來就是一步一步的操作了，先選中三個視圖，然後點擊Embed In Stack，將三個視圖放入一個棧中
然後設置這個棧的參數(Aligment設置爲fill，Distribution設置爲fill equally，spacing設置爲10)
這個時候就會發現這三個視圖都有所調整，接下來就需要設置相應的約束，使autolayout能識別這三個視圖組成的棧的對應位置。
在Stack上按下control鍵，並拖動鼠標指向View，這時就會有相應的提示框彈出來設置約束，我們這裏選擇如下三個參數:(Center Horizontally in Safe Area)設置x位置、(Center Vertically in Safe Area)設置y位置、(Equal Widths)設置寬。
我們添加了相應的約束後再進行相同操作，看看約束是否添加成功
可以看出，我們添加的約束前面會有一個白色的小點。我們也可以在右邊的尺寸檢查器中查看相應的約束。
做完上述操作之後，我們已經完成了對視圖的x位置、y位置和寬度的設置，但autolayout不知道我們的視圖的高度爲多少。從開始的分析中，每一個單獨的UIView都是一個正方形，所以他們的長寬需要相等。我們這裏在三個UIView中的任意一個UIView上點擊control並拖動鼠標左鍵到自己上，就會彈出相應的約束選擇框。在這裏我們選擇Aspect Ratio尺寸比例。
然後在右邊的尺寸檢查器中編輯該約束，將比例設置爲1:1，也就是使高度和寬度相等。
這樣，我們就完成了這個自動佈局，效果如下：
第二套佈局
來看看第二套佈局要求的效果：
我們來分析一下這套佈局，首先最容易看出來的是中間的三個視圖與上一套佈局像，他們的長度相等，但他們的高度在橫屏和豎屏情況下是一樣的。然後是上面的兩個視圖，左邊的視圖與中間三個視圖中最左邊的那個寬度相等，高度填充滿上半部分，右邊的視圖與中間三個視圖中最右邊的和中間的寬度只和及其中間的空餘部分相等。最後是下面的兩個視圖，與上面的視圖介乎一樣，成一個鏡像。
接下來就開始在storyboard中進行相應的佈局。
這次佈局需要用到7個UIView，現將其拖到界面中，並設置好相應的背景色。
首先是對中間三個視圖進行佈局，這與上一個佈局幾乎一致，先將是三個視圖放入棧中，設置間隙和填充方式，然後添加約束，我們這裏需要更改一下約束，相對於View的約束和Stack自身的約束選擇如下：
我們這裏需要編輯一下約束，設置高度爲50，相對於View左邊距爲10(Leading Space to Safe Area)，相對於View右邊距爲-10(Trailing Space to Safe Area)
然後進行上半部分兩個視圖的操作。
選中兩個視圖，然後放入棧中，相應的參數更改如下：
再設置與View之間的約束、與中間三個視圖組成的Stack之間的約束
並修改相應的約束值
與View的top之間的間隙爲-10，底部與Stack View之間的間隙爲10
這時發現還有約束不足錯誤
這是爲什麼呢？點進去看，提示是需要增加相應的x位置的提示，想想，我們在設置Stack View的屬性值時，將Distribution設置爲fill，這樣並不能確定兩個視圖的寬度，而且佈局也不滿足要求，所以，這裏需要給左邊的視圖與中間部分最左邊視圖之間添加一個等寬的約束
這樣，上半部分的佈局就做完了，運行一下看看效果
下半部分的具體步驟就留給各位讀者自己模仿上半部分的完成，很簡單的。
最後貼下最終的效果圖吧！
總的來說，使用storyboard可以很快地搭建一個界面出來，如果能夠熟練地使用storyboard並與代碼佈局相結合，可以非常迅速地完成一個界面優美、維護方便的App。