【IOS開發(fā)基礎(chǔ)系列】Autolayout自動布局專題

1 簡介

????????bounds是指這個view在它自己坐標系的坐標和大小 而frame指的是這個view在它superview的坐標系的坐標和大小區(qū)別主要在坐標系這一塊。很明顯一個是自己為原點的坐標系壹将,一個是以屏幕為原點的坐標系嗤攻。

????????當談到自動布局,橙色代表壞的诽俯。InterfaceBuilder繪制兩個橙色方塊:一個是虛線邊框妇菱,一個是實線邊框。虛線方塊是根據(jù)自動布局顯示視圖的frame暴区。實線方塊是根據(jù)你在屏幕上放置的視圖的frame闯团。這兩個應(yīng)該吻合的,但是這里并沒有仙粱。

? ??????Note你可能會奇怪,為什么Xcode不為X軸方向自動增加一個約束刃唤。Xcode中的規(guī)則是:Xcode只為那些你沒有設(shè)置任何約束的對象創(chuàng)建自動約束川抡。一旦你增加一個約束,你便是告訴Xcode你接管了這個視圖。Xcode將不再增加任何自動約束,并希望你為這個視圖增加需要的約束。


2 代碼實現(xiàn)自動布局

2.1 使用方法

2.1.1 添加約束的方法

????????代碼中一般用到的有兩個添加約束的方式:

????1. - (void) addConstraint: (NSLayoutConstraint *) constraint????NS_AVAILABLE_IOS (6_0);

????2. - (void) addConstraints: (NSArray *) constraints????NS_AVAILABLE_IOS(6_0);


????????在使用自動布局之前要對子視圖的布局方式進行調(diào)整怜森,用到這個UIView的屬性恐疲。

- (BOOL) translatesAutoresizingMaskIntoConstraints ????NS_AVAILABLE_IOS(6_0); // Default YES

需要將其設(shè)置為NO漱凝;


2.1.2 關(guān)于constraintsWithVisualFormat:函數(shù)介紹:

? ? ? ?constraintsWithVisualFormat:參數(shù)為NSString型壁公,指定Contsraint的屬性,是垂直方向的限定還是水平方向的限定撞反,參數(shù)定義一般如下:

????V:|-(>=XXX) :表示垂直方向上相對于SuperView大于、等于、小于某個距離

????若是要定義水平方向,則將V:改成H:即可。

????在接著后面-[]中括號里面對當前的View/控件 的高度/寬度進行設(shè)定屋确;

options:字典類型的值刨啸;這里的值一般在系統(tǒng)定義的一個enum里面選取;

metrics:nil卦尊;一般為nil邓线,參數(shù)類型為NSDictionary你雌,從外部傳入//衡量標準渣磷;

views:就是上面所加入到NSDictionary中的綁定的View;

????????在這里要注意的是AddConstraints? 和AddConstraint之間的區(qū)別逐样,一個添加的參數(shù)是NSArray,一個是NSLayoutConstraint躬窜;


????使用規(guī)則:

????????|:表示父視圖

????????-:表示距離

????????V:? :表示垂直

????????H:? :表示水平

????????>= :表示視圖間距朦前、寬度和高度必須大于或等于某個值

??? ????<= :表示視圖間距莫其、寬度和高度必須小宇或等于某個值

??? ????== :表示視圖間距养盗、寬度或者高度必須等于某個值

????????@? :>=衩婚、<=敬矩、==? 限制??最大為? 1000


1. |-[view]-|:? 視圖處在父視圖的左右邊緣內(nèi)

2. |-[view]? :?? 視圖處在父視圖的左邊緣

3. |[view]?? :?? 視圖和父視圖左邊對齊

4. -[view]-? :? 設(shè)置視圖的寬度高度

5. |-30.0-[view]-30.0-|:?表示離父視圖 左右間距? 30

6. [view(200.0)] :表示視圖寬度為200.0

7. |-[view(view1)]-[view1]-| :表示視圖寬度一樣伐脖,并且在父視圖左右邊緣內(nèi)

8. V:|-[view(50.0)] :視圖高度為?50

9: V:|-(==padding)-[imageView]->=0-[button]-(==padding)-|:表示離父視圖的距離為Padding,這兩個視圖間距必須大于或等于0并且距離底部父視圖為padding戈锻。

10:?[wideView(>=60@700)]? :視圖的寬度為至少為60不能超過? 700

11: 如果沒有聲明方向默認為? 水平?V:


2.1.3 示例

????下面用簡單例子說明一下:

UIView *v1 = [[UIView alloc] initWithFrame: CGRectZero];

v1.translatesAutoresizingMaskIntoConstraints = NO;

v1.backgroundColor = [UIColor redColor];

?[self.viewaddSubview: v1];


UIView *v2 = [[UIView alloc] initWithFrame: CGRectZero];

