寫在前面
弄了下個(gè)人站...防止內(nèi)容再次被鎖定...所有東西都在這里面
welcome~
個(gè)人博客
利用VFL可視化語言 （簡(jiǎn)單的拋磚引玉）
構(gòu)建3個(gè)View 橙色和綠色左中右間隔20 上間隔40 高為200
藍(lán)色在橙色內(nèi)(0,0)處 寬高為橙色的一半
實(shí)現(xiàn)效果如下
由于atutosize和autolayout不兼容
首先構(gòu)建3個(gè)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;
- 幾個(gè)參數(shù):
format可視化語言
opts NSLayoutFormatOptions枚舉 用來設(shè)置對(duì)齊
metrics 以字典的形式設(shè)置距離變量
比如 "H:|-[dis1]-[view1]-[dis2]-[view2(==view1)]-20-|"這句中的[dis1] [dis2]為視圖變量,將字典的view1 view2即為key 對(duì)應(yīng)相應(yīng)的視圖
views 以字典的形式設(shè)置視圖變量
比如 "H:|-20-[view1]-20-[view2(==view1)]-20-|"這句中的[view1] [view2]為視圖變量,將字典的view1 view2即為key 對(duì)應(yīng)相應(yīng)的視圖
約束關(guān)系(與父類的關(guān)系)用到另一個(gè)類方法
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
幾個(gè)參數(shù):
view1 view2約束對(duì)象
attr1 attr2屬性包括 上下左右寬高中點(diǎn)等
relation 約束關(guān)系包括 相等 大于 小于
multiplier 需要修正的值
c 偏移量
在添加約束時(shí) 一定要記得是在父類上添加約束
比如 為 orangeView 和 greenView添加約束需要在其父類self.view上添加約束
blueView的父類是orangeView 所以給blueView添加約束時(shí) 在orangeView上添加
