Example of autolayout code implementation-01 linear formula

Example of autolayout code implementation-01 linear formula

1. Example 1

Requirement: A view with a width and height of 200 is always displayed in the center of the screen.

1 // 1. create a Blue View 2 uiview * blueview = [[uiview alloc] init]; 3 blueview. backgroundcolor = [uicolor bluecolor]; 4 // This attribute must be disabled when autolayout is used, meaning that autoresizingmask should not be applied to 5 blueview in contrainsts. translatesautoresizingmaskintoconstraints = no; 6 // you must add the view to the parent view before using autolayout. 7 [self. view addsubview: blueview]; 8 9 10 // 2. add constraints to the red view 11 // 2. 1. constraint width 12 cgfloat width = 200; 13 // create a constraint object, which is expressed in the linear formula Y = ax + B; 14 nslayoutconstraint * widthconst = [nslayoutconstraint constraintwithitem: blueview attribute: nslayoutattributewidth relatedby: nslayoutrelationequal toitem: Nil attribute: constraint multiplier: 1.0 constant: width]; 15 // constraints unrelated to other views can be added to 16 [blueview addconstraint: widthconst]; 17 18 // 2. 2. constraints height 19 cgfloat Height = 200; 20 nslayoutconstraint * heightconst = [nslayoutconstraint constraintwithitem: blueview attribute: constraint relatedby: constraint toitem: Nil attribute: Limit multiplier: 1.0 constant: height] 21 [blueview addconstraint: heightconst]; 22 23 // 2. 3. constraint center location 24 nslayoutconstraint * centerxconst = [nslayoutconstraint constraintwithitem: blueview attribute: nslayoutattributecenterx relatedby: nslayoutrelationequal toitem: Self. view attribute: nslayoutattributecenterx multiplier: 1.0 constant: 0]; 25 // constraints related to other views are added to the parent view closest to itself 26 [self. view addconstraint: centerxconst]; 27 28 nslayoutconstraint * centeryconst = [nslayoutconstraint constraintwithitem: blueview attribute: descrirelatedby: nslayoutrelationequal toitem: Self. view attribute: nslayoutattributecentery multiplier: 1.0 constant: 0]; 29 [self. view addconstraint: centeryconst];

Result: Landscape screen:

2. Example 2

Requirement: create two views, one in blue and one in red. The distance between blue and the top, left, and right of the screen is 20, make the spacing between the top of the red view and the bottom of the Blue View 20, and the right edge of the two is aligned.

 

1 // 1. blue View 2 uiview * blueview = [[uiview alloc] init]; 3 blueview. backgroundcolor = [uicolor bluecolor]; 4 blueview. translatesautoresizingmaskintoconstraints = no; 5 [self. view addsubview: blueview]; 6 7 // 2. red view 8 uiview * redview = [[uiview alloc] init]; 9 redview. backgroundcolor = [uicolor redcolor]; 10 redview. translatesautoresizingmaskintoconstraints = no; 11 [self. view addsubview: redview]; 12 13 // 3. blue View constraints 14 // 3. 1. height 15 cgfloat Height = 40; 16 nslayoutconstraint * blueheight = [nslayoutconstraint constraintwithitem: blueview attribute: descrirelatedby: descritoitem: Nil attribute: descrimultiplier: 1.0 constant: height]; 17 [blueview addconstraint: blueheight]; 18 19 // 3. 2. left margin 20 cgfloat margin = 20; 21 nslayoutconstraint * leftmargin = [nslayoutconstraint constraintwithitem: blueview attribute: nslayoutattriattributeleft relatedby: nslayoutrelationequal toitem: Self. view attribute: nslayoutattributeleft multiplier: 1.0 constant: margin]; 22 [self. view addconstraint: leftmargin]; 23 24 // 3. 3. right margin 25 // note the plus or minus 26 nslayoutconstraint * rightmargin = [nslayoutconstraint constraintwithitem: blueview attribute: nslayoutattributeright relatedby: nslayoutrelationequal toitem: Self. view attribute: nslayoutattributeright multiplier: 1.0 constant:-margin]; 27 [self. view addconstraint: rightmargin]; 28 29 // 3. 4. top spacing 30 nslayoutconstraint * topmargin = [nslayoutconstraint constraintwithitem: blueview attribute: nslayoutattributetop relatedby: nslayoutrelationequal toitem: Self. view attribute: nslayoutattributetop multiplier: 1.0 constant: margin]; 31 [self. view addconstraint: topmargin]; 32 33 // 4. red view constraint 34 // 4. 1. height 35 // note that the height of the redview is associated with the blueview, so this constraint must be added to the parent view they share (and are closest, otherwise, a crash occurs. 36 nslayoutconstraint * redheight = [nslayoutconstraint constraintwithitem: redview attribute: Invalid relatedby: Too toitem: blueview attribute: nslayoutattributeheight multiplier: 1.0 constant: 0.0. view addconstraint: redheight]; 38 39 // 4. 2. left Edge 40 nslayoutconstraint * lefteadge = [nslayoutconstraint constraintwithitem: redview attribute: nslayoutattributeleading relatedby: nslayoutrelationequal toitem: Self. view attribute: nslayoutattributecenterx multiplier: 1.0 constant: 0.0]; 41 [self. view addconstraint: lefteadge]; 42 43 // 4. 3. right margin = blueview44 margin * rightmarginred = [nslayoutconstraint constraintwithitem: redview attribute: inclurelatedby: inclutoitem: blueview attribute: inclumultiplier: 1.0 constant: 0.0]; 45 [self. view addconstraint: rightmarginred]; 46 47 // 4. 4. top padding = blueview bottom + 2048 nslayoutconstraint * topmarginred = [nslayoutconstraint constraintwithitem: redview attribute: Invalid relatedby: Too toitem: blueview attribute: Too multiplier: 1.0 constant: margin]; 49 [self. view addconstraint: topmarginred];

 

Result: Landscape screen:

 

Example of autolayout code implementation-01 linear formula