iOS開發_UI_AutoLayout

1、 介紹StoryBoard/Xib中， 有關AutoLayout一些基本用法

新建一個工程的時候， 默認AutoLayout 和 Size Classes 是開啓的， 以下圖：

 

當開啓了AutoLayout， 就能夠看到 StoryBoard / Xib 下方會出現四個按鈕， 以下圖：

選中第一個按鈕， 會出現一個菜單， 以下圖：

Leading Edges: 兩個視圖的左側邊緣對齊

Trailing Edges: 兩個視圖的右側邊緣對齊

Top Edges: 兩個視圖的頂部邊緣對齊

 

Bottom Edges: 兩個視圖的底部邊緣對齊

Horizontal Centers：兩個視圖的水平中心對齊

Vertical Centers：兩個視圖的垂直中心對齊

Baselines：這個沒有用過 -.-!!!

Horizontal Center in Container: 選中視圖相對於父視圖水平居中

Vertical Center in Container: 選中視圖相對於父視圖垂直居中

 

 選中第二個按鈕， 會出現一個菜單， 以下圖：

 

Width: 約束一個視圖的寬度

Height: 約束一個視圖的高度

Equal Widths: 約束兩個視圖等寬

Equal Heights: 約束兩個視圖登高

Aspect Ratio: 約束一個視圖的寬高比例, 視圖會按照給出的寬高比縮放

 

 選中菜單欄, 也能夠實現上面提到過的約束, 以下圖:

 

添加完約束以後, 若是約束不合適, 咱們能夠經過以下方法清除一個視圖的約束

選中約束不合理的視圖, 並點擊第三個按鈕

點擊按鈕以後, 會出現以下的菜單, 選擇 Clear Constrains.

注意: 要選擇紅色區域的 Clear Constrains 選項, 紅色區域表明清除選中視圖的約束, 綠色區域是對 當前整個 ViewController 或 當前整個 Xib 所作的操做, 若是選擇綠色區域的 Clear Constrains 選項, 則會清除當前 ViewController 或 Xib 的全部約束.

 

咱們能夠經過以下方法修改一個視圖的約束

選中約束不合理的視圖,並在右側工具欄中選擇第五個選項, 會出現以下圖所示的狀況

綠色區域標識着當前選中視圖的全部約束, 藍色區域標識着當前選中視圖的約束詳情.

 

當咱們要修改約束的時候, 能夠直接選擇 Edit 按鈕來修改約束

例如咱們要修改綠色視圖的寬度約束, 單擊 Edit 按鈕後, 會出現以下圖所示的菜單.

在這裏咱們能夠修改約束的值, 以及約束的優先級等.

 

另一種修改約束的方法, 選中約束不合理的視圖後, 會出現該視圖的全部約束, 咱們選中但願修改的約束, 此時咱們能夠在右側綠色區域內修改約束.

選中一個約束以後， 也可直接按 delete 鍵刪除約束

 

 

 

 

2、 AutoLayout Demo

1. 等寬等間距視圖

效果圖以下: 視圖與左側邊緣爲15, 各個視圖之間的間距爲15.

 

 

新建一個工程, 打開StoryBoard, 拖4個UIView到ViewController中, 拜訪的位置差很少就行, 大小132*132, 以下圖:

 

 接下來就開始添加約束了, 選中紅色的視圖, 而後選擇下方的第一個按鈕, 接下來選擇垂直居中, 以下圖:

 

接下來約束紅色視圖與左側邊緣的間距爲15, 以下圖

 

 

紅色視圖先暫時約束到這裏, 接下來約束綠色視圖距離右側邊緣爲15, 以下圖:

 

作完以上的步驟, 紅色視圖的約束爲 在父視圖中垂直居中, 而且距左邊15, 綠色視圖的約束爲距離右側邊緣15. 接下來依次約束每個視圖的寬高縮放比例, 以下圖:

 

接下來,咱們須要將這4個視圖約束爲等寬,登高. 以下圖: 

 

接下來約束的是兩個視圖之間的間距, 以下圖:  

注意: 約束完紅色和橙色視圖後, 依次重複下圖步驟, 約束橙色和黃色, 黃色和綠色視圖

 

水平間距約束完成以後, 約束的數值默認爲當前兩視圖的間距, 拿下圖的紅色和橙色視圖爲例, 選中紅色或者橙色任意一個視圖, 咱們能夠看到紅色和橙色視圖中下方有一個高亮的約束, 也就是當前我選中的約束, 由於咱們每個水平間距都要調整爲15, 因此咱們須要選擇水平堅定約束, 並在右側將其改成15, 以下圖:

注意: 依次去查看橙色和黃色, 以及黃色和綠色的水平間距約束是否爲15, 若不是15, 則將其改成15

 

接下來, 咱們須要讓橙色,黃色,綠色視圖 與 紅色視圖永遠保持在一個水平線上, 以下圖:

 

好啦, 終於到最後一步啦, 同時選中4個視圖, 按住Command + Option + '=', 按住這三個組合鍵, 查看一下效果吧

 

總算是約束完成了, 如今能夠用不一樣的模擬器跑一下程序了, 看看咱們的約束是否成功了呢.  不管是iPhone5 仍是 iPhone6 乃至 iPhone6 Plus, 不管是橫屏仍是豎屏, 效果是否是都很不錯呢? 

這個小Demo就先寫到這裏了. 接下來還會有更多內容, QQ2042169059, 若是我哪裏寫錯了, 還請大神指點!