iOS 適配/ autoLayout基本知識

歷史

iPhone3GS、iPhone4\4s：沒有屏幕適配最先開發裏面的程序所有都是寫死的

iPad 旋轉出來以後 Autoresizing問世
iPhone5\5c\5s
兼容各類不一樣的狀況
系統適配 ios版本適配ios6 7 8 9
屏幕適配 iPhone3.5 4.0 4.7 5.5 iPad 7.9 9.7
開發面向點去開發

autoResizing

必須關閉autolayout、sizeclass才能使用Autoresizing
在之前若是屏幕旋轉會重寫 willRotateToInterfaceOrientation 在設置一邊frame
佈局：
圖形界面佈局
外面的4 根線，實心線表明距離是控件擺放固定的位置，注意通常都是選中2 根線
內部的2 根線，橫豎線表示寬度是否成比例拉伸. 當時選擇的設備寬度爲320，你運行在375的設備上，你設置成80就會按比例拉伸在375的設備上
侷限性：解決父子控件的關係，不能解決兄弟控件的關係

代碼中佈局：必定在添加控件以前設置好Autoresizing
@property(nonatomic) UIViewAutoresizing autoresizingMask;
UIViewAutoresizing
UIViewAutoresizingNone 什麼都沒有
UIViewAutoresizingFlexibleLeftMargin —> 左邊不固定，右邊固定,間距隨屏幕大小拉伸
UIViewAutoresizingFlexibleRightMargin —> 右邊不固定，左邊固定,間距隨屏幕大小拉伸
UIViewAutoresizingFlexibleTopMargin —> 上邊不固定，下邊固定,間距隨屏幕大小拉伸
UIViewAutoresizingFlexibleBottomMargin —> 下邊不固定，上邊固定,間距隨屏幕大小拉伸
UIViewAutoresizingFlexibleWidth —> 寬度跟隨父控件的寬度自動成比例拉伸
UIViewAutoresizingFlexibleHeight —> 高度跟隨父控件的高度自動成比例拉伸
發現若是設置間距固定就選擇相反方向的枚舉屬性，左邊固定就用 UIViewAutoresizingFlexibleTopMargin，他的意思是右邊不固定，這樣左邊就固定

autolayout 

xcode4(iOS6.0)出現 autolayout 但不是很火，到xcode5(iOS)的時候才被普遍關注
參照：參照物，相對於那個控件設置約束
約束：參照那個控件的一些約束
圖形界面佈局

設置：align - Add New Alignment Constrains —> (添加新的對齊約束)

Horizontal Center in Container —> 水平居中約束
Vertical Center in Container —> 垂直居中約束

設置：pin - add New Constrains —> (肯定大小、尺寸)約束

上面4根線的做用設置距離父控件上下左右距離多少
下面width、height 設置控件本身的大小

託線設置約束

父子之間控件
Leading Space to Container Margin —> Leading Space to Container 距離父控件左邊的間距
Trailing Space to Container Margin ＝＝ Trailing Space to Container —> 距離父控件右邊邊的間距
Bottom Space to Container
Bottom Space to Container —> 距離父控件下邊的間距

Center Horizontally in Container —> 與父控件水平居中
Center Vertical in Container —> 與父控件垂直居中
兄弟之間控件
Horizontal Spacing —> 相對於兄弟水平間距
Vertical Spacing —> 相對於兄弟豎直間距

Top —> 相對於兄弟上邊距
Center Vertically —> 相對於兄弟垂直中心對齊
Baseline —> 文字距UI控件頂部的偏移量
Bottom —> 相對於兄弟下邊距

Leading \ Left —> 相對於兄弟左邊距
Center Horizontally —> 相對於兄弟水平中心對齊
Trailing \ Right —> 相對於兄弟右邊距

Equal Widths —> 相對於兄弟寬度
Equal Heights —> 相對於兄弟高度
Aspect Ratio —>

Hold Shift To select multiple —> 按住Shift能夠選擇多個
Hold Option for alternates —> 按住Option能夠替換(很差用)

