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

写在前面
弄了下个人站...防止内容再次被锁定...所有东西都在这里面
welcome~
个人博客

利用VFL可视化语言 （简单的抛砖引玉）
构建3个View 橙色和绿色左中右间隔20 上间隔40 高为200
蓝色在橙色内(0,0)处 宽高为橙色的一半
实现效果如下

view.png

由于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 *)metrics views:(NSDictionary *)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上添加