在移動端開發(fā)過程中，可視化的搭建UI效率是非常高的，蘋果官方也是強(qiáng)力推薦。我們現(xiàn)在來學(xué)一學(xué)如何利用系統(tǒng)自帶的故事版（storyboard）來搭建UI根时。可視化搭建UI除了可以使用storyboard也可以使用xib辰晕。其實使用它們也是非常容易的蛤迎，只需要在xcode的右下角處搜索控件的名字，然后拖拽到故事板上即可含友，如圖

拖拉創(chuàng)建控件

（為了方便觀看替裆，我們先隨便給它設(shè)個背景色）

設(shè)置控件的背景顏色

拖拽完之后。就是根據(jù)需求去設(shè)置控件的大小窘问，以及屏幕的適配（iphone4~iPhone 6s plus辆童、或者各種ipad型號）等。在這個設(shè)置大小的點惠赫，我們就要用到約束把鉴。以前用代碼也是要用到約束去限制每個控件的大小的。因此約束的概念在這里也就不展開講了儿咱。（假如你實在不想用約束的話庭砍，其實也是可以實現(xiàn)屏幕的適配的场晶。可以用比例的大小去設(shè)置怠缸，類似于h5峰搪，用屏幕比例的方法，具體細(xì)節(jié)可以私聊）】瘢現(xiàn)在主要講講如何實現(xiàn)給控件加上約束。

（現(xiàn)在先拖拉一個UIView來設(shè)置一個距離頂部的約束）

控件添加頂部約束

這樣設(shè)置完頂部的約束之后就會出現(xiàn)如下的現(xiàn)象

添加第一個約束

出現(xiàn)紅色說明還有欠缺的約束沒有加完使套。頂部那個線就是我們添加的約束罐呼。假如我們先寫距離頂部的距離是201。那么我們不論切換到哪個屏幕的大小View距離頂部的距離都是201侦高。我們再往左邊添加一個約束嫉柴，然后設(shè)置它的寬高為100。即如圖

去掉約束邊緣

添加其他約束

約束完之后就可以了（如果出現(xiàn)的約束是藍(lán)色的奉呛，說明約束正常）

約束完成

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

不過這樣有個缺點瞧壮，它的距離的位置和大小是絕對的而不是相對的登馒。假如你用iphone4s展示出這個界面，就覺得剛剛好的話咆槽，那么用iphone6就會顯得有點偏陈轿，用例子看看，如圖

iphone6模擬器運(yùn)行效果

iphone4s模擬器運(yùn)行效果

所以秦忿，我們應(yīng)該得用相對位置和相對大小麦射。用相對位置和相對大小的話，它是根據(jù)屏幕的大小去自動適配控件的位置和大小灯谣，這樣子就可以比較符合開發(fā)員的預(yù)期需求潜秋。那么我們?nèi)绾蝸碜瞿兀课覀儊碓囋嚕?br>

假如我們想讓它水平居中胎许，那么我們把原來的左邊約束給刪除峻呛，添加一個水平居中的約束點擊View，然后點到約束的控制面板呐萨，找到左邊的約束杀饵，選中，按delete刪除

刪除部分約束

（ps如果選不中約束按delete的話谬擦，會把整個View都刪除掉的切距，不過不用擔(dān)心，按command+Z撤銷回來即可惨远，然后再選中約束谜悟，把它刪除掉）

刪除完約束的效果

刪除完約束之后約束會爆紅是正郴靶ぃ現(xiàn)象，不管它葡幸，我們來添加水平居中的約束最筒，先點擊View，然后點擊約束約束蔚叨，horizantally（水平）打上勾床蜘，選擇update然后add上去，如圖

添加水平居中約束

這樣不論是在哪個屏幕上,我們的控件都水平居中了蔑水。

添加水平居中后的效果

這樣就水平居中了邢锯。既然是相對約束，當(dāng)然不止僅僅只能水平居中了搀别，比如說我要偏左一點怎么辦丹擎？偏右一點怎么辦？改水平居中系數(shù)歇父！看圖說話

修改居中系數(shù)

點擊那個edit出現(xiàn)后修改那個Multiplier蒂培，那個就是系數(shù)值，比1小就是往左榜苫，比1大就是往右护戳，我們來設(shè)置一下0.6和1.8的效果看看

水平居中系數(shù)為0.6

（ps按command和-可以縮小故事版的視圖，方便查看，按command和+就是放大，值得注意一點的是拗窃，至少要原故事版大小或者比原故事板大小的大才能在上面修改控件器虾，不然頂多只能移動一下視圖的位置而已。雙擊視圖就可以恢復(fù)原大小了）

水平居中系數(shù)為1.8

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

垂直居中約束

寫完相對位置之后么伯，我們應(yīng)該要來想想怎么設(shè)置相對大小了。為了方便演示卡儒，先把原來那個刪除了田柔，重新拉一個UIView。把它的大小和屏幕設(shè)置成等高等寬骨望。

先選中當(dāng)前控件和要等高等寬的父控件硬爆，把equal widths和equal heights打上勾就可以，add上去就可以了擎鸠。

與父視圖等高等寬

（ps這里要注意選擇當(dāng)前控件和要等高等寬的父控件按住command用鼠標(biāo)點擊左邊的控件名就可以了缀磕，就是框起來的那兩個）

添加完之后約束那里還是爆紅，是因為我們還沒有加位置約束，我們給它左邊和上邊都是0.0袜蚕，這樣就可以了

添加等高等寬約束

接下來點中View糟把，選擇約束，添加左牲剃、上為0

添加位置約束

OK遣疯，到這里就可以實現(xiàn)相對大小了。

添加完成約束的效果

根據(jù)那個相對位置的設(shè)置凿傅，同理的缠犀，我們想修改它不是滿屏大小，也可以使用系數(shù)

相對大小的系數(shù)

我們把寬度修改成0.4試試

寬度為父控件的0.4

這樣子View的寬度不論是切換到哪個屏幕都是占屏幕總寬的0.4大小了聪舒。寬高同理夭坪，想學(xué)習(xí)的自己慢慢嘗試。

學(xué)到這里过椎，我們就已經(jīng)學(xué)會了加絕對值的約束以及加相對值的約束。接下來的各種組合就看項目的實際需求以及你們的各種發(fā)揮各種想象力了戏仓。加油疚宇！