v2.backgroundColor = [UIColor grayColor];

v2.translatesAutoresizingMaskIntoConstraints = NO;

[self.view addSubview: v2];????//添加兩個允許自動布局的子視圖


//設(shè)置子視圖的寬度和父視圖的寬度相同

[self.view addConstraint: [NSLayoutConstraint constraintWithItem: v1 attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: self.view

attribute: NSLayoutAttributeWidth multiplier: 1.0 constant:0]];?


//設(shè)置子視圖的高度是父視圖高度的一半

[self.view addConstraint: [NSLayoutConstraint constraintWithItem: v1 attribute: NSLayoutAttributeHeight relatedBy: NSLayoutRelationEqual toItem: self.view attribute: NSLayoutAttributeHeight multiplier: 0.5 constant: 0]];


//通過addConstraints添加對水平方向上v1的控制--距離父視圖左側(cè)距離為0(距離為0的話也可省略)同時將v2的水平方向的寬度和v1設(shè)置成相同

[self.view addConstraints: [NSLayoutConstraint?constraintsWithVisualFormat: @"H:|-0-[v1][v2(==v1)]-0-|" options: 0 metrics: nil views: views]];


//通過addConstraints添加對垂直方向上v1的控制--距離父視圖上側(cè)距離為0(距離為0的話也可省略)同時將v2的垂直方向的高度和v1設(shè)置成相同

?[self.viewaddConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|-0-[v1][v2(==v1)]|"options:0 metrics:nil views:views]];


//最后是垂直布局兩個子view

[self.viewaddConstraints:[NSLayoutConstraint constraintsWithVisualFormat: @"V:|-0-[v1]-0-[v2]-0-|"options:0 metrics:nil views:views]];


????????這樣就可以實現(xiàn)上下兩個view,各占一半。旋轉(zhuǎn)屏幕的情況下也會自動處理布局靶溜。這樣看起來代碼多,但是可以適應(yīng)多種分辨率的屏幕。不排除以后蘋果出更大更多分辨率的手機。


2.2 AutoLayout框架介紹(ZXPAutoLayout)

????????iOS原生的自動布局(NSLayoutConstraint)非常繁瑣, 影響開發(fā)進度和可讀性也不利于維護, 正所謂工欲善其事必先利其器 , 有一個良好的自動布局框架, 則會讓我們事半功倍. 而ZXPAutoLayout則是解決這一問題和誕生 . 采用新穎的鏈式語法, 擴展性,可讀性,維護成本也較低.并致力打造最好用,最簡潔,最方便,最輕巧的自動布局够庙。

????????以下一個簡單示例恭应。ZXPAutoLayout詳細教程點此- github地址點此

//設(shè)置一個背景為半透明紅色的view,上下左右四邊都距離superview的距離為10

UIView *bgView = [UIView new];

[self.view addSubview: bgView];

bgView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent: 0.5];

[bgView zxp_addConstraints: ^(ZXPAutoLayoutMaker *layout) {

????//上下左右四邊都距離superview的距離為10

? ? layout.edgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));

? ? //也可以如下這行代碼來設(shè)置,但要同時設(shè)置top,left,bottom,right.推薦以上寫法,比較簡潔.

? ? //layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);

}];

//設(shè)置一個背景為半透明紅色的view,上下左右四邊都距離superview的距離為10

UIView *bgView =[UIView new];

[self.viewaddSubview:bgView];

bgView.backgroundColor = [[UIColor redColor] colorWithAlphaComponent: 0.5];

[bgView zxp_addConstraints: ^(ZXPAutoLayoutMaker*layout) {

????//上下左右四邊都距離superview的距離為10

? ? layout.edgeInsets(UIEdgeInsetsMake(10, 10, 10, 10));

? ? //也可以如下這行代碼來設(shè)置,但要同時設(shè)置top,left,bottom,right.推薦以上寫法,比較簡潔.

? ? //layout.topSpace(10).leftSpace(10).bottomSpace(10).rightSpace(10);

}];


3 界面設(shè)置實現(xiàn)自動布局

iOS8開發(fā)~UI布局(二)storyboard中autolayout和sizeclass的使用詳解

http://blog.csdn.net/liangliang103377/article/details/40082255


????????用Xcode在Storyboard界面配置自動布局要點:

????1、對于一個視圖內(nèi)同級別的子視圖耘眨,要配就全部都配置成自動布局昼榛;

????2、對于每個視圖剔难,無法上下左右四個方向上的設(shè)置胆屿,一定要設(shè)置全;

????3偶宫、對于TableView等大型視圖控件非迹,默認頂行就行,無須手動考慮導航條與狀態(tài)欄高度纯趋;


????????重點參考IM_RAC項目中憎兽,IMSingleChatVC的自動布局設(shè)置

4 開發(fā)問題匯總

