【基本语法】
VFL的语法为H:和V:开头,代表水平和垂直。
接下来如果要涉及距离,使用|-x-,x为距离的点数。
对于视图,用[ ]包围,例如[blueView]。
①下面的语句实现了blueView水平方向左右各距离控制器的边缘20点:
H:|-20-[blueView]-20|
②如果要指定宽高,在视图名称之后用圆括号内填入常量数值,下面的代码实现了blueView距离左边20点,宽度固定为120点:
H:|-20-[blueView(20)]
③如果要指定相等关系,例如redView的宽度和blueView相等,则在开头为H:的条件下写[redView(==blueView)]。
④如果出现乘除计算,不能使用VFL,这时候应该使用NSLayoutConstraint的constraintWithItem:::::方法,计算公式为firstItem.x = (secondItem.x + constant) * multiplier,x为attribute指定的计算量,注意这个约束应该被添加到他们公共的父节点上。
【实现方法】
使用constraintsWithVisualFormat::::方法:
/**
Format: VFL语句
options:对齐方式
metrics:VFL用到的变量
views:VFL用到的视图
*/
+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views;
①如果不需要对齐,options填入0。
②views为在VFL中对应实际View的依据,例如@{@"redView":self.redView},当VFL中出现redView时,系统会通过views字典查找到self.redView,从而实现修改self.redView的尺寸。
③metrics为VFL中使用的变量,对于多次出现的值,可以用一个变量代替,然后在metrics中指定变量的值。
【实例】
下面的代码实现了blueView距离控制器View边缘左、中、右各20点,redView在blueView下20点,右对齐,宽度为blueView的一半。
需要注意的是禁用AutoResizing。
- (void)viewDidLoad { [super viewDidLoad]; UIView *blueView = [[UIView alloc] init];
blueView.backgroundColor = [UIColor blueColor];
[self.view addSubview:blueView]; UIView *redView = [[UIView alloc] init];
redView.backgroundColor = [UIColor redColor];
[self.view addSubview:redView]; blueView.translatesAutoresizingMaskIntoConstraints = NO;
redView.translatesAutoresizingMaskIntoConstraints = NO; NSArray *blueViewHori = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nil views:@{@"blueView":blueView}];
[self.view addConstraints:blueViewHori];
NSArray *blueRedVerti = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
[self.view addConstraints:blueRedVerti]; NSLayoutConstraint *redViewWidthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:redViewWidthConstraint]; }