一担租、AutoLayoutz主要有以下幾點(diǎn)特點(diǎn):
1.基于約束:和以往定義frame的位置和尺寸不同阳欲,AutoLayout的位置確定是以所謂相對(duì)位置的約束來(lái)定義的,比如x坐標(biāo)為superView的中心,y坐標(biāo)為屏幕底部上方10像素等
2.描述性: 約束的定義和各個(gè)view的關(guān)系使用接近自然語(yǔ)言或者可視化語(yǔ)言的方法來(lái)進(jìn)行描述
3.布局系統(tǒng):即字面意思檩奠,用來(lái)負(fù)責(zé)界面的各個(gè)元素的位置。
總而言之附帽,AutoLayout為開發(fā)者提供了一種不同于傳統(tǒng)對(duì)于UI元素位置指定的布局方法埠戳。以前,不論是在IB里拖放蕉扮,還是在代碼中寫整胃,每個(gè)UIView都會(huì)有自己的frame屬性,來(lái)定義其在當(dāng)前視圖中的位置和尺寸喳钟。使用AutoLayout的話屁使,就變?yōu)榱耸褂眉s束條件來(lái)定義view的位置和尺寸。這樣的最大好處是一舉解決了不同分辨率和屏幕尺寸下view的適配問(wèn)題奔则,另外也簡(jiǎn)化了旋轉(zhuǎn)時(shí)view的位置的定義蛮寂,原來(lái)在底部之上10像素居中的view,不論在旋轉(zhuǎn)屏幕或是更換設(shè)備(iPad或者iPhone5或者以后可能出現(xiàn)的mini iPad)的時(shí)候易茬,始終還在底部之上10像素居中的位置酬蹋,不會(huì)發(fā)生變化。 總的來(lái)說(shuō):使用約束條件來(lái)描述布局抽莱,view的frame會(huì)依據(jù)這些約束來(lái)進(jìn)行計(jì)算范抓。
二、AutoLayout使用原理:
1.創(chuàng)建約束食铐,iOS6中新加入了一個(gè)類:NSLayoutConstraint尉咕。它的約束滿足這個(gè)公式:
item1.attribute = multiplier ? item2.attribute + constant
對(duì)應(yīng)的代碼為
//view_1(紅色)top 距離self.view的top
NSLayoutConstraint *view_1TopToSuperViewTop = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:30];
這里對(duì)應(yīng)的約束是“view_1的頂部(y)= self.view的頂部(y)*1 + 30”。
2.添加約束璃岳,在創(chuàng)建約束之后年缎,需要將其添加到作用的view上。UIView添加約束的實(shí)例方法:
- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided. Instead, set NSLayoutConstraint's active property to YES.
- (void)addConstraints:(NSArray<__kindof NSLayoutConstraint *> *)constraints NS_AVAILABLE_IOS(6_0); // This method will be deprecated in a future release and should be avoided. Instead use +[NSLayoutConstraint activateConstraints:].
用來(lái)將約束添加到view铃慷。在添加時(shí)唯一要注意的是添加的目標(biāo)view要遵循以下規(guī)則:
2.1 對(duì)于兩個(gè)同層級(jí)view之間的約束關(guān)系单芜,添加到他們的父view上
2.2對(duì)于兩個(gè)不同層級(jí)view之間的約束關(guān)系,添加到他們最近的共同父view上
2.3對(duì)于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系犁柜,添加到層次較高的父view上
3.刷新約束洲鸠,可以通過(guò)-setNeedsUpdateConstraints和-layoutIfNeeded兩個(gè)方法來(lái)刷新約束的改變,使UIView重新布局。
[self.view layoutIfNeeded];
三 扒腕、Aotulayout的三種使用方法
通過(guò)一個(gè)例子的代碼來(lái)學(xué)習(xí)一下兩種布局方法绢淀,首先看看我們的需求:
布局紅、綠瘾腰、藍(lán)三個(gè)view位置如圖所示皆的,他們距離父視圖邊距以及相互之間的距離都為30px,紅色view和綠色view寬度相等蹋盆,并且三個(gè)view的高度相等费薄。并且在橫屏?xí)r,他們的位置還是一樣保持不變栖雾。
1.系統(tǒng)手碼
//1.首先楞抡,創(chuàng)建視圖控件,添加到self.view上
UIView *view_1 = [[UIView alloc] init];
view_1.backgroundColor = [UIColor redColor];
[self.view addSubview:view_1];
UIView *view_2 = [[UIView alloc] init];
view_2.backgroundColor = [UIColor greenColor];
[self.view addSubview:view_2];
UIView *view_3 = [[UIView alloc] init];
view_3.backgroundColor = [UIColor blueColor];
[self.view addSubview:view_3];
//2.然后析藕,記得要把AutoresizingMask布局關(guān)掉
view_1.translatesAutoresizingMaskIntoConstraints = NO;
view_2.translatesAutoresizingMaskIntoConstraints = NO;
view_3.translatesAutoresizingMaskIntoConstraints = NO;
//3.接著召廷,添加約束,先添加邊距約束账胧,再添加寬高約束(個(gè)人習(xí)慣)
/*
* 添加約束 公式:item1.attribute = multiplier ? item2.attribute + constant
*/
//view_1(紅色)top 距離self.view的top
NSLayoutConstraint *view_1TopToSuperViewTop = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeTop
multiplier:1
constant:30];
//view_1(紅色)left 距離self.view的left
NSLayoutConstraint *view_1LeftToSuperViewLeft = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:30];
//view_1(紅色)right 距離view_2(綠色)的left
NSLayoutConstraint *view_1RightToview_2Left = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeRight
multiplier:1
constant:30];
//view_1(紅色)bottom 距離view_3(藍(lán)色)的top
NSLayoutConstraint *view_1BottomToview_3Top = [NSLayoutConstraint constraintWithItem:view_1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:view_3
attribute:NSLayoutAttributeTop
multiplier:1
constant:- 30];
//view_2(綠色)right 距離self.view的right
NSLayoutConstraint *view_2RightToSuperViewRight = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1
constant:- 30];
//view_2(綠色)centerY 和 view_1(紅色)的centerY 一致
NSLayoutConstraint *view_2CenterYToView_1CenterY = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeCenterY
multiplier:1
constant:0];
//view_3(藍(lán)色)left 距離 self.view left
NSLayoutConstraint *view_3LeftToSuperViewLeft = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeLeft
multiplier:1
constant:30];
//view_3(藍(lán)色)right 距離 self.view right
NSLayoutConstraint *view_3RightToSuperViewRight = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeRight
multiplier:1
constant:- 30];
//view_3(藍(lán)色)Bottom 距離 self.view bottom
NSLayoutConstraint *view_3BottomToSuperViewBottom = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeBottom
multiplier:1
constant:- 30];
//view_1(紅色)width 和view_2(綠色)的width相等
NSLayoutConstraint *view_1WidthToview_2Width = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeWidth
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeWidth
multiplier:1
constant:0];
//view_1(紅色)height 和view_2(綠色)的height相等
NSLayoutConstraint *view_1HeightToview_2Height = [NSLayoutConstraint constraintWithItem:view_2
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeHeight
multiplier:1
constant:0];
//view_1(紅色)height 和 view_3(藍(lán)色)的height相等
NSLayoutConstraint *view_1HeightToview_3Height = [NSLayoutConstraint constraintWithItem:view_3
attribute:NSLayoutAttributeHeight
relatedBy:NSLayoutRelationEqual
toItem:view_1
attribute:NSLayoutAttributeHeight
multiplier:1
constant:0];
//添加約束柱恤,因?yàn)関iew_1、2找爱、3是同層次關(guān)系,且他們公有的父視圖都是self.view泡孩,所以這里把約束都添加到self.view上即可
[self.view addConstraints:@[view_1TopToSuperViewTop,view_1LeftToSuperViewLeft,view_1RightToview_2Left,view_2RightToSuperViewRight,view_1WidthToview_2Width,view_1BottomToview_3Top,view_2CenterYToView_1CenterY,view_3LeftToSuperViewLeft,view_3RightToSuperViewRight,view_3BottomToSuperViewBottom,view_1HeightToview_2Height,view_1HeightToview_3Height]];
[self.view layoutIfNeeded];
2.VFL(Visual Format Language)約束
//1.首先车摄,創(chuàng)建視圖控件,添加到self.view上
UIView *view_1 = [[UIView alloc] init];
view_1.backgroundColor = [UIColor redColor];
[self.view addSubview:view_1];
UIView *view_2 = [[UIView alloc] init];
view_2.backgroundColor = [UIColor greenColor];
[self.view addSubview:view_2];
UIView *view_3 = [[UIView alloc] init];
view_3.backgroundColor = [UIColor blueColor];
[self.view addSubview:view_3];
//2.然后仑鸥,記得要把AutoresizingMask布局關(guān)掉
view_1.translatesAutoresizingMaskIntoConstraints = NO;
view_2.translatesAutoresizingMaskIntoConstraints = NO;
view_3.translatesAutoresizingMaskIntoConstraints = NO;
//3.接著吮播,添加約束
// 間距
NSNumber *margin = @(30);
NSNumber *spacing = @(30);
NSDictionary *views = NSDictionaryOfVariableBindings(view_1,view_2,view_3);
// 添加水平方向的約束1
NSString *vfl = @"H:|-margin-[view_1]-spacing-[view_2(==view_1)]-margin-|";
NSDictionary *mertrics = NSDictionaryOfVariableBindings(margin,spacing);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:vfl options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:mertrics views:views];
[self.view addConstraints:constraints];
// 添加水平方向的約束2
NSString *vfl1 = @"H:|-margin-[view_3]-margin-|";
NSDictionary *mertrics1 = NSDictionaryOfVariableBindings(margin,spacing);
NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:vfl1 options:kNilOptions metrics:mertrics1 views:views];
[self.view addConstraints:constraints1];
// 添加豎直方向的約束
NSString *vfl2 = @"V:|-margin-[view_1]-spacing-[view_3(==view_1)]-margin-|";
NSDictionary *mertrics2 = NSDictionaryOfVariableBindings(margin, spacing);
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vfl2 options:kNilOptions metrics:mertrics2 views:views];
[self.view addConstraints:constraints2];
3.XIB方式
自己手動(dòng)拖拽設(shè)置約束就可以,比較簡(jiǎn)單眼俊,最后記得點(diǎn)擊左側(cè)的黃色警告補(bǔ)全視圖差值