說起自動布局文兑，現下流行的也有很多種，什么Masonry顾犹，sd_autolayout 等等工具倒庵，但是這些工具，也是基于原生的 NSLayoutConstraint來寫的,所以炫刷，很有必要了解一下NSLayoutConstraint這個東西擎宝，以及VFL 的基本語法以及規(guī)則，才能知道是如何進行代碼的自動布局浑玛。
用過 xib 的童鞋們應該知道一些自動布局的概念绍申，添加正確的約束，就可以在讓界面在不同的尺寸下進行自由的伸縮等等操作顾彰，NSLayoutConstraint正是代碼約束的意思极阅，在這個開始之前，我們要準備的東西
了解 VFL 語言：
- 1.什么是 VFL 語言：
VFL（Visual Format Language）涨享，“可視化格式語言”筋搏。
VFL是蘋果公司為了簡化autolayout的編碼而推出的抽象語言 - 2.基本的語法表
| 功能 | 表達式 |
|---|---|
| 水平方向 | H: |
| 垂直方向 | V: |
| Views | [view] |
| 關系 | >=,==,<= |
| SuperView | | |
| 空間，間隙 - | - |
| 優(yōu)先級 | @value |
舉個例子來說
例子1:H:|-20-[_areaBtton(50)]-11-[_userPhoneNum]-20-|
分開講解：
(1)H:|-20-水平方向的布局是 從屏幕左邊起20開始
(2)-[_areaBtton(50)]是areaBtton設定areaBtton 的寬度是50 注意要用[]來講控件裝起來,對于水平方向 控件后面跟著"()"里面設立的值為寬度 如果是"V"(垂直方向)那么"(50)"是代表著高度為50
(3)-11-表示距離下一個控件的的距離為11
(4)-20-| "|"表示屏幕右邊表示上一個控件距離屏幕右邊為20
(5)-[_userPhoneNum]- 表示 下一個控件為 userPhoneNum
這里不指定寬度也是可以的,你可以在控件初始化的時候就給它設定大小,如果設置代碼約束的時候不需要將其大小進行變化就可以省略,系統(tǒng)會將你設定的大小為布局后的大小但是這里 整體設立了距離屏幕右邊的距離為20 所以這個userPhoneNum 會根據屏幕的寬度來進行拉伸,例如 iphone 5
的屏幕寬度為320 那么這個 userPhoneNum 的寬度就是 320 - 20 - 20 - 50 - 11 后剩下的寬度
列子2:H:[wideView(>=60@700)]
wideView寬度大于等于60point厕隧，該約束條件優(yōu)先級為700（優(yōu)先級最大值為1000奔脐，優(yōu)先級越高的約束條件越先被滿足）
例子3:V:|-20-[redBox(50)]-20-[yellowBox(==redBox)]`
垂直方向上，20 的位置開始有 redBox高度50栏账，其下方20接一個高度等于redBox高度的yellowBox,然后直接離下面多少不用管,所以好像這個樣子
其實 VFL 基本語法還是很好懂的,使用方法后面會有代碼講解,特別是如果約束寫的不對的時候,崩潰日志會有個^這種小箭頭來表示哪個地方報錯了帖族。
好了,VFL 先講到這里,下面開始說NSLayoutConstraint這個東西
iOS 里面 官方的 Demo
/* Create an array of constraints using an ASCII art-like visual format string.
*/
+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString *,id> *)metrics views:(NSDictionary<NSString *, id> *)views;
具體說一下這幾個參數
(1)format 就是填寫剛剛咱們學習的 VFL 語言,注意,這里是需要將 VFL語言寫成字符串傳遞進去,所以這一步很容易出錯,錯了也不會有報錯提示,需要咱們平日里多加練習與鍛煉才能很好的避免一些錯誤
(2)opts
typedef NS_ENUM(NSInteger, NSLayoutRelation) {
NSLayoutRelationLessThanOrEqual = -1, //小于等于
NSLayoutRelationEqual = 0, //等于
NSLayoutRelationGreaterThanOrEqual = 1, //大于等于
};
typedef NS_ENUM(NSInteger, NSLayoutAttribute) {
NSLayoutAttributeLeft = 1, //左側
NSLayoutAttributeRight, //右側
NSLayoutAttributeTop, //上方
NSLayoutAttributeBottom, //下方
NSLayoutAttributeLeading, //首部
NSLayoutAttributeTrailing, //尾部
NSLayoutAttributeWidth, //寬度
NSLayoutAttributeHeight, //高度
NSLayoutAttributeCenterX, //X軸中心
NSLayoutAttributeCenterY, //Y軸中心
NSLayoutAttributeBaseline, //文本底標線
NSLayoutAttributeNotAnAttribute = 0 //沒有屬性
};
NSLayoutAttributeLeft/NSLayoutAttributeRight 和NSLayoutAttributeLeading/NSLayoutAttributeTrailing的區(qū)別是left/right永遠是指左右栈源，而leading/trailing在某些從右至左習慣的地區(qū)會變成挡爵，leading是右邊，trailing是左邊甚垦。
(3)metrics 表示使用到的度量數組,你可以把一些VFL 語言用的值定義在一個字典里面例如創(chuàng)建一個字典
NSDictionary *metres = @{@"leftArglin":@20}
然后在 VFL 語言里面所用到的距離左邊位置的距離,可以用leftArglin 來代替,這樣的話,改想要修改距離左邊的距離,就致用修改字典里面的數值,而不用每個使用到左邊距離的地方都意義修改,方便大家,當然這個值可以傳 nil
(4)views：就是上面所加入到NSDictionary中的綁定的View,就是需要布局的 view 都需要寫入一個字典里面來才可以.
好了,以上就是基本的語法以及準備的事項,那么現在就開始具體的代碼吧
Demo
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic , strong)UIView *redView;
@property (nonatomic , strong)UIView *yellowView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
///先將控件添加到視圖上
[self.view addSubview:self.redView];
[self.view addSubview:self.yellowView];
///注意translatesAutoresizingMaskIntoConstraints 一定要設置為 NO
self.redView.translatesAutoresizingMaskIntoConstraints = NO;
self.yellowView.translatesAutoresizingMaskIntoConstraints = NO;
///創(chuàng)建第四個參數用到布局 views 的字典 注意 這個地方用 NSDictionaryOfVariableBindings
NSDictionary *views = NSDictionaryOfVariableBindings(_redView,_yellowView);
///創(chuàng)建第三個參數 所用到的 布局度量 metres 字典
NSDictionary *metres = @{@"redViewnW":@100,@"leftArglin":@50,@"rightArglin":@50};
///現在開始創(chuàng)建約束
///水平方向的約束
NSArray *HContrains = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-leftArglin-[_redView(redViewnW)]-11-[_yellowView]-rightArglin-|" options:0 metrics:metres views:views];
///垂直方向的約束
NSArray *VContrains = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[_redView(50)]-20-[_yellowView(==_redView)]" options:0 metrics:metres views:views];
///注意上面 如果V:|-20-[_redView(50)]-20-[_yellowView(==_redView)] 換成了V:|-20-[_redView(50)]-20-[_yellowView(==_redView)]-| 會把_yellowView拉著頂到父視圖的下邊,所以如果你寫了這個-| 又和_yellowView 高度定死和 距離 _redView 20 起了沖突 所以會報約束異常
///添加約束
[self.view addConstraints:HContrains];
[self.view addConstraints:VContrains];
}
#pragma mark - 懶加載兩個 view 均未設置大小
-(UIView *)redView
{
if (!_redView) {
_redView = [[UIView alloc]init];
_redView.backgroundColor = [UIColor redColor];
}
return _redView;
}
-(UIView *)yellowView
{
if (!_yellowView) {
_yellowView = [[UIView alloc]init];
_yellowView.backgroundColor = [UIColor yellowColor];
}
return _yellowView;
}
@end
附上截圖一份
最后
這里有別人總結的 VFL 使用規(guī)則 看起來簡潔大方可以參考一下
使用規(guī)則:
|: 表示父視圖
-:表示距離
V: :表示垂直
H: :表示水平
= :表示視圖間距茶鹃、寬度和高度必須大于或等于某個值
<= :表示視圖間距、寬度和高度必須小宇或等于某個值
== :表示視圖間距艰亮、寬度或者高度必須等于某個值
@ :>=闭翩、<=、== 限制 最大為 1000
|-[view]-|: 視圖處在父視圖的左右邊緣內
|-[view] : 視圖處在父視圖的左邊緣
|[view] : 視圖和父視圖左邊對齊
-[view]- : 設置視圖的寬度高度
|-30.0-[view]-30.0-|: 表示離父視圖 左右間距 30
[view(200.0)] : 表示視圖寬度為 200.0
|-[view(view1)]-[view1]-| :表示視圖寬度一樣迄埃，并且在父視圖左右邊緣內
V:|-[view(50.0)] : 視圖高度為 50
V:|-(==padding)-[imageView]->=0-[button]-(==padding)-| : 表示離父視圖的距離
為Padding,這兩個視圖間距必須大于或等于0并且距離底部父視圖為 padding疗韵。
[wideView(>=60@700)] :視圖的寬度為至少為60 不能超過 700
如果沒有聲明方向默認為 水平 V:
