今後愛上iOS Autolayout

這篇不是autolayout教程,只是autolayout動員文章和經驗之談,在本文第五節友情連接和推薦中,我將附上足夠你們熟練使用autolayout的教程。這篇文章兩個月前就想寫下來,但由於一直工做較多,沒有時間來完成。今天終於狠下心,丟下代碼不寫,來完成他吧!html

1、別和我提Autolayout,我想死!!

從iOS6/xcode4開始,蘋果開始提供了autolayout——一種對不一樣屏幕尺寸有更好兼容的自動佈局機制,但我相信大多數人在剛接觸autolayout時,必定和我同樣,幾乎快被其折磨致死!ios

autolayout由於佈局思路與傳統frame有所不一樣,國內關於autolayout的教程有過少,且autolayout在剛上手時靈活性不易掌控,致使你們更多選擇了放棄。swift

2、爲啥我要用autolayout?

隨着3.5寸/4寸iPhone在市面同時使用愈來愈多,以及即將上市的iPhone六、iPhone6 Plus,不一樣尺寸、不一樣分辨率的iOS設備將會愈來愈多,使用傳統frame佈局的工做量必將愈來愈大;加上蘋果發出的信號,使用autolayout勢在必行。數組

好了,我該來表揚表揚autolayout了,它到底能解決什麼問題,給咱們帶來哪些好處?
1)你基本上能夠不用考慮3.5寸和4寸以及即將上市的x.x寸屏幕不一樣分辨率的問題,你終於能夠不用在viewDidLoad方法裏判斷不一樣分辨率下,不一樣控件應該放在哪裏,或者針對不一樣分辨率寫不一樣的storyboard和xib;
2)你能夠拋棄那些根據不一樣文字來計算tableViewCell、UILabel高度的代碼了,由於autolayout會幫你自動計算好;
3)若是你的佈局在橫屏豎屏下變化不是特別大,你不用再爲橫着豎着寫兩套代碼或者寫兩個storyboard/xib了;
4)對於即將上市的4.7寸和5.5寸iPhone,你基本上能很快甚至不用動一行代碼就完成他們的自適應屏幕布局,不用每次來了新分辨率,你只能say f*ck,而後改兩個通宵。

再看看蘋果的態度,默認就是選擇了使用autolayout。雖然我如今仍有時會罵autolayout,但我仍是會堅定地選擇走上這條道路。xcode

3、Autolayout之折騰二三事

剛剛表揚完autolayout,那我得爲和我同樣,願意選擇走上這條道的同志們提點醒了,你究竟要作好哪些折騰的準備。佈局

3.1.佈局思惟的轉變

傳統佈局思路中,一個view在哪裏有多大,那就寫清楚它的座標位置和寬高就定了,平時用CGRect和CGPoint這兩種模型就足夠了,並且它必定很是聽你的話,寫的是多少,它絕對就是多少;可是autolayout的思路卻變化了,或者說改進了,它囊括了傳統frame佈局思路,除了能夠告訴view的座標和寬高,它更提供了一種相對的概念,好比:
1)view相對於屏幕視圖左邊5點,右邊10點,上面15點,下面20點,若是屏幕的長寬比例發生了改變(好比從3.5寸的320:480變成了4寸的320:568,或者從橫屏切換到了豎屏),view仍然會隨着屏幕的比例而拉伸改變,仍然保持離屏幕視圖左邊5點,右邊10點,上面15點,下面20點;
2)view1和view2之間相距10點,當屏幕尺寸發生改變或者旋轉時,他倆仍然能夠經過改變自身的尺寸或位置改變來保證它們中間就是相距10點;
3)...
因此,使用autolayout的第一步是你須要考慮它相對於superView或者brotherView的上下左右的距離,改變本身佈局的思惟。學習

3.2.使用autolayout可能會常常獲得本身不想看到的樣子,並且你改變frame還沒用

frame時代,是你寫的多少位置點就是多少位置點,view不會被自動的拉伸或者改變位置,可是autolayout中的view卻會根據屏幕長寬比或者其餘view的改變而改變,你常常就會看到被自動佈局成了不是你想的樣子,這也是太多人被折磨的緣由。只要你考慮的相對的位置不正確,它真的就可能會亂掉。動畫

3.3.autolayout的VFL(Visual Format Language)語法初看起來真蛋疼

好吧,既然使用了autolayout,使用frame來改變位置不起做用了,那我也用代碼來完成autolayout總行了吧。可是,讓我選一段最普通的VFL代碼給你看看:ui

NSString *vfl = @"V:|-5-[_view]-10-[_imageView(20)]-10-[_backBtn]-5-|";

納尼?!這是什麼地幹活?!我又要付出學習成本了啊!!!其實這段話就是說,在垂直方向從上到下,view離父視圖5點,imageView距離view 10點,同時imageView是20點高,backBtn離imageView底部10點,距離父視圖底部5點。.net

3.4.手動Constraint書寫,那個長長長啊~~

固然,你還能夠一個一個的寫佈局約束Constraint,就和frame分別指定origin和size相似,可是卻像這樣:

[self.view addConstraint: [NSLayoutConstraint constraintWithItem:blueView
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:redView
attribute:NSLayoutAttributeLeft
multiplier:1
constant:0]];

而上文中的「view離父視圖5點,imageView距離view 10點,同時imageView是20點高,backBtn離imageView底部10點,距離父視圖底部5點」每個逗號短句都是像這樣的一個constraint。

4、你是否是已經準備放棄了?NO!說好的愛上Autolayout呢!

寫到這裏,我突然以爲我是在黑autolayout了,不,看個人題目,我是真的已經愛上使用autolayout了。就讓我來講說應該怎麼使用autolayout。

4.1.autolayout通常應用步驟和最適宜場景

當你的頁面不會變動總體佈局和設計,只有在不一樣屏幕尺寸、不一樣文字和內容下有適應性的變化,那這種狀況使用autolayout就再適宜不過了。不會在像frame的時代,苦逼的要爲不一樣屏幕尺寸計算各自的位置點座標和大小了。一般使用xcode->Editor->Pin/Align菜單爲視圖添加約束便可。通常經過InterfaceBuilder肯定控件位置,當存在須要自動被拉伸、適應或位移的控件時就要添加constraint;具體使用教程可參考《開始iOS 7中自動佈局教程1》

4.2.你的視圖有比較簡單的佈局改變

當須要產生比較簡單動畫或動態添加視圖時,autolayout還算好用。一般有兩種方式:
1.在Controller中像聲明UIView的IBOutlet同樣,聲明一個Constraint屬性,例如XXViewTopConstraint.當進行佈局變化時,直接修改XXViewTopConstraint的constant屬性,便可改變其相對位置。而後再來一句

[self.view layoutIfNeeded];

搞定!
2.經過Constraint的優先級(Priority)來變動視圖相對佈局。如過是兩條一樣描述距離superview上邊緣距離的約束,若是這兩個約束的數值不一樣,可是優先級同樣,則autolayout將報佈局衝突,將會丟棄某一條約束(這時可能就會丟棄你想要的約束,而偏偏保留了你不想看到的佈局)。因此,當咱們發生佈局變化時,沒法像frame的絕對定位,直接改變,而且只有惟一的位置信息。那麼,咱們該怎麼處理這種佈局衝突呢?那就是讓描述相同但數值不一樣的這兩個約束採用不一樣的優先級。autolayout默認將使用數值較大的優先級約束。

一般1就能搞定大部分問題,2的狀況較少,但有時有奇效!

4.3.你的視圖有較爲複雜的動畫效果或者較大的佈局改變

雖然autolayout能夠完成全部的佈局問題,但它仍然在某些狀況下是不方便的,就像4.2節描述的,你的每一行代碼只能改變一個constraint,但要知道每一個視圖一般須要4個甚至更多constraint來約束,因此一旦有較爲複雜的佈局改變和動畫,那你可能須要寫好幾行,可是frame一行代碼就能夠搞定。
而且,好幾行代碼還不是最要命的,要命的是你可能還須要給這每個約束聲明IBOutlet,或者經過view的constraints屬性,從constraints數組裏判斷出對應方向、大小的約束,再改值,真心好折騰!
因此,當你須要很是頻繁的變動控件佈局,而且變動的位置是不肯定的(例如經過手勢拖動一個視圖到屏幕任意位置),那麼,我建議此視圖不要使用autolayout,而使用frame的所寫即所得的絕對定位方式更好,你只須要充分考慮各類屏幕適配,併爲其計算適合的座標點便可。同時,我還建議這種頻繁變動的視圖甚至不要InterfaceBuilder來繪製,最好直接代碼書寫,由於一旦你勾選了autolayout,那麼storyboard中的全部視圖都將autolayout。當你須要變動視圖佈局時,則必須使用
view.translatesAutoresizingMaskIntoConstraints = NO;
superview.translatesAutoresizingMaskIntoConstraints = NO;
來避免爲你的視圖新增默認autolayout約束。

5、友情連接和推薦

1.《開始iOS 7中自動佈局教程1》
這個教程看完基本上能夠比較熟悉的使用autolayout,再結合本文的一些經驗,應該可以解決大部分問題了。而該文的教程2沒有中文翻譯,只有英文原版:《Beginning Auto Layout Tutorial in iOS 7: Part 2》
2.《Autolayout及VFL經驗分享》
這篇文章以較簡單的描述囊括了VFL使用方法和經常使用的autolayout技巧。足夠你們使用了。
3.《AutoLayout(自動佈局)入門》
這篇文章精簡的囊括了autolayout的代碼操做方式。
4.《Auto Layout 使用心得》
做者JohnLui囊括了autolayout最經常使用的使用場景,描述清晰詳細,使用swift實現,實用性超強。

若是在通讀了本文和以上連接後還沒法靈活運用autolayout,歡迎給我留言,你們一塊兒討論!同時歡迎關注個人博客http://www.ilikewhite.com和微博http://weibo.com/ilikewhite

相關文章
相關標籤/搜索