關(guān)于Autolayout的初步介紹

說道Autolayout，我也是在iPhone 6 And 6+ 出來之后才開始關(guān)注的。我是一個(gè)純代碼程序者之前。
那個(gè)時(shí)候有聽說到Xib和Storyboard（現(xiàn)在Xib已經(jīng)使用的少了，下面直接說storyboard。其實(shí)Xib和storyboard只是父子的關(guān)系嘛），我開始在網(wǎng)上查找資料，網(wǎng)上給的解釋我總結(jié)給大家如下：

1.代碼是storyboard的升級(jí)。就是說，代碼比storyboard牛逼啦。這種說法是這樣來的：許多IOS開發(fā)者，都是在Xib的引導(dǎo)下走向了這條不歸路的。在他們使用Xib的時(shí)候，他們開始入行，而后，開始大規(guī)模的接觸代碼布局UI，從而逐漸成為大牛了。其實(shí)我們心里肯定都有這種感覺嘛，用代碼寫才是程序員嘛，在那構(gòu)圖好像自己沒有工作一樣。 2.storyboard比代碼編寫更輕松。這是因?yàn)?#xff0c;許多代碼可以完成的事情，我們用storyboard真的可以很快的完成，而且storyboard的視圖布局（等等工具）可以讓我們更加清晰地知道我們的界面長成什么樣了。用代碼，So慢啦。但是如果

我是從代碼到storyboard兩種方式混合使用。就在兩個(gè)月前，我一直都沒有使用storyboard（一句呵呵，其實(shí)不是不使用，是不會(huì)！本人一直都是代碼，沒有使用過xib）.后來，也就是后來，萬惡的蘋果，搞出來6 和 6+ 這兩個(gè)玩意，呵呵，不行了，當(dāng)時(shí)覺得代碼適配那是多么麻煩的事情啊（現(xiàn)在兩個(gè)混用，發(fā)現(xiàn)，其實(shí)用純代碼也可以很方便的完成適配的），SO，我開始學(xué)習(xí)storyboard的使用。當(dāng)然，這也是我寫這個(gè)博客的原因，因?yàn)?#xff0c;我學(xué)習(xí)storyboard，卻Google不到合適的文章。不是英文我看不懂就是轉(zhuǎn)載轉(zhuǎn)載，看來看去還是那幾個(gè)，實(shí)在找不到自己想要的（大家可以試試哦）。

故事版（storyboard）

關(guān)于故事版的使用網(wǎng)上還是有很多資料可以找到的。這里不做詳細(xì)介紹。基本介紹如下：
如果您對(duì)IOS開發(fā)代碼熟悉卻對(duì)storyboard不熟悉，那就是說你和別人走的不一樣的路。IOS開發(fā)入門的規(guī)律來說，你一開始是學(xué)習(xí)xib的UI布局，然后你才開始使用UIView，UIViewController這樣的代碼布局。

在storyboard中，你可以拖拽UIImage，UIButton，UIView等等，用segue你就可以進(jìn)行界面的跳轉(zhuǎn)等。就是說，除了復(fù)雜的操作我們需要代碼（如復(fù)雜動(dòng)畫等），其他的，我們大都是可以用視圖進(jìn)行拖拽來完成的。詳細(xì)使用故事版希望大家可以Google。這里不再介紹。

Autolayout介紹

這是我們的學(xué)習(xí)重點(diǎn)（IOS8有兩個(gè)兩點(diǎn)，一個(gè)是自動(dòng)布局，一個(gè)是SizeClass，SizeClass此文末尾會(huì)有簡(jiǎn)單介紹，詳細(xì)介紹見以后博客）。是的，在6 和 6+出來后，我們需要自動(dòng)布局，當(dāng)然，我們可以使用代碼進(jìn)行設(shè)備判斷或者frame.size.width等方式進(jìn)行布局，下面會(huì)說到。在ios6蘋果團(tuán)隊(duì)就已經(jīng)放出了autolayout的使用版本，現(xiàn)在使用它，已經(jīng)比較成熟了的技術(shù)。
在故事版中，我們可以使用Autolayout，也可以不適用AutoLayout.不使用的時(shí)候，我們就是在“絕對(duì)布局”，使用的時(shí)候，我們就是在“自動(dòng)布局”。下面和大家介紹這兩個(gè)名稱。 如果大家對(duì)html比較熟悉的話，那么可能會(huì)使用到css中對(duì)div進(jìn)行布局的方法。那里使用的很多也就是自動(dòng)布局。我們可以這樣想想，全世界有各式各樣的瀏覽器，而網(wǎng)頁的代碼不可能對(duì)不同尺寸的瀏覽器都要做一個(gè)適配對(duì)不對(duì)。所以呢，html中就使用css的相對(duì)距離來計(jì)算相應(yīng)div的距離或者寬度。下圖是div中內(nèi)外間距：