4.1 Constraint問題

4.1.1 不能同時設(shè)置一個控件橫向或縱向的相對間距后,又去設(shè)置絕對尺寸吵冒,否則會導致控件不能顯示纯命,也不會報錯!


4.1.2 Constraint可以只使用部分痹栖,細節(jié)控件可去代碼中做


4.1.3 Constraint中設(shè)計的布局一定與代碼中設(shè)計得布局保持一致

????????使用Storyboard進行布局設(shè)計后亿汞,系統(tǒng)運行時會總是以Storyboard中布局來刷新頁面,所以代碼中設(shè)計得布局一定要與Constraint中設(shè)計的布局保持一致揪阿。不然會導致布局混亂疗我。


4.1.4 在故事板中進行布局設(shè)計時,如果有導航欄图甜、Tab欄碍粥,必須也要把高度預留出來

iPhone iPad各種控件默認高度

http://blog.csdn.net/chengyakun11/article/details/7565690


5 參考鏈接

'Unable to create description indescriptionForLayoutAttribute_layoutItem_coefficient. Something is nil'

http://stackoverflow.com/questions/26024906/unable-to-create-description-in-descriptionforlayoutattribute-layoutitem-coeffi


Unable to create description indescriptionForLayoutAttribute添加了系統(tǒng)約束無法在ios7運行

http://bbs.csdn.net/topics/390950336?page=1


Size Classes with Xcode 6:為所有的尺寸準備一個Storyboard

http://www.cocoachina.com/ios/20140926/9766.html


Storyboard自動布局

http://demo.netfoucs.com/hmt20130412/article/details/24653659


開始iOS7中自動布局教程(一)

http://www.cocoachina.com/industry/20131203/7462.html


【iOS開發(fā)】多屏尺的自動適配AutoLayout(純代碼方式)

http://blog.sina.com.cn/s/blog_693de6100102v4sl.html


iOS開發(fā):iPhone6、6 plus適配

http://jingyan.baidu.com/article/8cdccae97a5c2b315413cda9.html


開始iOS 7中自動布局教程(一)

http://www.cocoachina.com/industry/20131203/7462.html


(翻譯)開始iOS 7中自動布局教程(二)

http://www.cnblogs.com/zer0Black/p/3977288.html


http://blog.csdn.net/dizzthxl/article/details/9009537


ios-AutoLayout(自動布局代碼控制)簡單總結(jié)

http://blog.sina.com.cn/s/blog_7c336a830102vaht.html


IOS學習之路(代碼實現(xiàn)自動布局)

http://www.tuicool.com/articles/B3iiU3J


iOS開發(fā)筆記--使用AutoLayout中的VFL(Visualformat language)--代碼實現(xiàn)自動布局

http://blog.csdn.net/hopedark/article/details/41844071


使用了Autolayout和約束后黑毅,無法用代碼修改View的位置嚼摩,怎么處理?(7樓)

http://www.cocoachina.com/bbs/read.php?tid-256011-page-1.html


在代碼中更新AutoLayout約束

http://blog.sina.com.cn/s/blog_6291e42d0102uzav.html


關(guān)于autolayout需要頻繁變更的討論

http://segmentfault.com/q/1010000002420050


實時顯示iOS編寫UI代碼效果

http://blog.csdn.net/zhang_red/article/details/45503683

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末矿瘦,一起剝皮案震驚了整個濱河市枕面,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缚去,老刑警劉巖潮秘,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異易结,居然都是意外死亡枕荞,警方通過查閱死者的電腦和手機柜候,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來躏精,“玉大人渣刷,你說我怎么就攤上這事〈V颍” “怎么了辅柴?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長瞭吃。 經(jīng)常有香客問我碌嘀,道長,這世上最難降的妖魔是什么歪架? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任股冗,我火速辦了婚禮,結(jié)果婚禮上和蚪,老公的妹妹穿的比我還像新娘魁瞪。我一直安慰自己,他們只是感情好惠呼,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著峦耘,像睡著了一般剔蹋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上辅髓,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天泣崩,我揣著相機與錄音,去河邊找鬼洛口。 笑死矫付,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的第焰。 我是一名探鬼主播买优,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼挺举!你這毒婦竟也來了杀赢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤湘纵,失蹤者是張志新(化名)和其女友劉穎脂崔,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體梧喷,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡砌左,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年脖咐,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片汇歹。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡屁擅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出秤朗,到底是詐尸還是另有隱情煤蹭,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布取视,位于F島的核電站硝皂,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏作谭。R本人自食惡果不足惜稽物,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望折欠。 院中可真熱鬧贝或,春花似錦、人聲如沸锐秦。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酱床。三九已至羊赵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間扇谣,已是汗流浹背昧捷。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留罐寨,地道東北人靡挥。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像鸯绿,于是被迫代替她去往敵國和親跋破。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容