IOS constraint code Auto layout Square control

We say that sometimes the interface requires clickable controls that are similar to Collectionviewcell, with three or four equal-width UIButton controls horizontally, or three or four Uiimageview controls that are not clickable to appear horizontally. Again or, it is a few paragraphs of text, of course, the text is rarely required to be square.       But when the project needs to produce several controls that are horizontally arranged, of the same size, and when the squares are rendered, you can draw on my experience.       Previous practice is:     , horizontal constraint, vertical fixed size       Three UIButton, constrained to: equal width equal height, Central horizontal alignment, Button1 upper and left boundary constraints, button1 height constraints, button2 left bounds to button1 right boundary constraints, Button3 left bound to button2 and boundary constraints and button3 right border to the right box constraints; The three button has completed the equal width control of the horizontal auto-fit screen with constant spacing.       Two, horizontal vertical fixed height, spacing size regulation       is also three UIButton, constrained to: equal width, button1 height and width value, Button1 and Button2 and Button3 constrain the horizontal and vertical alignment relative to the parent view, change the Button1 vertical alignment scale to 0.33, change the button2 vertical alignment to 0.66, Change the Button3 vertical alignment scale to 0.99, at which time after the update, three buttons have completed a variable spacing, a variable margin, and a fixed width-height control.       Compared to the first method, because the screen gap of several models is not too large, the second is a solution close to the project needs. But to make the control spacing and the margins of the control and the border equal, you change the alignment scale, and I'm not sure if I can achieve the equality of spacing and margins for the time being. But this method can be applied to the picture size determination, the spacing requirement is high, the margin does not need to make the situation, is a kind of constraint is very simple, realizes relatively simple method.       Of course, the first applies to, height-determined, variable-width, cut-to-pitch and margin-demanding methods. But I think this kind of project needs less, generally is to ensure that the appearance of the control, rather than sacrificing margins, and can not do the control picture of the stretch compression, it will be quite ugly.        So, let me say a little bit about a new party that I've been thinking about latelymethod, which is a combination of constraints and code.       Three Uiimageview controls, constrained to: equal width equal height, middle horizontal alignment, Imageview1 Upper and left boundary constraints, imageview1 height constraints, Imageview2 left bounds to imageview1 right boundary constraint, imageview3 left bounded to imageview2 boundary constraints, imageview3 right bound to the right border; this constraint is the same as the first method, The original inspiration was also from the first change. At this point we are connecting the three controls to the. m file properties, and the next thing we do is to modify the properties again, the code is as follows:        [Self.ViewAddConstraint:[NslayoutconstraintConstraintwithitem:Self.OneimageviewAttribute:NslayoutattributeheightRelatedby:NslayoutrelationequalToitem:Self.OneimageviewAttribute:NslayoutattributewidthMultiplier:1.0fconstant:0.0f]];
[Self.ViewAddConstraint:[NslayoutconstraintConstraintwithitem:Self.TwoimageviewAttribute:NslayoutattributeheightRelatedby:NslayoutrelationequalToitem:Self.TwoimageviewAttribute:nslayoutattributewidth multiplier:1.0fconstant:0.0f"]; [Self.ViewAddConstraint:[NslayoutconstraintConstraintwithitem:Self.ThreeimageviewAttribute:NslayoutattributeheightRelatedby:NslayoutrelationequalToitem:Self.ThreeimageviewAttribute:nslayoutattributewidthmultiplier:1.0fconstant:0.0f]]; Of the addedNslayoutconstraint will be changed after the storyboard compile, in general, to add a constraint on the controller view, the first control is wired into the properties of the ImageView, the constraint height, the way is equal to, The second control is itself ImageView, the constraint width, the scale is 1, and the offset is 0.Since storyboard has calculated the width of the control for the screen in advance, when I modify it again, I let the height and width of the control be equal, which is not equal to implementing the square control. I do not do too much explanation, first of all, the second requirement is that my control, not in the Viewcontroller layout, but in the Tableviewcell layout, in this way, the added constraint modification code will be error, Because the cell is not self.view, it is not right to add restraint on the Self.view.     I also tried to connect the TableView Contentview in storyboard to the cell's. m file, and then changed the self.view above to the content view after the connection. After a series of tossing, and then changed to the following: Constraints to change: equal width equal height, middle horizontal alignment, button1 to the upper and lower and left boundary constraints, Button2 left bounded to button1 right boundary constraints, Button3 left bounds to button2 and boundary constraints and button3 right bound to the right border; At this point, I highly change with the height of the cell, the width varies with the width of the screen, you can imagine, want to height and width of the equality, it is only to think of the height of the intervention cell. Height calculation: Width of the screen-three controls margin and spacing sum/number of controls + the sum of the top and bottom margins of the control, for example, the spacing between my controls is 10, the margin is 10, and the top and bottom are 10:Self.TableView.RowHeight= ( [UIScreen mainscreen].bounds.size.width - 50.0f)/ 3. 0f + 20.0f; Constraint words, I can not give you pictures, I cut a few small pictures, look at the situation after the constraint:

This is the restraint of imageview1, some of the great God can see the red box inside the description, but I wait for rookie still don't understand. This is the one in the Viewcontroller.

This is the cell, which is a way to constrain the height of the cell height control.

This is the vertical alignment, modifying the alignment scale, the following is a proportional modification of several controls:

The other two controls are not enumerated, and I'll give you a way to get a picture of how these two images appear:

When you click on the middle of the blue vertical line, the bottom of the description of the constraint is only one left, and then click on the edit to come out. The constraint is good to use, not difficult, but not good before very difficult, with a variety of uncomfortable, but this kind of literature is not good to write, if the step by line a sentence a picture, a picture of a paragraph to explain too tired, of course, I wrote a similar post, the following post address to everyone. Http://www.cnblogs.com/guoqiangx-5/p/5594634.html

IOS constraint code Auto layout Square control