Autolayout使用详细介绍
關于Autolayout的初步介紹
說道Autolayout，我也是在iPhone 6 And 6+ 出來之后才開始關注的。我是一個純代碼程序者之前。
那個時候有聽說到Xib和Storyboard（現在Xib已經使用的少了，下面直接說storyboard。其實Xib和storyboard只是父子的關系嘛），我開始在網上查找資料，網上給的解釋我總結給大家如下：
我是從代碼到storyboard兩種方式混合使用。就在兩個月前，我一直都沒有使用storyboard（一句呵呵，其實不是不使用，是不會！本人一直都是代碼，沒有使用過xib）.后來，也就是后來，萬惡的蘋果，搞出來6 和 6+ 這兩個玩意，呵呵，不行了，當時覺得代碼適配那是多么麻煩的事情啊（現在兩個混用，發現，其實用純代碼也可以很方便的完成適配的），SO，我開始學習storyboard的使用。當然，這也是我寫這個博客的原因，因為，我學習storyboard，卻Google不到合適的文章。不是英文我看不懂就是轉載轉載，看來看去還是那幾個，實在找不到自己想要的（大家可以試試哦）。
故事版（storyboard）
關于故事版的使用網上還是有很多資料可以找到的。這里不做詳細介紹。基本介紹如下：
如果您對IOS開發代碼熟悉卻對storyboard不熟悉，那就是說你和別人走的不一樣的路。IOS開發入門的規律來說，你一開始是學習xib的UI布局，然后你才開始使用UIView，UIViewController這樣的代碼布局。
在storyboard中，你可以拖拽UIImage，UIButton，UIView等等，用segue你就可以進行界面的跳轉等。就是說，除了復雜的操作我們需要代碼（如復雜動畫等），其他的，我們大都是可以用視圖進行拖拽來完成的。詳細使用故事版希望大家可以Google。這里不再介紹。
Autolayout介紹
這是我們的學習重點（IOS8有兩個兩點，一個是自動布局，一個是SizeClass，SizeClass此文末尾會有簡單介紹，詳細介紹見以后博客）。是的，在6 和 6+出來后，我們需要自動布局，當然，我們可以使用代碼進行設備判斷或者frame.size.width等方式進行布局，下面會說到。在ios6蘋果團隊就已經放出了autolayout的使用版本，現在使用它，已經比較成熟了的技術。
在故事版中，我們可以使用Autolayout，也可以不適用AutoLayout.不使用的時候，我們就是在“絕對布局”，使用的時候，我們就是在“自動布局”。下面和大家介紹這兩個名稱。 如果大家對html比較熟悉的話，那么可能會使用到css中對div進行布局的方法。那里使用的很多也就是自動布局。我們可以這樣想想，全世界有各式各樣的瀏覽器，而網頁的代碼不可能對不同尺寸的瀏覽器都要做一個適配對不對。所以呢，html中就使用css的相對距離來計算相應div的距離或者寬度。下圖是div中內外間距：
而自動布局中，我們使用的不再是如下的代碼：
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 1)]; view.backgroundColor = [UIColor clearColor]; [self.view addSubview:view];
相關故事版中的實現如圖：?我們使用絕對定位了這個紅色view的位置和大小為（10，100，100，100） 上面的代碼和故事版中，我們把一個試圖精確的定位在了一個位置。這種方式叫做“絕對布局”。autolayout中我們使用的“相對布局”，即相對某一個view的間距是多少。如下圖：
這里我們可以看圖片右邊都黑色View的英文描述，Leading Space ：125就是父View左邊距125px。Top Space 49就是紅色view上邊距49px。Equal Height 15px就是說黑色view與紅色view等高差了15px，還有一個就是確定自己的高度為82px，我們通過4個相對距離的確定了黑色view的位置。大家可以看到，這里沒有使用到代碼，我們確定了一個view的位置。使用的就是相對布局。在故事版的autolayout中，任何一個視圖，都有許多的相對布局的對像，如我們可以已父view為對像進行布局，也可以依一個按鈕UIButton等等，只要是view，都可以作為你使用相對布局的對像。一般來說，我們確定一個view的位置使用相對布局，我們需要確定的就是寬度，高度，x距離，y距離這四個參數，而我們下面的學習乃至以后的使用，大部分都是圍繞這四個參數進行下去的。
Autolayout的初步使用
使用Autolayout，我們首先來熟悉一下故事版中對autolayout支持的界面按鈕。
首先回到項目的開始，我們需要打開項目的autolayout支持。??
如圖，“Use Auto Layout”的溝溝我們選上。下面的“Use Size Classes”就是ios8里面的另一個神器，末尾會有剪短介紹。
我們右鍵將一個view拉到另一個view上面，就可以看到如下的視圖：
上圖中，我們右鍵黑色view不放，拉到紅色view上面，就出現了上面的選擇框。
這里是一個重點，我和大家詳細的說明每個選項的意思：
這個就是自動布局的初始介紹！是不是感覺很激動，相對距離本就是依靠這樣的左邊距，右邊距的差值決定的。我們管這個東西叫做“約束”。是的，每個約束就是一個對view位置的確定。我們利用定義多個約束，就可以確定一個view的具體高度、寬度、左邊距、右邊距等。（約束不可以少，少了view位置不確定，約束也不可以多，多了會報錯，因為位置紊亂了嘛）
約束
當我們使用約束的時候，是不能夠多也不能夠少的。多了就位置紊亂了，少了又不能確定view的位置。如下圖：
當我們的約束過少的時候，會出現上面的右上方的紅色警告。我們點擊進去可以看到詳細說明：
這里就詳細說了出現警告的原因。因為約束太少或者約束太多，都會出現上面的警告。所以這個時候，就要查看自己的約束是不是有問題拉（一開始會發現找到相應的約束需要時間，比較熟練使用過后，會發現，基本上沒有太大的問題在添加約束的時候）
如果我們的約束添加正常的話，我們的view看起來會是這樣：
你會看到綠色。是的，如果約束添加正常的話，那么會正常看到綠色的。 如果約束已經添加好，那么我們的view就已經有一個位置在故事版中了，閉上上面的圖，紅色和黑色已經在一個位置上面了。如果這個時候我們移動了view，如下圖：
我們就會看到，有黃色的線條，這個就是故事版給我們的提醒，說view的現在位置和預期位置有了變動，還會把變動的數值給我們。
這個時候我們就可以這樣的操作來消除黃色：??我們可以在試圖區域的右下角看到四個按鈕，其中第三個打開就是上面的效果。我們可以點擊第一個Update Frames，這個時候我們的view就會按照已經寫好的約束進行重新排版。當然如果我們發現位置變動過后的界面效果更好，那么我們就可以點擊第二個選項Update Constraints。我們在字面意思就可以看到，就是刷新“約束”，這樣就可以讓約束根據當前的UI布局進行相應的數值變動了。
常用的按鈕
我們可以通過鼠標右鍵對view進行約束的添加，也可以在這里添加約束：
我們點擊下面四個按鈕中的第一個就可以了。這里我們注意一個，需要選擇至少兩個view哦，不然相對對象找哪個啊！點擊下面的Add X Constraints就可以添加上約束了。
當然，我們也可以只選擇一個view，就可以添加約束，其中另一個相對對象是xcode自己判斷的，就是在上面的四個按鈕中的第二個。這個不常使用，就不介紹了。比較的確不用嘛。我添加約束就是用鼠標右鍵拉動的，很快，其他的都不需要的。
約束級別
這個有一個需要提一下，可能大家在使用Autolayout的時候不會遇到，但是萬一遇到了呢？就是約束其實也是有級別的。這樣說，如果你是C，A讓你做這件事，B讓你做那件事，你該如何是好？這就和約束一個，如果有兩個不同的對象卻功能相同的約束加載在一個view上面，這個view該如何顯示呢？其實一般來說這樣就已經報錯了，報錯就是這樣的操作是錯誤的嘛。但是有一些特殊的情況，我就遇到過（具體大家可能會遇到，這里就不說了），是必須加兩個也有可能更多的相同功能的約束，這個時候如果約束有一個優先級，那么編譯器不就知道該加載哪個約束了嘛！我們看這里：
?我們點中一個添加了約束的view，然后在右側可以點擊Edit按鈕看到上面的畫面。大家注意到Priority這個參數哦，這個就是優先級。默認都是1000.如果你那邊相對寬度而且，有不同的約束，可以改變這個值，用800，900，1000這樣的不同優先級來表示。（開始不懂Autolayout，為了自己想要的實現，最后發現了這個功能。現在可以不用這個優先級的，下面會說到代碼:) ）
初步總結
通過上面的初步介紹和說明，大家可能已經了解到了What is AutoLayout。是的， 在AutoLayout中，沒有了我們之前說的Frame的概念，相反，帶來的是相對位置。自己的高度可以通過相對位置來確定，也可以通過指定一個特定的值來確定。而且，我們的相對位置可以是屏幕上面的任何元素，如上下左右屏幕邊距及上下中間線或左右中間線等，也可以是我們自定義的一個view。這個view有了自己的位置之后，也可以當做其他view的提供相對位置的對像。
上面只是初步的使用。詳細的使用也比較多，這里不寫了，不然不知道要寫多少呢。不過這里不寫不代表你就不會使用了。其實你只要簡單的操作一個紅色藍色綠色的view，然后變化不同的位置多操作幾次，你就發現，已經對Autolayout有了很大的使用了。這里在說一個，你在這個過程中會發現Autolayout的不足，就是不足夠表達你或者你那殘忍的設計師所設計出來的頁面效果。這個時候，就打開網頁回頭繼續看下面的文章的了......
深處
我們都知道，在計算機的世界里，我們操作的都是01010101...外表也就是我們寫的代碼。那么我們剛才使用的Autolayout是不是就只是界面拖動元素那么簡單呢？肯定不是的。 Autolayout后面也是代碼。如果大家使用過Git等代碼管理工具，會發現多人合作Autolayout會出錯。git可是代碼管理工具，怎么會對Autolayout產生出錯的提醒呢？因為Autolayout也是代碼，他的后臺實現也是代碼。
這個時候，我知道了一個VFL的語言。就是很揪心的語言，就喝下面這樣：
vfl語言就和上面的這樣，半死不活的。使用VFL和界面上面添加約束是一樣的效果，就是復雜有一些，大家可以谷歌。但是我用了很久，原因很簡單的了，如果使用Autolayout那么的布局，完成不了設計師大神設計的界面。可是我又想用，我覺得不用布局僅僅使用相對位置是網頁端的專利，沒有想到手機端Native app也可以使用到。所以我用的就是上面的VFL語言的代碼進行相對布局。
當然了，大家對于上面的VFL語言，到GOOGLE上面查看一下就行了。因為我有更好的東西送給你們，不要在用這看到就覺得是外星人般的VFL了。
額外說明一下：本來想重點說明這個的，但是由于大家可能以后都不用VFL了，就剪短的說一下了。我們在故事版里面放置的view等，用Autolayout添加約束和用代碼添加約束是不能夠共存的。就是說，如果已經在故事版中添加約束，那么就不要想著通過IBOutlet后在通過代碼修改約束的了。我試過，花了很長時間，沒有成功。我不知道是不是可以走得通，但是我沒有走通，網上也是在找不到相關的資料。
Masonry神器的到來
這里寫的文字最少。Masonry是一個Github上面托管的項目。這里不對Masonry進行介紹（我們已經習慣了代碼而不是故事版的UI，這個類庫可以幫我們使用少量代碼完成約束的添加），如果以后心情好會在以后的博客里面進行說明。大家快去Github上面查看吧...
此文后面會根據不同情況有更新。如果轉載，請加上源頭鏈接哦:)，不能因為幾處沒有的更新而誤害了他人啊......
本文用的markdown語法。真希望CSDN可以支持Markdown，現在的編輯框太丑了，一點也不好用。這些年沒有變化，真不知道什么勇氣堅持到現在！
總結
以上是生活随笔為你收集整理的Autolayout使用详细介绍的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 900G虚幻4场景合集三维游戏CG环境渲
- 下一篇： 制作个人网站 之 人生进度条