1. 基礎(chǔ)篇
-目的:用自動(dòng)布局(StoryBoard中)實(shí)現(xiàn)幾個(gè)View等分屏幕
-效果圖:
Snip20151130_3.png
-實(shí)現(xiàn)方法:
a.設(shè)置第一個(gè)view的約束(既灰色view),約束為上,左,下為0,0,0
b.設(shè)置第二個(gè)view的約束(既藍(lán)色view),約束為上,左,下為0,0,0
c.設(shè)置第三個(gè)view的約束(既粉色view),約束為上,左,下為0,0,0
d.設(shè)置第四個(gè)view的約束(既橘色view),約束為上,左,下,右為0,0,0,0
e.選中四個(gè)View,設(shè)定四個(gè)View為等寬,如圖
Snip20151130_4.png
2.進(jìn)階篇
目的:用自動(dòng)布局(StoryBoard中)實(shí)現(xiàn)幾個(gè)控件的等間距分割
效果圖:(簡版,約束版)(事例為距上方藍(lán)線的約束)
Snip20151130_6.png
Snip20151130_5.png
實(shí)現(xiàn)方法
小TIPS:這里使用自動(dòng)布局進(jìn)行等間距分割的時(shí)候,要借助輔助的view控件
a. 對(duì)微博icon設(shè)置約束,約束為,上,左,寬,高為18,50,30,30
b. 設(shè)置其他三個(gè)icon與微博icon等寬,等高,等水平
c. 設(shè)置豆瓣icon距離上,右的約束為18,50
d. 拖三個(gè)view到四個(gè)icon中間,如圖
Snip20151130_7.png
e.對(duì)三個(gè)view分別設(shè)定約束(相對(duì)于左側(cè)icon)為水平居中,等高,左右約束為0,0
Snip20151130_8.png
Snip20151130_9.png
f.最后對(duì)三個(gè)view(選中)設(shè)定等寬
g.更新約束看看效果吧
3. iOS9.0更新(StackView)
注:該方法只能適配iOS9.0系統(tǒng)
將StackView拖動(dòng)到StoryBoard中,設(shè)置好相應(yīng)的約束,這個(gè)view就相當(dāng)如一個(gè)容器,將想進(jìn)行等間距的控件放入StackView中,并設(shè)定屬性如圖
Snip20151130_10.png
效果圖:
在移動(dòng)端開發(fā)過程中骂维，可視化的搭建UI效率是非常高的，蘋果官方也是強(qiáng)力推薦。我們現(xiàn)在來學(xué)一學(xué)如何利用系統(tǒng)自帶的故事版（storyboard）來搭建UI耕餐〗∨可視化搭建UI除了可以使用storyboard也可以使用xib旺上。其實(shí)使用它們也是非常容易的，只需要在xcode的右下角處搜索控件的名字糖埋，然后拖拽到故事板上即可宣吱，如圖
拖拉創(chuàng)建控件
（為了方便觀看，我們先隨便給它設(shè)個(gè)背景色）
設(shè)置控件的背景顏色
拖拽完之后瞳别。就是根據(jù)需求去設(shè)置控件的大小征候，以及屏幕的適配（iphone4~iPhone 6s plus、或者各種ipad型號(hào)）等祟敛。在這個(gè)設(shè)置大小的點(diǎn)疤坝，我們就要用到約束。以前用代碼也是要用到約束去限制每個(gè)控件的大小的馆铁。因此約束的概念在這里也就不展開講了跑揉。（假如你實(shí)在不想用約束的話，其實(shí)也是可以實(shí)現(xiàn)屏幕的適配的埠巨∨显＃可以用比例的大小去設(shè)置衣撬，類似于h5，用屏幕比例的方法扮饶，具體細(xì)節(jié)可以私聊）【吡罚現(xiàn)在主要講講如何實(shí)現(xiàn)給控件加上約束。
（現(xiàn)在先拖拉一個(gè)UIView來設(shè)置一個(gè)距離頂部的約束）
控件添加頂部約束
這樣設(shè)置完頂部的約束之后就會(huì)出現(xiàn)如下的現(xiàn)象
添加第一個(gè)約束
出現(xiàn)紅色說明還有欠缺的約束沒有加完甜无。頂部那個(gè)線就是我們添加的約束扛点。假如我們先寫距離頂部的距離是201。那么我們不論切換到哪個(gè)屏幕的大小View距離頂部的距離都是201岂丘。我們?cè)偻筮吿砑右粋€(gè)約束陵究，然后設(shè)置它的寬高為100。即如圖
去掉約束邊緣
添加其他約束
約束完之后就可以了（如果出現(xiàn)的約束是藍(lán)色的奥帘，說明約束正常）
約束完成
這樣約束完之后的那個(gè)UIView的大小和位置就是固定的了铜邮。以后不論修改成哪個(gè)屏幕都是一樣的。
不過這樣有個(gè)缺點(diǎn)寨蹋，它的距離的位置和大小是絕對(duì)的而不是相對(duì)的松蒜。假如你用iphone4s展示出這個(gè)界面，就覺得剛剛好的話已旧，那么用iphone6就會(huì)顯得有點(diǎn)偏秸苗，用例子看看，如圖
iphone6模擬器運(yùn)行效果
iphone4s模擬器運(yùn)行效果
所以运褪，我們應(yīng)該得用相對(duì)位置和相對(duì)大小惊楼。用相對(duì)位置和相對(duì)大小的話，它是根據(jù)屏幕的大小去自動(dòng)適配控件的位置和大小秸讹，這樣子就可以比較符合開發(fā)員的預(yù)期需求檀咙。那么我們?nèi)绾蝸碜瞿兀课覀儊碓囋嚕?/p>
假如我們想讓它水平居中璃诀，那么我們把原來的左邊約束給刪除攀芯，添加一個(gè)水平居中的約束點(diǎn)擊View，然后點(diǎn)到約束的控制面板文虏，找到左邊的約束，選中殖演，按delete刪除
刪除部分約束
（ps如果選不中約束按delete的話氧秘，會(huì)把整個(gè)View都刪除掉的，不過不用擔(dān)心趴久，按command+Z撤銷回來即可丸相，然后再選中約束，把它刪除掉）
刪除完約束的效果
刪除完約束之后約束會(huì)爆紅是正潮斯鳎現(xiàn)象灭忠，不管它膳算，我們來添加水平居中的約束，先點(diǎn)擊View弛作，然后點(diǎn)擊約束約束涕蜂，horizantally（水平）打上勾，選擇update然后add上去映琳，如圖
添加水平居中約束
這樣不論是在哪個(gè)屏幕上,我們的控件都水平居中了机隙。
添加水平居中后的效果
這樣就水平居中了。既然是相對(duì)約束萨西，當(dāng)然不止僅僅只能水平居中了有鹿，比如說我要偏左一點(diǎn)怎么辦？偏右一點(diǎn)怎么辦谎脯？改水平居中系數(shù)葱跋！看圖說話
修改居中系數(shù)
點(diǎn)擊那個(gè)edit出現(xiàn)后修改那個(gè)Multiplier，那個(gè)就是系數(shù)值源梭，比1小就是往左娱俺，比1大就是往右，我們來設(shè)置一下0.6和1.8的效果看看
水平居中系數(shù)為0.6
（ps按command和-可以縮小故事版的視圖咸产，方便查看矢否，按command和+就是放大，值得注意一點(diǎn)的是脑溢，至少要原故事版大小或者比原故事板大小的大才能在上面修改控件僵朗，不然頂多只能移動(dòng)一下視圖的位置而已。雙擊視圖就可以恢復(fù)原大小了）
水平居中系數(shù)為1.8
這樣看是不是很明顯屑彻？那么這樣就可以根據(jù)實(shí)際需求設(shè)定我們需要的位置了验庙。垂直居中也是這樣設(shè)置。就是選中水平約束下面那個(gè)（vertically）
垂直居中約束
寫完相對(duì)位置之后社牲，我們應(yīng)該要來想想怎么設(shè)置相對(duì)大小了粪薛。為了方便演示，先把原來那個(gè)刪除了搏恤，重新拉一個(gè)UIView违寿。把它的大小和屏幕設(shè)置成等高等寬。
先選中當(dāng)前控件和要等高等寬的父控件熟空，把equal widths和equal heights打上勾就可以藤巢，add上去就可以了。
與父視圖等高等寬
（ps這里要注意選擇當(dāng)前控件和要等高等寬的父控件按住command用鼠標(biāo)點(diǎn)擊左邊的控件名就可以了息罗，就是框起來的那兩個(gè)）
添加完之后約束那里還是爆紅掂咒，是因?yàn)槲覀冞€沒有加位置約束，我們給它左邊和上邊都是0.0，這樣就可以了
添加等高等寬約束
接下來點(diǎn)中View绍刮，選擇約束温圆，添加左、上為0
添加位置約束
OK孩革，到這里就可以實(shí)現(xiàn)相對(duì)大小了岁歉。
添加完成約束的效果
根據(jù)那個(gè)相對(duì)位置的設(shè)置，同理的嫉戚，我們想修改它不是滿屏大小刨裆，也可以使用系數(shù)
相對(duì)大小的系數(shù)
我們把寬度修改成0.4試試
寬度為父控件的0.4
這樣子View的寬度不論是切換到哪個(gè)屏幕都是占屏幕總寬的0.4大小了。寬高同理彬檀，想學(xué)習(xí)的自己慢慢嘗試帆啃。
//居中約束
（1）拖拉一個(gè)View到LoginViewController.xib的視圖上面，調(diào)整高度為300窍帝，我下面都稱其為MiddleView吧努潘，如下圖所示，
為了讓圖片垂直居中顯示坤学，我們可以通過鍵盤的上（↑）下（↓）按鍵移動(dòng)View疯坤。
（2）拖兩個(gè)UITextField和一個(gè)UIButton到View上面，同時(shí)設(shè)置了MiddleView的背景色為LightGray深浮，如下圖所示压怠，
（3）給MiddleView添加約束，使其水平和豎直居中飞苇，先選中MiddleView菌瘫，然后按照下圖操作，
（4）給MiddleView添加寬高（width and height）的約束布卡，上面僅僅添加水平和垂直居中雨让，會(huì)有警告，這是因?yàn)樘砑拥募s束還不夠忿等，如下圖所示栖忠，添加寬高的約束，
（5）給MiddleView上面的空間添加相互間的約束贸街，這時(shí)候添加約束就簡單多了庵寞，先選中MiddleView上面所有的控件，只要點(diǎn)擊一個(gè)Add Missing Constraints薛匪，捐川，如下圖所示，
通過上面一些簡單的操作蛋辈，保證登陸界面中的控件不管在3.5寸還是4寸的屏幕上面，都能夠居中顯示了。運(yùn)行效果如下所示冷溶，
3.5寸屏幕效果圖渐白，
4寸屏幕效果圖，
5逞频、另外一種居中可以參考
