寫在前面
弄了下個人站...防止內(nèi)容再次被鎖定...所有東西都在這里面
welcome~
個人博客

利用VFL可視化語言 （簡單的拋磚引玉）
構(gòu)建3個View 橙色和綠色左中右間隔20 上間隔40 高為200
藍色在橙色內(nèi)(0,0)處 寬高為橙色的一半
實現(xiàn)效果如下

view.png

由于atutosize和autolayout不兼容
首先構(gòu)建3個view 將設(shè)atutosize為不可用

UIView *orangeView = [[UIView alloc] init];
orangeView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:orangeView];

UIView *greenView = [[UIView alloc] init];
greenView.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenView];

UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[orangeView addSubview:blueView];

//設(shè)置atutosize屬性為不可用
self.view.translatesAutoresizingMaskIntoConstraints = NO;
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
greenView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.translatesAutoresizingMaskIntoConstraints = NO;

• 設(shè)置約束

//設(shè)置orangeView,greenView水平方向約束
   NSArray *conH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1]-20-[view2(==view1)]-20-|" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"view1":orangeView,@"view2":greenView}];
   [self.view addConstraints:conH];
   
   //設(shè)置orangeView,greenView垂直方向約束
   NSArray *conV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(200)]" options:0 metrics:nil views:@{@"view1":orangeView}];
   [self.view addConstraints:conV];

   
   
   //設(shè)置blueView水平方向約束
   NSArray *conH2 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[view1]" options:0 metrics:nil views:@{@"view1":blueView}];
   [orangeView addConstraints:conH2];
   
   //設(shè)置blueView垂直方向約束
   NSArray *conV2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[view1]" options:0 metrics:nil views:@{@"view1":blueView}];
   [orangeView addConstraints:conV2];
   
   //設(shè)置寬高約束
   NSLayoutConstraint *conWidth = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:orangeView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
   [orangeView addConstraint:conWidth];
   NSLayoutConstraint *conHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:orangeView attribute:NSLayoutAttributeHeight multiplier:0.5 constant:0];
   [orangeView addConstraint:conHeight];

下面來解釋下VFL的使用

使用NSLayoutConstraint類方法

+ (NSArray<__kindof NSLayoutConstraint *> *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(nullable NSDictionary<NSString> *)metrics views:(NSDictionary<NSString> *)views;

• 幾個參數(shù):

format可視化語言
opts NSLayoutFormatOptions枚舉 用來設(shè)置對齊
metrics 以字典的形式設(shè)置距離變量
比如 "H:|-[dis1]-[view1]-[dis2]-[view2(==view1)]-20-|"這句中的[dis1] [dis2]為視圖變量,將字典的view1 view2即為key 對應(yīng)相應(yīng)的視圖
views 以字典的形式設(shè)置視圖變量
比如 "H:|-20-[view1]-20-[view2(==view1)]-20-|"這句中的[view1] [view2]為視圖變量,將字典的view1 view2即為key 對應(yīng)相應(yīng)的視圖

約束關(guān)系(與父類的關(guān)系)用到另一個類方法

+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

幾個參數(shù):
view1 view2約束對象
attr1 attr2屬性包括 上下左右寬高中點等
relation 約束關(guān)系包括 相等 大于 小于
multiplier 需要修正的值
c 偏移量

在添加約束時 一定要記得是在父類上添加約束
比如 為 orangeView 和 greenView添加約束需要在其父類self.view上添加約束
blueView的父類是orangeView 所以給blueView添加約束時 在orangeView上添加