ios8 iOS Auto Layout

引言:

Auto Layout是iOS6發佈後引入的一個全新的佈局特性,其目的是彌補以往autoresizing在佈局方面的不足之處,以及將來面對更多尺寸適配時界面佈局能夠更好的適應.
要徹底掌握Auto Layout是一件很是消耗精力的事情,須要大量的實踐,而且在根本上面,理解其如何使用,若是要全面的介紹Auto Layout和使用場景估計幾篇博文都介紹不完,
本文但願能將使用Auto Layout的重點和技巧以及注意事項,進行一個介紹.成爲學習Auto Layout的一個導航文章.

參考資料:

1:iOS7.0 Xcode5 Auto Layout 備忘錄

http://www.cnblogs.com/thefeelingofsimple/p/3316300.html

2:iOS 6 Auto Layout NSLayoutConstraint 界面佈局

http://www.devdiv.com/iOS_6_Auto_Layout_NSLayoutConstraint_%E7%95%8C%E9%9D%A2%E5%B8%83%E5%B1%80-weblog-227936-13173.html

3:iOS 6 新特性 Auto Layout

http://www.cocoachina.com/bbs/read.php?tid=116558

4:WWDC 2012 Session筆記——202, 228, 232 AutoLayout（自動佈局）入門

http://onevcat.com/2012/09/autoayout/

5:iOS 6 自動佈局 入門－1

http://www.raywenderlich.com/zh-hans/22873/ios-6-%E8%87%AA%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%85%A5%E9%97%A8%EF%BC%8D1

6:先進的自動佈局工具箱

http://answerhuang.duapp.com/index.php/2013/10/11/%E5%85%88%E8%BF%9B%E7%9A%84%E8%87%AA%E5%8A%A8%E5%B8%83%E5%B1%80%E5%B7%A5%E5%85%B7%E7%AE%B1/

使用:

1:理解概念

Auto Layout中文翻譯過來意思是自動佈局,經過內定的Constraint(約束)和各項條件來計算出合理的佈局.而這個合理的佈局,符合咱們的的預期和意圖.

將咱們想象中的結果展示出來.Constraint的設定很是靈活,實現一種佈局的方法能夠經過多Constraint套來完成.

如下幾點是咱們在開始使用以前必須弄清楚的事情:

1:咱們要拋棄以往舊的佈局方式再也不去關注View的Frame,Center,和autoresizing. 由於這些座標和大小的定位均可以經過來Auto Layout完成.

2:理解每一種Constraint的含義,不然,當你去看別人的實現的Constraint時,就會有種看天書的感受.

3:按意圖設計,一切按咱們理想中的效果去佈局,只要約束設定的合理,就必定可以完成目標佈局.

2:開始使用

先從Interface Builder開始吧. 打開某個Xib或者StoryBoard,
在右側Show in file inspector裏面找到Ues Autolayout,將其勾選.以下圖:

自此,Autolayout便啓用成功,autoresizingMask被廢棄.其全部以往的功能和特性都被Autolayout取代.


如今咱們定位控件位置的方式,再也不像之前同樣,計算好每個控件具體的位置,x是多少,y是多少.
而是思考,這個控件離左邊是相隔多少距離,或者離頂部或底部相隔多少距離.
而有些規則性的事情仍是相似的,好比咱們定位一個控制的位置,必定要有x,y兩個座標點同時有值,少一個都不能正常顯示.
一樣Autolayout在建立約束時也同樣,在思考完離頂部距離之後,還須要思考離頂部距離,不然控件的顯示位置同樣沒法正常顯示.
換言之,要讓Autolayout計算出合理的位置,須要保證水平距離和垂直距離同時存在. 不然IDE,都會給出警告,提示這樣的佈局Ambiguous Layout(模凌兩可)


接下來,讓咱們來熟悉一下Interface Builder提供哪些實現Autolayout的功能:
觀察一下界面預覽右下角,有一排以下圖這樣的按鈕:


這些是Interface Builder用來建立Constraint的主要方式,同時,咱們也能夠在Xcode的菜單欄中找到這些功能,以下圖:


這些功能分別以下圖中描述的那樣:

若是是從代碼層面開始使用Autolayout,須要對使用的View的translatesAutoresizingMaskIntoConstraints的屬性設置爲NO.
便可開始經過代碼添加Constraint,不然View仍是會按照以往的autoresizingMask進行計算.
而在Interface Builder中勾選了Ues Autolayout,IB生成的控件的translatesAutoresizingMaskIntoConstraints屬性都會被默認設置NO.

3:從舊的IB佈局中轉換成Auto layout

4:熟練使用Interface Builder

5:經過代碼來構建自動佈局

代碼建立的約束有兩種方式:

1:常規約束,寫法很是冗長,但能實現全部的約束方式以及很是特殊的約束方式,代碼以下:

[csharp]    view plain   copy  

1. //實例化Button  

2. button1 = [[UIButton alloc] initWithFrame:(CGRectZero)];//這裏再也不須要去刻意指定x.y等座標.  

3. [button1 setTitle:@"yushuyi" forState:UIControlStateNormal];  

4. [button1 setBackgroundColor:[UIColor redColor]];  

5. [button1 sizeToFit];  

6. [button1 setTranslatesAutoresizingMaskIntoConstraints:NO];//將使用AutoLayout的方式來佈局  

7. [self.view addSubview:button1];  

8.   

9.   

10. //建立了一個水平居中父視圖的約束  

11. NSLayoutConstraint *constraint = [  

12.                                   NSLayoutConstraint  

13.                                   constraintWithItem:button1  

14.                                   attribute:NSLayoutAttributeCenterX  

15.                                   relatedBy:NSLayoutRelationEqual  

16.                                   toItem:self.view  

17.                                   attribute:NSLayoutAttributeCenterX  

18.                                   multiplier:1.0f  

19.                                   constant:00.0f  

20.                                   ];  

21.   

22. [self.view addConstraint:constraint];//將約束添加到對應的父視圖中  

23.   

24. //繼續建立了一個位於父視圖底部相隔20距離的約束  

25. constraint = [  

26.               NSLayoutConstraint  

27.               constraintWithItem:button1  

28.               attribute:NSLayoutAttributeBottom  

29.               relatedBy:NSLayoutRelationEqual  

30.               toItem:self.view  

31.               attribute:NSLayoutAttributeBottom  

32.               multiplier:1.0f  

33.               constant:-20.0f  

34.               ];  

35.   

36. [self.view addConstraint:constraint];  

值得注意的是,添加約束以前必定要將子視圖優先 addSubview 到父視圖中,不然在添加約束時會產生編譯器警告.
而咱們在理解的時候,能夠經過這種方式來理解.

item1.attribute = multiplier ⨉ item2.attribute + constant

2:可視化格式語言約束

所謂可視化格式語言約束,是一種很直觀的理解方式,固然,前提是你已經熟練理解這套語言的規則.

經過可視化語言能夠一次性建立多個約束. 這對於第一次方式來講,是至關方面和容易理解的.但可視化語言不是全部約束都能知足.

咱們能夠用正則表達式的學習方式來學習這項可視化格式語言.舉例代碼以下:

[csharp]    view plain   copy  

1. //建立須要參與約束規則的對象字典 <span style="font-family:Arial,Helvetica,sans-serif">表示這三個Button將參與Autolayout的約束處理</span>  

2. NSDictionary *viewsDic = NSDictionaryOfVariableBindings(deleteButton,cancelButton,nextButton);  

3.   

4. NSArray *constraints = nil;  

5. constraints = [NSLayoutConstraint constraintsWithVisualFormat:  

6.   @"H:|-25-[deleteButton(==cancelButton@700)]-(>=8)-[cancelButton(140)]-[nextButton(nextButtonWidth)]-rectY-|"//水平 可視化格式語言  

7.                options:NSLayoutFormatAlignAllTop //對齊功能  

8.                metrics:@{@"rectY":@5,@"nextButtonWidth":@30}//指標參數  

9.                views:viewsDic];//參與約束的對象字典  

10. [self.view addConstraints:constraints];  

11.   

12. constraints = [NSLayoutConstraint constraintsWithVisualFormat:  

13.                @"V:[nextButton]-|" //垂直 可視化格式語言  

14.                options:0 //無條件  

15.                metrics:nil//不帶指標參數  

16.                  views:viewsDic];//參與約束的對象字典  

17.   

18. [self.view addConstraints:constraints];  

19.   

20. //    [deleteButton setContentHuggingPriority:249 forAxis:UILayoutConstraintAxisHorizontal];  

這簡單的十行代碼,若是你沒有學習過Autolayout也會看出一些貓膩,彷佛看懂了.但又似懂非懂.接下來就詳細解釋一下
在解釋以前,先看看上面這些代碼執行後的效果,豎屏以下圖:

橫屏:

三個按鈕位於視圖的底部,有大有小,中間有間隔.

3:經過第三方Auto Layout的加強類別包,來實現約束的建立

https://github.com/smileyborg/UIView-AutoLayout

UIView-AutoLayout的出現如做者所說,其實現思路來源於Interface Builder. 因此在其API命名方面能夠找到不少Interface Builder的影子,

博主極力推薦這個類庫,經過它來建立約束是一件很是愉快的事情,思路清晰,當有個前提是,你已經理解了Auto Layout各項規則.

constraintsAffectingLayoutForAxis //約束檢查 爲何這個View 這樣顯示

6:調試:

看懂IB給出的警告:

經過代碼來檢測 模凌兩可的佈局:

總結: