申明：此為本人學習筆記，若有紕漏錯誤之處的可留言共同探討

視覺化的搭建UI效率是非常高的，所以官方蘋果也是非常推薦的。那麼我們來學一學如何利用系統自帶的故事版（storyboard）來搭建UI。視覺化搭建UI除了可以使用storyboard也可以使用xib。其實使用它們也是非常容易的，只需要在xcode的右下角寫處控制元件的名字，然後拖拽到故事板上即可，如圖

拖拽完之後。就是根據需求去設定控制元件的大小，以及螢幕的適配（iphone4~iPhone 6s plus）等。在這個設定大小的點，我們就要用到約束。以前用程式碼也是要用到約束去約束每個控制元件的大小的。所以約束的概念也不展開講了。（假如你實在不想用約束的話，其實也是可以實現螢幕的適配的。可以用比例的大小去設定，類似於h5）。現在主要說說如何實現，怎麼去操作，給控制元件加上約束。

我現在先拖拉一個UIView來設定一個距離頂部的約束

這樣設定完之後就會出現如下的現象

出現紅色說明還有欠缺的約束沒有加完。頂部那個線就是我們新增的約束。假如我們先寫距離頂部的距離是133。那麼我們不論切換到哪個螢幕的大小都是133。

我們再往左邊新增一個約束，然後設定它的寬高為100。即如圖

約束完之後就可以了

這樣約束完之後的那個UIView的大小和位置就是固定的了。以後不論修改成哪個螢幕都是一樣的。

不過這樣有個缺點，它的距離的位置和大小是絕對的而不是相對的。假如你用iphone4展示出這個介面，就覺得偏的話，那麼用iphone6s就會顯得差不多或者剛剛好，用例子看看，如圖

所以，我們應該得用相對位置和相對大小。假如我們想讓它水平居中，那麼我們把原來的左邊約束給刪除，新增一個水平居中的約束

這樣就水平居中了。再執行看看

這樣就水平居中了。既然是相對約束，當然不止僅僅只能水平居中了，比如說我要偏左一點怎麼辦？偏右一點怎麼辦？改水平居中係數，如圖

點選那個edit出現後修改那個Multiplier，那個就是係數值，比1小就是往左，比1大就是往右，我們來設定一下0.6和1.8的效果看看

這樣看是不是很明顯？那麼這樣就可以根據實際需求設定我們需要的位置了。垂直居中也是這樣設定。就是選中水平約束下面那個（vertically）

寫完相對位置之後，我們應該要來想想怎麼設定相對大小了。為了方便演示，先把原來那個刪除了，重新拉一個UIView。把它的大小和螢幕設定成等高等寬。

把equal widths 和equal heights打上勾就可以，add上去就可以了。設定完之後就是這樣

就是因為我們還沒有加位置約束，我們給它左邊和上邊都是0.0，這樣就可以了

OK，到這裡就可以實現相對大小了。

同理的，我們想修改它不是滿屏大小，也可以使用係數

修改成0.4試試

寬高同理，想學習的慢慢自己搞搞。

學到這裡，我們就已經學會了加絕對值的約束以及加相對值的約束。接下來的各種組合就看專案的實際需求以及你們的各種發揮各種想象力了。加油！

上傳圖片居然不小心沒了， 還好在點選開啟別的部落格裡面有備份。 懶得重新再上傳一次，就放個連結好了。