而自動(dòng)布局中，我們使用的不再是如下的代碼：
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)]; view.backgroundColor = [UIColor clearColor]; [self.view addSubview:view];

相關(guān)故事版中的實(shí)現(xiàn)如圖：?我們使用絕對(duì)定位了這個(gè)紅色view的位置和大小為（10，100，100，100） 上面的代碼和故事版中，我們把一個(gè)試圖精確的定位在了一個(gè)位置。這種方式叫做“絕對(duì)布局”。autolayout中我們使用的“相對(duì)布局”，即相對(duì)某一個(gè)view的間距是多少。如下圖：

這里我們可以看圖片右邊都黑色View的英文描述，Leading Space ：125就是父View左邊距125px。Top Space 49就是紅色view上邊距49px。Equal Height 15px就是說黑色view與紅色view等高差了15px，還有一個(gè)就是確定自己的高度為82px，我們通過4個(gè)相對(duì)距離的確定了黑色view的位置。大家可以看到，這里沒有使用到代碼，我們確定了一個(gè)view的位置。使用的就是相對(duì)布局。在故事版的autolayout中，任何一個(gè)視圖，都有許多的相對(duì)布局的對(duì)像，如我們可以已父view為對(duì)像進(jìn)行布局，也可以依一個(gè)按鈕UIButton等等，只要是view，都可以作為你使用相對(duì)布局的對(duì)像。一般來說，我們確定一個(gè)view的位置使用相對(duì)布局，我們需要確定的就是寬度，高度，x距離，y距離這四個(gè)參數(shù)，而我們下面的學(xué)習(xí)乃至以后的使用，大部分都是圍繞這四個(gè)參數(shù)進(jìn)行下去的。

Autolayout的初步使用

使用Autolayout，我們首先來熟悉一下故事版中對(duì)autolayout支持的界面按鈕。
首先回到項(xiàng)目的開始，我們需要打開項(xiàng)目的autolayout支持。??

如圖，“Use Auto Layout”的溝溝我們選上。下面的“Use Size Classes”就是ios8里面的另一個(gè)神器，末尾會(huì)有剪短介紹。
我們右鍵將一個(gè)view拉到另一個(gè)view上面，就可以看到如下的視圖：

上圖中，我們右鍵黑色view不放，拉到紅色view上面，就出現(xiàn)了上面的選擇框。
這里是一個(gè)重點(diǎn)，我和大家詳細(xì)的說明每個(gè)選項(xiàng)的意思：

1.Horizontal Spacing:左右距離，就是本view和紅色view的左右水平距離 2.Vertical Spacing：上下距離，就是本view和紅色view的上下垂直距離 3.Top：上邊距，就是兩個(gè)view的上邊距的距離差 4.Center Y：垂直中點(diǎn)：就是和紅色view的Y軸方向的中點(diǎn) 5.Bottom：下邊距，就是兩個(gè)view的下邊距的距離差 6.Left：左邊距，就是兩個(gè)view的左邊距的距離差 7.Center X：水平中點(diǎn)：就是和紅色view的X軸方向的中點(diǎn) 8. Right：又邊距，就是兩個(gè)view的又邊距的距離差 9.Equal Widths：表示兩個(gè)view等寬 10.Equal Heights：表示兩個(gè)view等高

這個(gè)就是自動(dòng)布局的初始介紹！是不是感覺很激動(dòng)，相對(duì)距離本就是依靠這樣的左邊距，右邊距的差值決定的。我們管這個(gè)東西叫做“約束”。是的，每個(gè)約束就是一個(gè)對(duì)view位置的確定。我們利用定義多個(gè)約束，就可以確定一個(gè)view的具體高度、寬度、左邊距、右邊距等。（約束不可以少，少了view位置不確定，約束也不可以多，多了會(huì)報(bào)錯(cuò)，因?yàn)槲恢梦蓙y了嘛）

約束

當(dāng)我們使用約束的時(shí)候，是不能夠多也不能夠少的。多了就位置紊亂了，少了又不能確定view的位置。如下圖：

當(dāng)我們的約束過少的時(shí)候，會(huì)出現(xiàn)上面的右上方的紅色警告。我們點(diǎn)擊進(jìn)去可以看到詳細(xì)說明：

這里就詳細(xì)說了出現(xiàn)警告的原因。因?yàn)榧s束太少或者約束太多，都會(huì)出現(xiàn)上面的警告。所以這個(gè)時(shí)候，就要查看自己的約束是不是有問題拉（一開始會(huì)發(fā)現(xiàn)找到相應(yīng)的約束需要時(shí)間，比較熟練使用過后，會(huì)發(fā)現(xiàn)，基本上沒有太大的問題在添加約束的時(shí)候）
如果我們的約束添加正常的話，我們的view看起來會(huì)是這樣：

