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'
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代碼效果