iOS【Aotulayout】初級(jí)篇

一担租、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上


1.png

2.2對(duì)于兩個(gè)不同層級(jí)view之間的約束關(guān)系,添加到他們最近的共同父view上


2.png

2.3對(duì)于有層次關(guān)系的兩個(gè)view之間的約束關(guān)系犁柜,添加到層次較高的父view上
3.png

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,他們的位置還是一樣保持不變栖雾。


4.png

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ǔ)全視圖差值

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末意狠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子疮胖,更是在濱河造成了極大的恐慌环戈,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,383評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件澎灸,死亡現(xiàn)場(chǎng)離奇詭異院塞,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)性昭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門拦止,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事汹族∠羟螅” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵顶瞒,是天一觀的道長(zhǎng)夸政。 經(jīng)常有香客問(wèn)我,道長(zhǎng)搁拙,這世上最難降的妖魔是什么秒梳? 我笑而不...
    開封第一講書人閱讀 56,621評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮箕速,結(jié)果婚禮上酪碘,老公的妹妹穿的比我還像新娘。我一直安慰自己盐茎,他們只是感情好兴垦,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著字柠,像睡著了一般探越。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上窑业,一...
    開封第一講書人閱讀 49,929評(píng)論 1 290
  • 那天钦幔,我揣著相機(jī)與錄音,去河邊找鬼常柄。 笑死鲤氢,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的西潘。 我是一名探鬼主播卷玉,決...
    沈念sama閱讀 39,076評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼喷市!你這毒婦竟也來(lái)了相种?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,803評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤品姓,失蹤者是張志新(化名)和其女友劉穎寝并,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腹备,經(jīng)...
    沈念sama閱讀 44,265評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡食茎,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了馏谨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片别渔。...
    茶點(diǎn)故事閱讀 38,716評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出哎媚,到底是詐尸還是另有隱情喇伯,我是刑警寧澤,帶...
    沈念sama閱讀 34,395評(píng)論 4 333
  • 正文 年R本政府宣布拨与,位于F島的核電站稻据,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏买喧。R本人自食惡果不足惜捻悯,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評(píng)論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望淤毛。 院中可真熱鬧今缚,春花似錦、人聲如沸低淡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蔗蹋。三九已至何荚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間猪杭,已是汗流浹背餐塘。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留皂吮,地道東北人戒傻。 一個(gè)月前我還...
    沈念sama閱讀 46,488評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像涮较,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子冈止,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評(píng)論 2 350

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