Objectiv-C UIKit基础 NSLayoutConstraint的使用(VFL实现)

利用VFL可视化语言 （简单的抛砖引玉）

构建3个View 橙色和绿色左中右间隔20 上间隔40 高为200

蓝色在橙色内(0,0)处 宽高为橙色的一半

实现效果如下

由于atutosize和autolayout不兼容

首先构建3个view 将设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];

//设置atutosize属性为不可用
self.view.translatesAutoresizingMaskIntoConstraints = NO;
orangeView.translatesAutoresizingMaskIntoConstraints = NO;
greenView.translatesAutoresizingMaskIntoConstraints = NO;
blueView.translatesAutoresizingMaskIntoConstraints = NO;

• 设置约束

//设置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];

   //设置orangeView,greenView垂直方向约束
   NSArray *conV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-40-[view1(200)]" options:0 metrics:nil views:@{@"view1":orangeView}];
   [self.view addConstraints:conV];

   //设置blueView水平方向约束
   NSArray *conH2 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[view1]" options:0 metrics:nil views:@{@"view1":blueView}];
   [orangeView addConstraints:conH2];

   //设置blueView垂直方向约束
   NSArray *conV2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[view1]" options:0 metrics:nil views:@{@"view1":blueView}];
   [orangeView addConstraints:conV2];

   //设置宽高约束
   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;

• 几个参数:

format 可视化语言

opts NSLayoutFormatOptions枚举 用来设置对齐

metrics 以字典的形式设置距离变量

比如 "H:|-[dis1]-[view1]-[dis2]-[view2(view1)]-20-|"这句中的[dis1] [dis2]为视图变量,将字典的view1 view2即为key 对应相应的视图

views 以字典的形式设置视图变量

比如 "H:|-20-[view1]-20-[view2(view1)]-20-|"这句中的[view1] [view2]为视图变量,将字典的view1 view2即为key 对应相应的视图

约束关系(与父类的关系)用到另一个类方法

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

几个参数:

view1 view2 约束对象

attr1 attr2属性包括 上下左右宽高中点等

relation 约束关系包括 相等 大于 小于

multiplier 需要修正的值

c 偏移量

在添加约束时 一定要记得是在父类上添加约束

比如 为 orangeView 和 greenView添加约束需要在其父类self.view上添加约束

blueView的父类是orangeView 所以给blueView添加约束时 在orangeView上添加