你會(huì)看到綠色。是的，如果約束添加正常的話，那么會(huì)正?？吹骄G色的。 如果約束已經(jīng)添加好，那么我們的view就已經(jīng)有一個(gè)位置在故事版中了，閉上上面的圖，紅色和黑色已經(jīng)在一個(gè)位置上面了。如果這個(gè)時(shí)候我們移動(dòng)了view，如下圖：

我們就會(huì)看到，有黃色的線條，這個(gè)就是故事版給我們的提醒，說view的現(xiàn)在位置和預(yù)期位置有了變動(dòng)，還會(huì)把變動(dòng)的數(shù)值給我們。

這個(gè)時(shí)候我們就可以這樣的操作來消除黃色：??我們可以在試圖區(qū)域的右下角看到四個(gè)按鈕，其中第三個(gè)打開就是上面的效果。我們可以點(diǎn)擊第一個(gè)Update Frames，這個(gè)時(shí)候我們的view就會(huì)按照已經(jīng)寫好的約束進(jìn)行重新排版。當(dāng)然如果我們發(fā)現(xiàn)位置變動(dòng)過后的界面效果更好，那么我們就可以點(diǎn)擊第二個(gè)選項(xiàng)Update Constraints。我們?cè)谧置嬉馑季涂梢钥吹?#xff0c;就是刷新“約束”，這樣就可以讓約束根據(jù)當(dāng)前的UI布局進(jìn)行相應(yīng)的數(shù)值變動(dòng)了。

常用的按鈕

我們可以通過鼠標(biāo)右鍵對(duì)view進(jìn)行約束的添加，也可以在這里添加約束：

我們點(diǎn)擊下面四個(gè)按鈕中的第一個(gè)就可以了。這里我們注意一個(gè)，需要選擇至少兩個(gè)view哦，不然相對(duì)對(duì)象找哪個(gè)啊！點(diǎn)擊下面的Add X Constraints就可以添加上約束了。
當(dāng)然，我們也可以只選擇一個(gè)view，就可以添加約束，其中另一個(gè)相對(duì)對(duì)象是xcode自己判斷的，就是在上面的四個(gè)按鈕中的第二個(gè)。這個(gè)不常使用，就不介紹了。比較的確不用嘛。我添加約束就是用鼠標(biāo)右鍵拉動(dòng)的，很快，其他的都不需要的。

約束級(jí)別

這個(gè)有一個(gè)需要提一下，可能大家在使用Autolayout的時(shí)候不會(huì)遇到，但是萬一遇到了呢？就是約束其實(shí)也是有級(jí)別的。這樣說，如果你是C，A讓你做這件事，B讓你做那件事，你該如何是好？這就和約束一個(gè)，如果有兩個(gè)不同的對(duì)象卻功能相同的約束加載在一個(gè)view上面，這個(gè)view該如何顯示呢？其實(shí)一般來說這樣就已經(jīng)報(bào)錯(cuò)了，報(bào)錯(cuò)就是這樣的操作是錯(cuò)誤的嘛。但是有一些特殊的情況，我就遇到過（具體大家可能會(huì)遇到，這里就不說了），是必須加兩個(gè)也有可能更多的相同功能的約束，這個(gè)時(shí)候如果約束有一個(gè)優(yōu)先級(jí)，那么編譯器不就知道該加載哪個(gè)約束了嘛！我們看這里：

?我們點(diǎn)中一個(gè)添加了約束的view，然后在右側(cè)可以點(diǎn)擊Edit按鈕看到上面的畫面。大家注意到Priority這個(gè)參數(shù)哦，這個(gè)就是優(yōu)先級(jí)。默認(rèn)都是1000.如果你那邊相對(duì)寬度而且，有不同的約束，可以改變這個(gè)值，用800，900，1000這樣的不同優(yōu)先級(jí)來表示。（開始不懂Autolayout，為了自己想要的實(shí)現(xiàn)，最后發(fā)現(xiàn)了這個(gè)功能?，F(xiàn)在可以不用這個(gè)優(yōu)先級(jí)的，下面會(huì)說到代碼:) ）

初步總結(jié)

