AutoLayout: VFL language code implementation (a magic language) and autolayoutvfl

AutoLayout: VFL language code implementation (a magic language) and autolayoutvfl
1. What is VFL? Why is VFL required?VFL stands for Visual Format Language. It is translated as "Visual Format Language". VFL is an abstract Language code analysis launched by Apple to simplify Autolayout encoding:

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

VisualFormat:VFL statement Options:Constraint type Metrics:Specific values used in VFL statements Views:Controls used in VFL statements Ii. Example1. Simple 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 // horizontal direction 12 NSString * hVFL = @ "H: |-20-[redView]-30-[blueView (= redView)] -20-| "; 13 NSArray * hCons = [NSLayoutConstraint constraintsWithVisualFormat: hVFL options: cached | 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}

Effect:

2. Complex VFL cannot be fully expressed and must be combinedConstraintWithItem: 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 // horizontal direction 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: Using metrics: nil views :@{@" blueView ": blueView, @ "redView": redView}]; 18 [self. view addConstraints: vCons]; 19 20 // VFL cannot describe the center alignment between the left side of redView and blueViwe 21 NSLayoutConstraint * redLeftCon = [lateral navigation: redView attribute: Lateral relatedBy: Lateral toItem: NSLayoutAttributeCenterX multiplier: 1.0 constant: 0.0]; 22 [self. view addConstraint: redLeftCon]; 23}

// Note: official documents
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 :.

Effect: