iOS界面佈局之二——初識autolayout佈局模型

iOS界面佈局之二——初識autolayout佈局模型

1、引言

     在上一篇博客中介紹了傳統的佈局方式：autoresizing。隨着iphone型號的愈來愈多，屏幕的標準也更加多樣化，經過autoresizing已經不能知足開發的需求，而進行兩套佈局或者動態代碼控制又大大增長了開發者的工做量，autolayout的出現拯救個這一切，它讓動態佈局變的十分簡單便捷。

    autoresizing介紹：http://my.oschina.net/u/2340880/blog/423357。

2、autolayout的設計思想

    正如storyboard的設計目的是爲了讓開發者將更多的精力投入到邏輯實現而不是界面佈局同樣。autolayout的設計思想是讓開發者將佈局上更多的精力放在控件關係上而不是座標。咱們只須要關心控件之間的擺放關係，而並不須要關心這是如何實現的。所以你使用autolayout進行佈局時，就是在添加一個一個的約束。控件與控件之間的約束，控件與父視圖之間的約束。

一、瞭解幾種約束

    點擊xcode的storyboard文件，在xcode的導航欄上點擊Edito，而後選擇Pin，能夠看到如圖，其中是能夠添加的約束類型。

Width：對視圖寬度的約束

Height：對視圖高度的約束

Horizontal Spacing：對視圖間水平距離的約束

Vertical Spacing：對視圖間垂直距離的約束

Leading Space to Superview：與父視圖左邊界的約束

Trailing Space to Superview：與父視圖右邊界的約束

Top Space to Superview：與父視圖上邊界的約束

Bottom Space to Superview：與父視圖下邊界的約束

Widehs Equally：視圖等寬約束

Heights Equally：視圖等高約束

二、網上的一個很簡單的約束例子

    瞭解了上面的幾種約束，如今咱們來實現一個效果，借用網上關於autolayout自動佈局的一個小例子。咱們在storyboard中拖入三個label，使它們以下效果：

而後咱們將屏幕橫過來，會發現這時的效果並非咱們想獲得的結果：

在進行添加約束以前，咱們先來理清這三個視圖之間的關係，將上面兩個視圖編號爲1.2，下面那個視圖編號爲3.

（1）1和2的寬和高相等

（2）1距離父視圖左邊20px

（3）2距離父視圖右邊20px

（4）3距離父視圖左邊20px，右邊20px

（5）1和2水平間距20px

（6）1與3垂直間距20px

（7）1和2距離父視圖上邊距50px

（8）3距離父視圖下邊距20px

（9）3與1和2的高度同樣

經過上面的約束，全部視圖的位置都將被相對的固定，下面咱們只須要按照順序一一添加便可。

（1）選中1和2視圖（按住cmd鍵能夠多選），而後點擊Editor->Pin以後選擇Widehs Equally，重複上面的過程，選擇Heights Equally。咱們會看到以下的效果：

幾點注意：

*線是橙色表明警告，咱們沒有添加足夠的約束來肯定位置或者約束有矛盾。

*若是線的中間顯示的不是等號，而是數字，則是由於視圖1和2的尺寸設置的不等，約束有矛盾。

（2）選中1.重複上面步驟，選擇Leading Space to Superview。這時1的左邊又會增長一條線：

點擊這條線，在右邊的設置去將約束值設置爲20：

（3）重複上面步驟，選中視圖2，添加Trailing Space to Superview約束。

（4）選中視圖3，重複上面步驟。

（5）選中1和2，添加Horizontal Spacing，設置爲20.

（6）選中1和3，添加Vertical Spacing，設置爲20.

（7）爲1和2分別添加Top Space to Superview約束。

（8）爲3添加Bottom Space to Superview約束。

（9）選中1和3，添加Heights Equally約束。

上面的過程雖然繁瑣，可是邏輯性十分清晰，這時你會發現全部的線都變成了藍色，約束已經添加完整，咱們再次運行後橫屏，效果以下：

這就是咱們想要的結果了。

三、自動佈局的幾種對其方式

    在xcode導航的Editor菜單中，還有一個子菜單，Align，這裏面的選項能夠爲控件添加對其約束：

Left Edges：控件左對齊

Right Edges：控件右對齊

Top Edges：控件上對齊

Bottom Edges：控件下對齊

Horizontal Centers：控件水平中心對齊

Vertical Centers：控件垂直水平對齊

Horizontal Center in Container：控件與其父視圖水平中心對齊

Vertical Center in Container：控件與其父視圖垂直中心對齊

3、幾點小感悟

     到此爲止，基本上已經可使用autolayout自動佈局解決複雜的佈局需求了，可是切記，正式由於aotulayout的強大使它會隱藏更多的坑，下面是個人幾點感悟，再次分享：

一、autolayout的精髓在於足夠多的約束，autolayout之因此比autoresizing強大，就在於其佈局的精確性，而精確性正是由約束來提供的。

二、切莫多此一舉，矛盾的約束會使xcode暈掉，因此在添加約束前，我建議將試圖間的佈局關係先整理出來。

三、應該轉變你的思路，若是你已經習慣了使用CGRect、Point等傳統的座標佈局模式，那麼你應該稍微轉變一下，autolayout倡導的是一個相對的概念，你須要將更多的關注放在視圖間的關係，好比A和B距離10，A和C右對齊等。具體的座標會有autolayout幫你算。

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592