通過上面的初步介紹和說明，大家可能已經(jīng)了解到了What is AutoLayout。是的， 在AutoLayout中，沒有了我們之前說的Frame的概念，相反，帶來的是相對(duì)位置。自己的高度可以通過相對(duì)位置來確定，也可以通過指定一個(gè)特定的值來確定。而且，我們的相對(duì)位置可以是屏幕上面的任何元素，如上下左右屏幕邊距及上下中間線或左右中間線等，也可以是我們自定義的一個(gè)view。這個(gè)view有了自己的位置之后，也可以當(dāng)做其他view的提供相對(duì)位置的對(duì)像。
上面只是初步的使用。詳細(xì)的使用也比較多，這里不寫了，不然不知道要寫多少呢。不過這里不寫不代表你就不會(huì)使用了。其實(shí)你只要簡(jiǎn)單的操作一個(gè)紅色藍(lán)色綠色的view，然后變化不同的位置多操作幾次，你就發(fā)現(xiàn)，已經(jīng)對(duì)Autolayout有了很大的使用了。這里在說一個(gè)，你在這個(gè)過程中會(huì)發(fā)現(xiàn)Autolayout的不足，就是不足夠表達(dá)你或者你那殘忍的設(shè)計(jì)師所設(shè)計(jì)出來的頁面效果。這個(gè)時(shí)候，就打開網(wǎng)頁回頭繼續(xù)看下面的文章的了......

深處

我們都知道，在計(jì)算機(jī)的世界里，我們操作的都是01010101...外表也就是我們寫的代碼。那么我們剛才使用的Autolayout是不是就只是界面拖動(dòng)元素那么簡(jiǎn)單呢？肯定不是的。 Autolayout后面也是代碼。如果大家使用過Git等代碼管理工具，會(huì)發(fā)現(xiàn)多人合作Autolayout會(huì)出錯(cuò)。git可是代碼管理工具，怎么會(huì)對(duì)Autolayout產(chǎn)生出錯(cuò)的提醒呢？因?yàn)锳utolayout也是代碼，他的后臺(tái)實(shí)現(xiàn)也是代碼。
這個(gè)時(shí)候，我知道了一個(gè)VFL的語言。就是很揪心的語言，就喝下面這樣：

NSDictionary *metrics = @{@"first":@(first), @"second":@(second), @"third":@(third), @"forth":@(forth)};NSString *vfl = @"|-0-[_labRiqi(first)]-1-[_labPingjun(second)]-1-[_labCankao(third)]-1-[_labResult]-0-|";NSString *vfl2 = @"V:|-0-[_labRiqi(_labPingjun,_labCankao,_labResult)]-0-|";[_cellView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl options:0 metrics:metrics views:dict1]];[_cellView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:0 metrics:metrics views:dict1]];

vfl語言就和上面的這樣，半死不活的。使用VFL和界面上面添加約束是一樣的效果，就是復(fù)雜有一些，大家可以谷歌。但是我用了很久，原因很簡(jiǎn)單的了，如果使用Autolayout那么的布局，完成不了設(shè)計(jì)師大神設(shè)計(jì)的界面?？墒俏矣窒胗?#xff0c;我覺得不用布局僅僅使用相對(duì)位置是網(wǎng)頁端的專利，沒有想到手機(jī)端Native app也可以使用到。所以我用的就是上面的VFL語言的代碼進(jìn)行相對(duì)布局。
當(dāng)然了，大家對(duì)于上面的VFL語言，到GOOGLE上面查看一下就行了。因?yàn)槲矣懈玫臇|西送給你們，不要在用這看到就覺得是外星人般的VFL了。
額外說明一下：本來想重點(diǎn)說明這個(gè)的，但是由于大家可能以后都不用VFL了，就剪短的說一下了。我們?cè)诠适掳胬锩娣胖玫膙iew等，用Autolayout添加約束和用代碼添加約束是不能夠共存的。就是說，如果已經(jīng)在故事版中添加約束，那么就不要想著通過IBOutlet后在通過代碼修改約束的了。我試過，花了很長時(shí)間，沒有成功。我不知道是不是可以走得通，但是我沒有走通，網(wǎng)上也是在找不到相關(guān)的資料。

Masonry神器的到來

這里寫的文字最少。Masonry是一個(gè)Github上面托管的項(xiàng)目。這里不對(duì)Masonry進(jìn)行介紹（我們已經(jīng)習(xí)慣了代碼而不是故事版的UI，這個(gè)類庫可以幫我們使用少量代碼完成約束的添加），如果以后心情好會(huì)在以后的博客里面進(jìn)行說明。大家快去Github上面查看吧...

此文后面會(huì)根據(jù)不同情況有更新。如果轉(zhuǎn)載，請(qǐng)加上源頭鏈接哦:)，不能因?yàn)閹滋帥]有的更新而誤害了他人啊......

本文用的markdown語法。真希望CSDN可以支持Markdown，現(xiàn)在的編輯框太丑了，一點(diǎn)也不好用。這些年沒有變化，真不知道什么勇氣堅(jiān)持到現(xiàn)在！

總結(jié)

以上是生活随笔為你收集整理的Autolayout使用详细介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。