代碼設置約束
約束添加到who上
若是這個約束只與本身有關，那麼添加到本身身上
若是這個約束本身與父控件有關，那麼添加到父控件上
若是這個約束本身與其餘控件有關係，那麼添加到他們公共父輩的控件上
NslayoutConstraint *constraint = [NSlayoutConstraint constraintWithItem:view1 attribute:attr1 relatedBy:relation toItem:view2 attribute: attr2 multiplier:multiplier constant:c];
view1 : 要約束的view
attr1 : 那個屬性(x, y, width, height)
NSLayoutAttributeLeft —> 左
NSLayoutAttributeRight —> 右
NSLayoutAttributeTop —> 上
NSLayoutAttributeBottom —> 下
NSLayoutAttributeLeading —> 左
NSLayoutAttributeTrailing —> 右
NSLayoutAttributeWidth —> 寬度
NSLayoutAttributeHeight —> 高度
NSLayoutAttributeCenterX —> 中心點X
NSLayoutAttributeCenterY —> 中心點Y
NSLayoutAttributeBaseline —> 基本線
NSLayoutAttributeLastBaseline —> 同 NSLayoutAttributeBaseline
NSLayoutAttributeFirstBaseline —> 第一條基本線
iOS8 新增約束
NSLayoutAttributeLeftMargin —> 左邊距
NSLayoutAttributeRightMargin —> 右邊距
NSLayoutAttributeTopMargin —> 上邊距
NSLayoutAttributeBottomMargin —> 下邊距
NSLayoutAttributeLeadingMargin —> 左邊距
NSLayoutAttributeTrailingMargin —> 右邊距
NSLayoutAttributeCenterXWithinMargins —> 中心X邊距
NSLayoutAttributeCenterYWithinMargins —> 中心Y邊距

NSLayoutAttributeNotAnAttribute —> 沒有邊距
relation : 約束關係
NSLayoutRelationLessThanOrEqual <=
NSLayoutRelationEqual ==
NSLayoutRelationGreaterThanOrEqual >=
view2 : 參照的view
attr2 : 參照的屬性(x, y, width, height)
multiplier : 倍數關係
c : 額外的值, 在倍數以外的值

view1.attr1 relation(= or < or >) view2.attr2 * multiplier(倍數) + c
注意：1.必定先有父控件，再添加約束，不然會報錯誤.
// 使用約束必定要設置這個值，禁止系統把AutoresizingMask的一些設置轉換成Autolayout
2. self.view1.translatesAutoresizingMaskIntoConstraints = NO;

Visual Format Language —> VFL 可視化格式語言

代碼
H:[控件(width)]—margin[控件(width)]
H:[控件(>=width@priority)]
V:[控件(height)]-margin-[控件(==控件)]
H:|-margin-[控件(width)]-margin-[控件(width)]-margin-|

width : 寬度
height : 高度
margin : 間距
H : 水平
V : 豎直

NSArray *array = [NSLayoutConstraint constraintsWithVisualFormat:VFL options:options metrics:metrics views:views];
[self.view1 addConstraints:array];
VFL : VFL語句
options : 設置這個約束的方向的一些控件對齊方式，通常不填, 若是填寫就填 kNilOptions
*********************** 之後補充其屬性什麼意思 *******************************
views : NSDictionaryOfVariableBindings(控件變量名) —> VFL中控件對應的真實控件變量
metrics NSDictionaryOfVariableBindings(變量名): —> VFL動態值

Masonry

一個基於autolayout的第三方佈局框架，大大簡化了autolayout的代碼
// 必定要添加到 # 「Masonry」
// 全部地方都不用加前綴mas_
#define MAS_SHORTHAND
// mas_equalTo基本數據類型不須要包裝(@100), 能夠直接100
#define MAS_SHORTHAND_GLOBALS
寫法
mas_ 開頭
mas_makeConstraints:
make 建立約束器
mas_remakeConstraints: 從新建立約束，把之前的約束刪掉，從新建立約束
mas_UpdateConstraints: 修改約束，覆蓋之前的一些約束
尺寸:
make.size.mas_equalTo(sizeValue).multipliedBy.offset(Value);
make.width.mas_equalTo(Value);
make.height.mas_equalTo(Value);

邊界:
make.left.mas_equalTo(Value);
make.right.mas_equalTo(Value);
make.leading.mas_equalTo(Value);
make.trailing.mas_equalTo(Value);
make.height.mas_equalTo(Value);
make.edges.mas_equalTo(Value).insets(UIEdgeInsetsMakeValue);

中心點:
make.center.mas_equalTo(centerValue);
make.centerY.mas_equalTo(Value);
make.centerX.mas_equalTo(Value);

另外一種寫法，不須要包裝
make.centerX.equalTo(centerX);

規律: make.屬性.equalTo/mas_equalTo(參照屬性).multipliedBy.offset(值)
文字描述: 約束屬性 = 參照屬性 * 值 + 偏移值
動畫：必須執行 layoutIfNeeded 刷新界面

通常1個控件是4個約束就能肯定本身的大小與位置，若是設置多個約束會衝突 若是出現黃(警告)、紅(錯誤)問題約束確定有問題，因此必須設置完約束以後沒有問題算約束成功