IOS:VFL language

VFL language

  Introduction:
What is the VFL language? The VFL full name is visual format Language, which translates to "visual formatting language" .The VFL is an abstract language that Apple has introduced to simplify AutoLayout coding example of the VFL:H:[cancelbutton (]-12-[acceptbutton)]CancelButton Width 72,acceptbutton width 50, the distance between them H:[wideview (>[email protected])Wideview width greater than or equal to 60point, the constraint priority is 700 (the priority is the maximum of 1000, the higher the precedence of the constraint is satisfied first) V:[redbox]-[yellowbox (==redbox)]In the vertical direction, there is a redbox, immediately below a height equal to Redbox height Yellowbox H:|-10-[find]-[findnext]-[findfield (>=20)]-|horizontally, find is the default interval width for the left edge of the parent view, followed by the default width of FindNext distance from the find interval, followed by a findfield with a width of not less than 20, which is the default width of FindNext and the right edge of the parent view. (Vertical bar "|" indicates the edge of the Superview) use of the VFL:using the VFL to create an array of constraints

+ (Nsarray *) Constraintswithvisualformat: (NSString *) format options: (nslayoutformatoptions) OPTs metrics: ( Nsdictionary *) Metrics Views: (Nsdictionary *) views;

FORMAT:VFL Statementsopts: Constraint typethe specific values used in the METRICS:VFL statementthe controls used in the VIEWS:VFL statement Create a shortcut macro definition for a dictionary that contains the controls used within the VFL statement

Nsdictionaryofvariablebindings (...)

The concrete examples are as follows:

Practice One:

Add 2 view,1 blue, 1 red at the bottom of the controller view

2 View width, height is always equal

equal spacing from the left, right, bottom, and 2 view of a parent control

in the viewcontroller.m file-(void) viewdidload{...} The code in the method is as follows: //Create two views view1 and View2,view1 are blue, View2 is red

    // Create View1    UIView *view1 = [[UIView alloc]init];     = [Uicolor bluecolor];     = NO;    [Self.view Addsubview:view1];         // Create View2    UIView *view2 = [[UIView alloc]init];     = [Uicolor redcolor];     = NO;    [Self.view addsubview:view2];

//Using the VFL language to generate VIEW1, VIEW2 constraints

    //generating constraints using the VFL languageNsdictionary *metrics = @{@"margin":@ -,@"Height":@ $}; //nsdictionary *views = @{@ "View1": view1,@ "View2": view2};//function as in the following dictionaryNsdictionary *views =Nsdictionaryofvariablebindings (VIEW1,VIEW2);
   //Get constraints on the horizontal direction of View1 and View2 Nsarray*conts = [Nslayoutconstraint constraintswithvisualformat:@"h:|-margin-[view1]-margin-[view2 (==view1)]-margin-|"Options0Metrics:metrics Views:views];
    //Get the View1 vertical direction constraint Nsarray*conts2 = [Nslayoutconstraint constraintswithvisualformat:@"v:[view1 (height)]-margin-|"Options0Metrics:metrics Views:views];
    //Get constraints on View2 vertical direction Nsarray*CONTS3 = [Nslayoutconstraint constraintswithvisualformat:@"v:[view2 (==view1)]-margin-|"Options0Metrics:metrics Views:views];

//Add the resulting constraint to their parent view

    // add a constraint generated by the VFL language on the parent view     [Self.view addconstraints:conts];    [Self.view addconstraints:conts2];    [Self.view Addconstraints:conts3];

The demo results of the rotate screen are:

Exercise two:Add 2 view,1 blue, 1 red on top of controller view2 View heights are always equalRed View and Blue view right alignBlue View Distance is equal to the left, right, and top of the parent controlBlue View distance with red view pitch fixedalign the left side of the red view with the midpoint of the parent control Analysis: Although the VFL language simplifies the AutoLayout layout of code, it also has the flaw that it cannot generate constraints at the view and center points, and then needs to be paired with AutoLayout code to complete this requirement. Only the above questions can be seen, the view2 need to usein the viewcontroller.m file-(void) viewdidload{...} The code in the method is as follows:
creating Views View1 and View2

    // Create View1    UIView *view1 = [[UIView alloc]init];     = [Uicolor bluecolor];     = NO;    [Self.view Addsubview:view1];             // Create View2    UIView *view2 = [[UIView alloc]init];     = [Uicolor redcolor];     = NO;    [Self.view addsubview:view2];

use the VFL language to generate constrained, view1, and view2 vertical constraints in view1 horizontal direction

    //creating VIEW1 constraints using the VFL languageNsdictionary *metrics = @{@"Height":@ -,@"margin":@ -}; Nsdictionary*views =nsdictionaryofvariablebindings (VIEW1,VIEW2);
    //Get constraints on view1 in the horizontal direction Nsarray*CONSTR = [Nslayoutconstraint constraintswithvisualformat:@"h:|-margin-[view1]-margin-|"Options0Metrics:metrics Views:views];    //Get Constraints on View1 and view2 in the vertical direction Nsarray*CONSTR2 = [Nslayoutconstraint constraintswithvisualformat:@"v:|-margin-[view1 (height)]-margin-[view2 (==view1)]"Options0Metrics:metrics Views:views];

to create a VIEW2 constraint using AutoLayout

  #pargma Mark-  
 
  //create a constraint to the right of the view2 to the right of the parent view  nslayoutconstraint *lcright = [nslayou Tconstraint constraintwithitem:view2 attribute:nslayoutattributetrailing relatedby:nslayoutrelationequal toItem: Self.view attribute:nslayoutattributetrailing multiplier:1.0  constant:-< span style= "COLOR: #800080;" >20  ]; 
 //creates a constraint on the left side of the VIEW2 with the parent View Center  nslayoutconstraint  *constraint = [Nslayoutco Nstraint constraintwithitem:view2 attribute:nslayoutattributeleading relatedby:nslayoutrelationequal toItem: Self.view attribute:nslayoutattributecenterx multiplier:1.0  Constant:0 ]; 

Add constraint

    // add a constraint created by AutoLayout to the parent view     [Self.view Addconstraints:@[lcright,constraint]];             // add a constraint generated by the VFL to the parent view     [Self.view addconstraints:constr];    [Self.view ADDCONSTRAINTS:CONSTR2];

The demo results of the rotating screen are as follows:

IOS:VFL language