AutoLayout自動(dòng)布局之VFL語(yǔ)言代碼實(shí)現(xiàn)（一個(gè)神奇的語(yǔ)言）

2019-11-14 18:28:23

字體：大中小

供稿：網(wǎng)友

一.什么是VFL語(yǔ)言？為什么要VFL語(yǔ)言？

VFL全稱是Visual Format Language，翻譯過(guò)來(lái)是“可視化格式語(yǔ)言”

VFL是蘋果公司為了簡(jiǎn)化Autolayout的編碼而推出的抽象語(yǔ)言

代碼分析：

1    NSArray *arr = [NSLayoutConstraint constraintsWithVisualFormat:<#(NSString *)#> options:<#(NSLayoutFormatOptions)#> metrics:<#(NSDictionary *)#> views:<#(NSDictionary *)#>]

VisualFormat:VFL語(yǔ)句

options:約束類型

metrics ：VFL語(yǔ)句中用到的具體數(shù)值

views ：VFL語(yǔ)句中用到的控件

二.例子

1.簡(jiǎn)單VFL

 1 - (void)viewDidLoad{
 2     [super viewDidLoad];
 3     UIView *redView = [[UIView alloc]init]; 
 4     redView.backgroundColor = [UIColor redColor]; 
 5     redView.translatesAutoresizingMaskIntoConstraints= NO;
 6     [self.view addSubview:redView];

 7     UIView *blueView = [[UIView alloc]init]; 8     blueView.backgroundColor = [UIColor blueColor]; 9     blueView.translatesAutoresizingMaskIntoConstraints= NO;10     [self.view addSubview:blueView];11    //水平方向12     NSString *hVFL=@"H:|-20-[redView]-30-[blueView(==redView)]-20-|";13     NSArray *hCons =[NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"redView":redView,@"blueView":blueView}];14     [self.view addConstraints:hCons];15     //垂直方向16     NSString *vVFL =@"V:|-20-[redView(50)]";17     NSArray *vCons =[NSLayoutConstraint constraintsWithVisualFormat:vVFL options:0 metrics:nil views:@{@"redView":redView}];18     [self.view addConstraints:vCons];19 }

效果：

2. 復(fù)雜VFL無(wú)法完整表示必須結(jié)合 constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:. 一起使用

 1 - (void)viewDidLoad{
 2     [super viewDidLoad];
 3     UIView *blueView = [[UIView alloc]init];
 4     blueView.backgroundColor = [UIColor blueColor];
 5     blueView.translatesAutoresizingMaskIntoConstraints= NO;
 6     [self.view addSubview:blueView];

 7     UIView *redView = [[UIView alloc]init]; 8     redView.backgroundColor = [UIColor redColor]; 9     redView.translatesAutoresizingMaskIntoConstraints= NO;10     [self.view addSubview:redView];11     //水平方向12     NSString *hVFL =@"H:|-30-[blueView]-30-|";13     NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:0 metrics:nil views:@{@"blueView":blueView}];14     [self.view addConstraints:hCons];15     //垂直方向16     NSString *vVFL =@"V:|-30-[blueView(50)]-20-[redView(==blueView)]";17     NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllRight metrics:nil views:@{@"blueView":blueView,@"redView":redView}];18     [self.view addConstraints:vCons];19    20     //VFL無(wú)法描述 redView 左邊 和 blueViwe 中心對(duì)齊21     NSLayoutConstraint *redLeftCon = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeCenterX multiplier:1.0 constant:0.0];22     [self.view addConstraint:redLeftCon];23 }

//注意：官方文檔中
The notation PRefers good visualization over completeness of expressibility. Most of the constraints that are useful in real user interfaces can be expressed using visual format syntax, but there are a few that cannot. One useful constraint that cannot be expressed is a fixed aspect ratio (for example, imageView.width = 2 * imageView.height). To create such a constraint, you must use

constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:.

效果：