AutoLayout自動布局之VFL語言代碼實現（一個神奇的語言），autolayoutvfl

AutoLayout自動布局之VFL語言代碼實現（一個神奇的語言），autolayoutvfl
一.什麼是VFL語言？為什麼要VFL語言？VFL全稱是Visual Format Language，翻譯過來是“可視化格式語言”VFL是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言程式碼分析：

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

VisualFormat:VFL語句 options:約束類型 metrics ：VFL語句中用到的具體數值 views ：VFL語句中用到的控制項  二.例子1.簡單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. 複雜VFL無法完整表示 必須結合 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無法描述 redView 左邊 和 blueViwe 中心對齊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:.

效果：