VFL示例

上篇文章向大家介绍了VFL的基本语法点，如果对以下示例不熟的童鞋，可以前去参考。废话不多说，我们直接来看示例。

示例一

将五个大小相同、颜色不同的

view

排成一行，

view

间的间隔为

15px

,第一个

view

的间隔与屏幕的左边间隔

10px

,最后一个

view

的间隔与屏幕的右边间隔也为

10px

。

//根据屏幕的宽度，计算view的宽度和高度
CGFloat width = ([[UIScreen mainScreen] bounds].size.width-2*10-4*15)/5;
CGFloat height = width;

//固定第一个view
UIView *firstView = [UIView new];
firstView.backgroundColor = [UIColor blackColor];
// 将次属性设置为NO,表示将使用AutoLayout的方式来布局
firstView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:firstView];

//------使用VFL为第一个view添加约束------
//在水平方向上，让firstview的左边与父视图的左边间隔10px,且自身宽度为width
NSArray *constraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-10-[firstView(==width)]" options:0 metrics:@{@"width":@(width)} views:NSDictionaryOfVariableBindings(firstView)];
//在垂直方向上，让firstView的上边与父视图的上边间隔100px,且自身的高度为height
NSArray *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[firstView(==height)]" options:0 metrics:@{@"height":@(height)} views:NSDictionaryOfVariableBindings(firstView)];
[self.view addConstraints:constraints1];
[self.view addConstraints:constraints2];

//定义一个颜色数组
NSArray *colors = @[[UIColor redColor],[UIColor orangeColor],[UIColor yellowColor],[UIColor blueColor]];
//定义一个views数组
NSMutableArray *views = [NSMutableArray array];
[views addObject:firstView];
for (int i = 0; i < 4; i++) {
UIView *view = [UIView new];
view.backgroundColor = colors[i];
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];
[views addObject:view];
}

//依次给views数组中的view使用vfl添加约束
for (int i = 1; i < views.count; i++) {
UIView *view1 = views[i-1];
UIView *view2 = views[i];
NSDictionary *bindings = NSDictionaryOfVariableBindings(view1,view2);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[view1]-15-[view2(==width)]" options:0 metrics:@{@"width":[NSNumber numberWithFloat:width]} views:bindings];
[self.view addConstraints:constraints];

}
UIView *view1 = views[0];
for (int i = 0; i < views.count; i++) {
UIView *view2 = views[i];
NSDictionary *bindings = NSDictionaryOfVariableBindings(view1,view2);
NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-100-[view2(==view1)]" options:0 metrics:nil views:bindings];
[self.view addConstraints:constraints];

}

效果截图:



下篇示例将会是使用

VFL

对登录界面进行布局，喜欢我的博客的童鞋可以关注一波！