?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?ios布局約束
關(guān)于布局約束的發(fā)展史：
1.通過代碼計(jì)算frame
2.Autoresizing（設(shè)置控件與父控件的相對(duì)關(guān)系,從而實(shí)現(xiàn)間接設(shè)置frame，iOS系統(tǒng)在運(yùn)行時(shí)會(huì)根據(jù)設(shè)置的規(guī)則,計(jì)算出對(duì)應(yīng)的frame,無需手動(dòng)計(jì)算frame）
–通過設(shè)置子控件與父控件的關(guān)系來決定如何顯示控件
3.AutoLayout
–通過設(shè)置某控件與任意其他控件間的關(guān)系來決定如何顯示這個(gè)控件,不僅僅局限與父子控件
4.SizeClasses –通過SizeClasses+Auto
Layout實(shí)現(xiàn)針對(duì)不同屏幕為控件設(shè)置不同的約束
關(guān)于約束的總結(jié)：
?總結(jié):如果添加的約束和其它控件沒有關(guān)系,會(huì)添加到自己身上
?總結(jié):如果是父子關(guān)系,設(shè)置子控件的約束,約束會(huì)添加到父控件上
?注意:兩個(gè)控件是兄弟關(guān)系
?總結(jié):如果是兄弟關(guān)系,設(shè)置兩兄弟的約束,約束會(huì)添加到它們最近的共同父控件上
代碼如何實(shí)現(xiàn)AutoLayout：
Layout的步驟
p利用NSLayoutConstraint類創(chuàng)建具體的約束對(duì)象
p添加約束對(duì)象到相應(yīng)的view上
-(void)addConstraint:(NSLayoutConstraint *)constraint;
-(void)addConstraints:(NSArray *)constraints;
?一個(gè)NSLayoutConstraint對(duì)象就代表一個(gè)約束
?創(chuàng)建約束對(duì)象的常用方法
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
pview1：要約束的控件pattr1：約束的類型（做怎樣的約束）prelation：與參照控件之間的關(guān)系pview2：參照的控件pattr2：約束的類型（做怎樣的約束）pmultiplier：乘數(shù)
pc：常量
?自動(dòng)布局有個(gè)核心公式
obj1.property1=（obj2.property2 * multiplier）+ constant ?value
?代碼實(shí)現(xiàn)Auto Layout的注意點(diǎn)
p1》要先禁止Autoresizing功能，設(shè)置view的下面屬性為NO
view.translatesAutoresizingMaskIntoConstraints = NO;
p2》添加約束之前，一定要保證相關(guān)控件都已經(jīng)在各自的父控件上
p3》不用再給view設(shè)置frame
VFL的使用
?使用VFL來創(chuàng)建約束數(shù)組
+(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
pformat：VFL語句popts：約束類型pmetrics：VFL語句中用到的具體數(shù)值pviews：VFL語句中用到的控件
n創(chuàng)建一個(gè)字典（內(nèi)部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)
基于Autolayout的動(dòng)畫
?在修改了約束之后，只要執(zhí)行下面代碼，就能做動(dòng)畫效果
[UIView animateWithDuration:1.0 animations:^{
[添加了約束的viewlayoutIfNeeded];}];
思路：通過添加約束后，在修改約束的值，來實(shí)現(xiàn)動(dòng)畫。
注意：調(diào)用 某個(gè) view 的layoutIfNeeded方法, 會(huì)先更新這個(gè) view 的約束, 這個(gè) view 的子控件的約束。
?蘋果強(qiáng)烈建議使用AutoLayout,所以在創(chuàng)建新的項(xiàng)目時(shí)已經(jīng)默認(rèn)幫我們選擇使用AutoLayout,由于Autoresizing和AutoLayout二者是互斥的，同時(shí)只能使用其中一種，要想使用Autoresizing的時(shí)候必須先禁用AutoLayout,
pVFL全稱是VisualFormatLanguage，翻譯過來是“可視化格式語言”
pVFL是蘋果公司為了簡(jiǎn)化Autolayout的編碼而推出的抽象語言
?H:[cancelButton(72)]-12-[acceptButton(50)]
p水平方向上canelButton寬72，acceptButton寬50，它們之間間距12
?H:[wideView(>=60@700)]
p水平方向上，wideView寬度大于等于60point，該約束條件優(yōu)先級(jí)為700（優(yōu)先級(jí)最大值為1000，優(yōu)先級(jí)越高的約束越先被滿足）
?V:[redBox][yellowBox(==redBox)]
p豎直方向上，先有一個(gè)redBox，其下方緊接一個(gè)高度等于redBox高度的yellowBox
?H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
水平方向上，F(xiàn)ind距離父view左邊間距為10，之后Find后面是FindNext它們之間是默認(rèn)寬度；再之后是寬度不小于20的FindField，它和FindNext以及父view右邊緣的間距都是默認(rèn)寬度。（豎線“|”表示superview的邊緣
他的使用
?使用VFL來創(chuàng)建約束數(shù)組
+(NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
pformat：VFL語句popts：約束類型pmetrics：VFL語句中用到的具體數(shù)值pviews：VFL語句中用到的控件創(chuàng)建一個(gè)字典（內(nèi)部包含VFL語句中用到的控件）的快捷宏定義
NSDictionaryOfVariableBindings(...)
關(guān)于約束
1.autoresizing
1.1 六根線
外邊四根線,設(shè)置的是距離四周是否固定
中間兩根線,設(shè)置的是子控件的寬高是否隨著父控件的變化而變化(默認(rèn)是按照一定比例變化)
1.2 中間兩根線
先放一個(gè)控件,然后在這個(gè)控件里面添加一個(gè)自控件,改變外層控件的大小,讓里面的子控件根據(jù)約束自動(dòng)變化
1.3 autoresizing的弊端
autoresizing都是相對(duì)于父控件進(jìn)行設(shè)置的,當(dāng)想設(shè)置兄弟控件的大小和間距的時(shí)候,就會(huì)發(fā)現(xiàn)無法設(shè)置
1.4 代碼使用autoresizing
self.redView.autoresizingMask
2.autolayout
四個(gè)按鈕
1. stack 將控件按照類似于集裝箱的樣式堆起來
2. 按鈕 設(shè)置的是多個(gè)按鈕的相對(duì)位置
3. 設(shè)置控件具體的信息(距離左右 寬高具體的值是多少)
4. 更新約束或者frame（針對(duì)約束可能出現(xiàn)的問題,進(jìn)行調(diào)整的按鈕）
2.1 約束的使用(切記:以后frame僅僅在創(chuàng)建控件的時(shí)候使用,后期改變千萬不要用)
當(dāng)使用frame的時(shí)候,需要設(shè)置 x y w h 四個(gè)信息
當(dāng)使用約束的時(shí)候,也必須包含 x y w h 四個(gè)信息
2.2 紅色警告和黃色警告
紅色警告出現(xiàn)的原因:
1. 約束條件不足(如果約束沒有包含 x y 寬高 四個(gè)信息的時(shí)候)
增加約束
2. 約束有沖突(如果要增加約束,先刪除掉之前的約束)
黃色警告出現(xiàn)的原因: X Y 寬高 都有設(shè)置,但是展現(xiàn)的位置與約束不一致
解決方式:updata frame
2.3 刪除約束的四種方式
2.4 設(shè)置兄弟控件的約束
1. 建議,如果控件是出于界面的邊界處,建議以父控件為基準(zhǔn)進(jìn)行設(shè)置
2. 如果控件中包含具體值的約束和相對(duì)的約束,先設(shè)置具體值的約束,最后在設(shè)置相對(duì)的約束
3. 設(shè)置約束的時(shí)候建議一個(gè)一個(gè)控件的進(jìn)行設(shè)置,不要多個(gè)一起,
4. 另外如果控件已經(jīng)設(shè)置了約束,建議不要直接復(fù)制,如果復(fù)制,也建議把復(fù)制后的約束都刪除在添加
2.5 案例:
1.在界面上有一個(gè)藍(lán)色View 距離屏幕上 左 右 各有20個(gè)距離 高度是70
2.在藍(lán)色View的下方有一個(gè)紅色View,紅色View距離藍(lán)色View 有20個(gè)距離
3.并且紅色View和藍(lán)色View右邊對(duì)齊
4.紅色View的高度 與藍(lán)色一致，寬度是藍(lán)色一半
2.6 重要(約束計(jì)算的核心公式)
firstItem = secondItem * multiplier + constant
2.7 當(dāng)一個(gè)控件,如果控件里面有內(nèi)容的時(shí)候,可以只設(shè)置X Y 不設(shè)置寬高
這個(gè)時(shí)候?qū)捀邥?huì)根據(jù) 內(nèi)容自動(dòng)獲取
2.8 設(shè)置控件的某個(gè)位置是固定的
設(shè)置的時(shí)候有兩個(gè)注意點(diǎn):
1. 找到相對(duì)的控件是哪一個(gè)
2. 相對(duì)的約束要明確哪一個(gè)
2.9 代碼添加約束
2.9.1. 先取消autoresizing
blueView.translatesAutoresizingMaskIntoConstraints = NO;
2.9.2. 設(shè)置約束 firstItem = secondItem * multiplier + constant
//第一個(gè)參數(shù):WithItem ：代表的是 firstItem
//第二個(gè)參數(shù):attribute:NSLayoutAttributeTop 要做約束的線是那一條
//第三個(gè)參數(shù):relatedBy? 比較的方式? =? <= >=
//第四個(gè)參數(shù):toItem 代表的是secondItem 第二個(gè)控件
//第五個(gè)參數(shù):attribute:<#(NSLayoutAttribute)#> 相對(duì)于第二個(gè)控件的什么位置
NSLayoutConstraint *blueViewTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
2.9.3. 添加約束(約束由哪個(gè)控件進(jìn)行添加),如果不存在比較關(guān)系->放在自身
如果存在比較關(guān)系—>就去找比較控件它們相同的父控件然后添加
[self.view addConstraint:blueViewTop];
2.10 VFL的使用
2.11 Masonry的使用
2.11.1 導(dǎo)入第三方框架
#import "Masonry.h"
2.11.2 pch文件
如果多個(gè)文件,使用的資源是一樣的,那就可以將相同的東西,作為宏命令定義的pch文件中
這樣多個(gè)文件就可以共享
3. SizeClasses的作用
如果想讓不同的尺寸界面,顯示的內(nèi)容不一樣的話,就是用SizeClasses
3.1 QQ登陸
3.2 界面有一個(gè)圖片,在橫屏和豎屏下顯示的圖片不一樣
1. 在不同的sizeClassses中,不同的屏幕中放入不同的控件
作者：咱們聊聊互聯(lián)網(wǎng)吧
鏈接：http://www.itdecent.cn/p/add20ff8e241
來源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
