1. iOS兩種自適應布局方式:(修正說明:)
-AutoLayout(自動布局) + SizeClasses(尺寸類別)
-Autoresizing (自動調整尺寸/彈簧式調整尺寸)
前者 AutoLayout 是從iOS6出現,通過創建視圖約束實現自適應,SizeClasses是iOS8 開始出現,用於配合AutoLayout使用,為解決所有(包括iPhone,iPad)iOS設備屏幕尺寸和屏幕旋轉時UI的適配。
后者是早期開發使用的適配界面的方式,現在仍然保留。通過彈簧式調整控件尺寸,使其適應屏幕的尺寸變化。
蘋果官方建議使用AutoLayout。
Autoresizing 缺點:
> 其描述界面變化規則不夠靈活,很多變化規則根本無法精確描述。autoresizingMask縮放比例是UIKit內部計算的,開發者無法指定縮放比例的精確值。
- > 變化規則只能基於父視圖與子視圖之間,無法建立同級視圖或者跨級視圖之間的關系。
AutoLayout 的核心原理:
> view具有自我計算尺寸,布局的能力。通過它自身的內容,能夠得到尺寸。
> view的布局位置,確定於它與superview及其他view的關系。
> 與傳統的autoresizingmask自適應相比,AutoLayout更精確,能絕對的確定view的布局。
> view不一定需要一個初始的rect。AutoLayout中,view如果有足夠的constraint,便可以確定自己的尺寸和位置,並且知道自己和其他view的關系。即,想確定view的布局,就給它(們)添加constraint。
2. AutoLayout 自動布局 有三種方式:
> 在Xcode 可視化界面 Interface Builder 中右下角添加並設置約束
> 純代碼添加約束
> 純代碼通過可視化格式語言VFL(Visual Format Language) 添加約束
2.1 可視化設置約束
Interface Builder中,右下角,依次是Alignment(布局),Pin(固定),Resolve(解決約束錯誤)
以下列出三項中常用的項
Alignment: Horizontally in Container 在容器中水平中心,值為0,設置其他值時,表示水平方向偏移中心位置量
Vertially in Container 在容器中豎直中心,值為0,設置其他值時,表示水平方向偏移中心位置量
Pin:
上方四個值,從左側順時針依次是:
Leading Space to Superview // 相對於父視圖的左間距 leading:首部
Top Space to Superview // 相對於父視圖的上間距
Trailing Space to Superview // 相對於父視圖的右間距 trailing:尾部
Bottom Space to Superview // 相對於父視圖的底間距
Width : 固定自身寬度
Height : 固定自身高度
若要使多個視圖相同的寬度,高度,則先同時選中多個視圖,然后在Pin中選擇:
EqualWidths: 多個視圖相同寬度;EqualHeights: 多個視圖相同高度
若要使兩個視圖水平方向或垂直方向上相互之間的距離固定,先選中其中一個視圖,同時按住鍵盤上control鍵,拉線到另一個視圖,在彈出框中:
選中 Horizontal Spacing (水平方向間距) 或 Vertical Spacing(豎直方向間距),然后在被選中視圖的Size Inspector(右側倒數第二個選項卡) 中Constraints 欄目下,如圖所示: 點擊“Edit”,
彈出 在 constant中輸入固定間距值
Resolve: 主要使用到 Clear Constraints 清除視圖的約束
2.2 純代碼設置約束
NSLayoutConstraint 布局約束類
> 純代碼方式添加視圖,不指定frame(若可視化下添加其位置,大小對約束有影響,會產生沖突)
> 設置禁止自動尺寸轉換成約束,否則會產生約束沖突
被約束的視圖.translatesAutoresizingMaskIntoConstraints = NO
在可視化下Interface Builder 上默認設置就是關閉的
> 創建約束
[NSLayoutConstraint constraintWithItem:lb attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100]
// 參數一:被約束的視圖:view1
// 參數二:指定在被約束的視圖哪個屬性上約束,位置或大小
// 參數三:被約束的視圖與參照視圖指定屬性之間的關系
// 參數四:參照視圖:view2
// 參數五:參照視圖的屬性
// 參數六: multiplier:被約束視圖指定屬性是參照視圖指定屬性的多少倍
// 參數七:被約束視圖的指定屬性需要加的浮點數 value
計算公式:view1.attr [=,>=,<=] view2.attr * multiplier + value;
> 添加約束
注意:約束是添加到參照視圖上。
[view2 addConstraint: ]
[擴展] 第三方庫實現約束 Masonry
官網: https://github.com/SnapKit/Masonry
2.3 VFL設置約束
通過 NSLayoutConstraint 類方法:
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
示例:
NSArray *constraints=[NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[button1(==height)]"
options:0
metrics:@{@"height":@30}
views:NSDictionaryOfVariableBindings(button1,button2)];