写在前面
弄了下个人站...防止内容再次被锁定...所有东西都在这里面
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<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上添加
