iOS little thing about the VFL

VFL:Visual Format language

Writing:

Functional expressions

Horizontal direction H:

Vertical direction V:

views [view]

Superview |

Relationship >=,==,<=

Space, Gap-

Priority @value

It is important to note that in the code created by UIView, be sure to add the following code

Xxx.translatesautoresizingmaskintoconstraints=no;

If you do not have the above line, your constraint will not take effect, and the console will output a series of errors.

The specific code:

//1. Adding Controls

UIView *blueview = [[UIView alloc] init];

Blueview. backgroundcolor = [uicolor bluecolor];

Blueview. translatesautoresizingmaskintoconstraints = NO;

[self. View addsubview: Blueview];

UIView *redview = [[UIView alloc] init];

Redview. backgroundcolor = [uicolor redcolor];

Redview. translatesautoresizingmaskintoconstraints = NO;

[self. View addsubview: redview];

//2.VFL build constraint

nsdictionary *mertrics = @{@ "margin" : @20}; // parameter \ value

nsdictionary *views = nsdictionaryofvariablebindings(Blueview, redview);

nsarray *conts = [nslayoutconstraint constraintswithvisualformat:@ "h:|-margin-[ Blueview]-margin-[redview (==blueview)]-margin-| " options:nslayoutformatalignalltop | nslayoutformatalignallbottom metrics: mertrics views: views];

nsarray *conts2 = [nslayoutconstraint constraintswithvisualformat:@ "v:[blueview (= = Blueheight)]-margin-| " options:0 metrics:@{@ "Blueheight" : @40, @ "margin" : @20} views : views];

[self. View addconstraints: conts];

[self. View addconstraints: conts2];

UIButton *button=[[UIButton alloc]init];

button=[UIButton buttonwithtype:uibuttontypesystem];

[Button settitle:@ "VFL" forstate:uicontrolstatenormal];

button. translatesautoresizingmaskintoconstraints=NO;

[Button setbackgroundcolor: [uicolor blackcolor];

[self. View addsubview: button];

    nsarray *hconstraint =[ nslayoutconstraint constraintswithvisualformat :@ "h:|-20-[button]-200-|" options:0 metrics:nil views :@{@ "button" :button}

    nsarray *vconstraint = [ nslayoutconstraint constraintswithvisualformat :@ "v:|-300-[button]-200-|" options:0 metrics:nil views :@{@ "button" :button}

[self. View addconstraints: hconstraint];

[self. View addconstraints: vconstraint];

iOS little thing about the VFL