(八十八)VFL语言初步 - 实现布局

【基本语法】

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]; }
上一篇:Kafka概述(一)


下一篇:渗透挑战赛:从SQL注入到管理员权限