AutoLayout 使用之storyboard演示（入門篇）

      AutoLayout 是iOS6的新特性，不少人都選擇不去使用，由於不少app都不須要支持旋轉，並且設備的尺寸就那幾個，很好判斷，可是隨着設備的尺寸不斷增多，ios8推出了新方法 Size Classes完全的解決了適應屏幕的問題。雖然Size Classes 是 iOS 8 的功能， 可是Xcode 6 對它作了一點向後兼容的處理，能夠有限度地支持 iOS 7 等版本。可是 Size Classes 必需要與AutoLayout 配合使用才能達到真正想要的效果，因此先學習AutoLayout是頗有必要的！

這篇博客只要介紹用storyborad來實現autoLayout， VFL來實現auto layou 之後也會說到

1、AutoLayout 介紹

      Auto Layout 是一種自動佈局，爲何說是自動佈局呢，由於它和以往的佈局方式不一樣（之前的方式按照 frame 來賦值），Auto Layout 是根據某一個view 和 另n（n >= 1）個view 的上，下，左，右的距離來定那一個view的位置的，想要使用 Auto Layout 必須摒棄老的frame 的觀念，否則，你永遠也搞不定 Auto Layout。

     有一些人可能會說 Auto Layout 把界面弄得很亂，剛佈置好，結果兩個view 的距離又變了，那是由於你的約束沒有設置好，沒設置好，固然會有問題，因此就不要抱怨啦。

2、AutoLayout 使用

關於用VFL實現下述佈局請看 AutoLayout 使用之代碼實現(VFL)

（1）界面需求以及效果圖

    下面用一個簡單地例子還實現autoLayout，使得咱們的工程在不一樣尺寸的設備上界面不會亂，並且旋轉也不會亂（此工程基於xcode6），先解說一下這個圖，中間的模塊是始終居中顯示的，黃色和綠色的圖是沿y軸中心（virtical center）的方向顯示，並和背景View 的左邊或者右邊的大小值固定，「紅」「橙」「藍」「紫」 這四個圖的約束關係爲：和背景View的左邊或右邊的約束成固定值，離最近的上方或下方的View的成固定值：先看一下最後的效果圖：

     運行在3.5inch 的機子 和4.0英寸的機子：

            

運行在4.7英寸以及5.5英寸的機子

        

再看一個在4英寸上旋轉的圖：

你們可能以爲很差看，不要緊。這個是約束的緣由，適當修改約束他會變得好看的！若是怎麼都修改都很差看，那沒辦法了，仍是用代碼動態改變吧！下面詳細的介紹怎麼實現這個過程的

（2）storyBoard中的各類約束介紹

下面只介紹和本例子有關的約束，但這些約束就是咱們用得最多的約束！其餘約束你們能夠邊練習邊琢磨是什麼。

下面的這些東西要選中某個View後才能選擇！

一、有關於「中」的顯示：

二、本身（self）

第一個框爲離本身最近的View的距離，很經常使用！

假若有一個以下佈局爲：

    這樣的關係用簡單的 方式表示爲：[bottom] - [self] - [label]，那麼，離self 左邊最近的View爲 button ， 離self右邊最近的view爲 lable，上圖中的第一個框就是讓你填選中的view（self）離最近的View的距離，若是self 的右邊沒有View ， 那麼，這個距離就是self 到 根視圖（self.superView）的距離。

    上圖第二個框是給選中的View設置固定的寬度和高度，當添加好約束後，點擊第三個框「Add Constranints」添加約束。

加好約束後，能夠看到View Contraller Scence 處多了不少的約束

這些約束是能夠修改和刪除的，你能夠直接點擊某一個約束進行刪除，或選中某個約束後在下圖紅框中修改：

（3）動手實現上例約束

     首先，新建一個工程，由於xcode6的View都很大，並且在這裏咱們不介紹 Size Classes,只介紹autoLayout，不妨先將View的視圖修改爲4inch的視圖，以及將 size Classes 在選項中」去勾「，如圖：

」去勾「，將size classes的」勾「 去掉

咱們在這幾個View中加上7個小視圖，這幾個視圖的寬高都設置成65 ，調節各自的背景顏色，並按順序擺放， 如圖所示：

咱們先看一下不添加任何約束用3.5inch 4.0inch 4.7inch 和5.5inch模擬器運行的圖：

         

再看一下在4.0 inch 下旋轉的圖：

這顯然不是咱們想要的

      Xcode6中加入了一個預覽的好動西。當你在佈局的時候，他能夠隨着你的佈局讓你預覽效果，爲了更好地看到本身佈局是否準確，在咱們佈局的時候能夠利用它，如圖切換到預覽模式：

當咱們不添加任何約束時的預覽圖爲：

點擊下面的「+」 還能夠查看不一樣尺寸的設備的預覽圖

      如今咱們先在每個view加上長和寬的約束，使他無論在何時都爲一個邊長固定的正方形，以中間的view爲例子，其餘的同樣加。

點擊中間的View，爲其添加長和寬的約束，以下圖，其餘的View同樣加：

加好後你的預覽圖也變了：

      點擊View 能夠看到那個View的下方多了一個長和寬的約束的約束，視圖中的View多了兩條橙色的線，這個線分別指向view的長和寬。橙色線出現表明你的約束不徹底，代表你的約束太少，在不一樣的設備中你的View得不到一個滿意的約束，你的View會隨着設備的尺寸動起來，還須要繼續添加。

咱們用如上的方法添加剩餘其餘的view，使其長度和寬度都爲65，效果圖以下：

     如今咱們讓中間的那一個View 居中顯示，選擇中間的view，以下圖：

這邊的「0」 指的是中間，些其餘的數字會左右，上下移動，你們能夠試試

添加好約束後，預覽圖也發生了變化:

      咱們看到，中間的view如今已經居中顯示了，並且藍色的線出現了（表示約束徹底），只是有一個虛線框在咱們視圖的下面，這表明了咱們在容器中佈局的位置不對，應該將視圖移動到虛線框中，這裏咱們先無論他，最後在修改，或不改也無妨。

      如今咱們來看黃色的View，咱們想讓他和中間的視圖在一條水平線上（垂直居中），且它離容器左邊的距離爲一個固定值。如今咱們選中它，以下圖：

   

讓他垂直居中，以及離根視圖左邊爲 13，效果圖以下：

讓綠色的View 和黃色的View同樣 垂直居中，以及離根視圖右邊的距離爲13：

 

預覽圖以下：

下面咱們來實現紅色的view 和橙色的view 讓他離下面的最近的view 的距離以及根視圖的左邊或右邊的位置成固定值：

紅色的View：

橙色的View：

看一下預覽圖：

咱們在實現藍色的View和 紫色的View 的約束，使得他們 和離得最近的上面的view 以及根視圖造成一個約束

藍色的view：

紫色的View：

效果圖以下：

到這裏，咱們的約束就所有添加好了，最好來解決以前說過的位置不對的問題，你們會發現咱們的工程莫名其妙的出現了不少的警告：

點進左邊紅框的警告區域：

點進裏面小的警告，選擇「Fix Misplacement」這樣警告就會消失了，這個警告是告訴咱們,咱們在放視圖的時候位置和咱們的約束時的位置不同。

點擊後，視圖的位置會改變，可是約束的位置不會變.運行程序，獲得了和最上面同樣的效果！

這個只是一個入門級別的，複雜一點的就拼拼湊湊就行了。

下一篇博客將介紹怎麼用代碼的形式（VLF）實現上述的佈局，這種佈局方式雖然不方便（要寫），可是卻能更好的添加！