使用Storybord或Xib 的 AutoLayout入門晉階


AutoLayout晉階

AutoLayout是一種基於約束的,描述性的布局系統。是一種相對性布局,區別之前的Autoresizing 來說,它的擴張性更大。在iOS6中發布的一種布局方法,在iOS7中官方熱烈推崇使用AutoLayout進行布局。

 

想使用AutoLayout需要打開一個開關:(在Xcode4.6以上版本默認選中)

 

  1. 打開storybord或xib

                       

點擊后,會在中間的編輯區域就會顯示。

 

在下方的幾個按鈕是Xcode4.6以上版本才出現的。

 

以上按鈕是用Autolayout可視化布局按鍵

 

 :多視圖校准約束布局按鈕

:單視圖約束布局按鈕

:自動約束布局按鈕

 

在iOS7里控制器根視圖的兩條布局線

 

開發過iOS7的人都知道,在iOS7的狀態欄是沒有那20點,都是視圖狀態條一體化,所以官方提供了兩條參考線,為了解決iOS6&7屏幕適配問題。

可以點擊它,觀看他們在視圖中是在那里布線,如下:

 

Top Layout Guide

這個是用具在iOS7中沒有狀態的20px中使用的一條約束線用法,按緊ctrl鍵,鼠標點擊Top Layout Guide 鏈接對於視圖如下操作

 

 

 

horizontal spacing:水平間距

vertical spacing:垂直間距

 

因為Top的參考線在上面,選中垂直間距。

 

操作后,在iOS7會空出狀態欄的20px高度。在iOS6中則約束不變。

在視圖中出現對應的垂直參考線,可以雙擊或在右側屬性欄中進行設置。

 

 

或者

 

1選中約束

2點擊右側屬性欄中第4個選項卡

3進行對約束的設置

約束屬性

Relation: 約束模式

     Equal:相等(常用

     Less Tran or Equal: 小於等於 <=

     Greater Tran or Equal: 大於等於 >=

Constant:約束距離,也可以說是間距(常用

     Standard:標准

Priority:約束優先級(常用

假設有兩條相同的類型的約束,一條約束優先級1000的,另一條是800的,它會優先執行1000的那條約束。

Placeholder: 占位符

 

 

在這里可以看得到約束不完整,

  1. 點擊上方剪頭可以查看錯誤信息
  2. 可以查看在此視圖中有多少約束

約束成立規則:

  1. 寬高要需要固定
  2. 在垂直和水平中,最少有一條間距約束

 

例子:假設我有一種需求:

  1. Button於根視圖左側要有10px
  2. Button於根視圖上方要有20px
  3. 寬高不拉伸
  4. 在iOS6&7適配

 

那么已經垂直上方有一條約束,雙擊那一條約束,將約束間距設置成20,如下圖:

 

 

 

 

1.選中Button

2.點擊

3.點擊水平左側添加一條約束(約束的添加於Autoresizing,用法一樣,固定你需要想固定的位置,比Autoresizing,更好的地方是可以約束固定的位置大小尺寸)

4.創建約束

 

那么就成功創建了一條約束。約束線的顏色問題,橘色:代表約束有問題,藍色:代表約束已成立。

如上垂直約束線設置,將約束間距設置成20,如下

 

 

固定尺寸寬高

 

 

1.選中Button

2.點擊

3. 固定尺寸寬高,防止iPhone4,5尺寸不拉伸或壓縮

4.創建約束

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM