Masony Application Example of equal spacing layout

Here are a few things to say about how to use masonry

1. How to add constraints to meet a view, and the basic use of masonry
2. How to use masonry and other clearances to arrange several view
3. Update constraint animations
4. Scrolview How to Layout
5. Tableviewcell High Dynamic change

2. How to use masonry and other clearances to arrange several view

First of all, the final implementation of such a layout

Paste_image.png

Here is a total of three parts, the top yellow middle blue is using the method provided by the masonry, suitable for the size of the view, such as spacing layout, the bottom of the green view is the classification of their own package, suitable for unequal layout of large view, From this side of the classic article masonry introduction and use of practice: quick to get started AutoLayout

Now let's talk about the three parts separately.

The first part, directly on the code
Paste_image.png

    Put three square view in red view, equal spacing is 10Nsinteger padding =10;UIView *yellowview1 = [[UIView alloc] init]; YellowView1. backgroundcolor = [Uicolor Yellowcolor]; [Redview Addsubview:yellowview1];UIView *yellowview2 = [[UIView alloc] init]; YellowView2. backgroundcolor = [Uicolor Yellowcolor]; [Redview ADDSUBVIEW:YELLOWVIEW2]; UIView *yellowview3 = [[UIView alloc] init]; yellowView3. backgroundcolor = [uicolor yellowcolor]; [Redview ADDSUBVIEW:YELLOWVIEW3]; [@[yellowview1, YellowView2, YELLOWVIEW3] mas_distributeviewsalongaxis:masaxistypehorizontal withfixedspacing: padding leadspacing:padding tailspacing:padding]; [@[yellowview1, YellowView2, YELLOWVIEW3] mas_makeconstraints:^ (Masconstraintmaker *make) {make. TopEqualto (redview). Offset (ten); make. Height. Mas_equalto (yellowView3. Mas_ width); }];

Masonry provides such a method:

/** *  确定间距等间距布局 * *  @param axisType     布局方向 *  @param fixedSpacing 两个item之间的间距(最左面的item和左边, 最右边item和右边都不是这个) *  @param leadSpacing  第一个item到父视图边距 *  @param tailSpacing  最后一个item到父视图边距 */- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedSpacing:(CGFloat)fixedSpacing leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

So also know, will fixedspacing, leadspacing, tailspacing are assigned the same spacing, the array of view will automatically calculate the width, complete the horizontal direction of the layout.

Note that this method only completes the horizontal layout, if you want to determine the location of the view, you also need to specify the vertical position and height, where you can call the array directly to mas_makeConstraints:^(MASConstraintMaker *make){} complete the layout.

The second part, the code is as follows:
Paste_image.png

    Three square blue view in red view, width is 30, gap is as largeNsmutablearray *blueviews = [Nsmutablearray array];for (Nsinteger i =0; I <3; i++) {UIView *blueview = [[UIView alloc] init]; Blueview. backgroundcolor = [uicolor Bluecolor]; [Redview Addsubview:blueview]; [Blueviews Addobject:blueview]; } cgfloat padding2 = (300-3 * 30)/4; [Blueviews mas_distributeviewsalongaxis:masaxistypehorizontal withfixeditemlength:30 Leadspacing:padding2 Tailspacing:padding2]; [Blueviews mas_makeconstraints:^ (Masconstraintmaker *make) {Make.centery.equalto (Redview); uiview *blueview = (uiview *) blueviews[ 0]; Make.height.mas_equalto (Blueview .mas_width); }];

Here is another method provided by masonry, which is basically exactly the same as the previous method.

/** *  distribute with fixed item size * *  @param axisType  布局方向   *  @param fixedItemLength 每个item的布局方向的长度 *  @param leadSpacing  第一个item到父视图边距 *  @param tailSpacing  最后一个item到父视图边距 */- (void)mas_distributeViewsAlongAxis:(MASAxisType)axisType withFixedItemLength:(CGFloat)fixedItemLength leadSpacing:(CGFloat)leadSpacing tailSpacing:(CGFloat)tailSpacing;

The difference is here in addition to the layout direction, the first and last view of the margin, here need to specify the length of each item, automatically calculate the gap, so this to achieve equal spacing, in fact, the number of the item, as well as the width of the parent view to calculate the spacing first, and then assign the value, Leadspacing and tailspacing, such as CGFloat padding2 = (300 - 3 * 30) / 4; 300 here is the width of the parent view, 30 is the width of each item specified, so that the calculation can be guaranteed, leadspacing, tailspacing, and item spacing between the same, Implement the layout.

This method also completes the horizontal layout and requires a vertical layout.

The third part, the code is as follows:
Paste_image.png

    In the red view, put three different sizes of green squares, gap and so on, Masonry did not provide relevant methodsNsmutablearray *greenviews = [Nsmutablearray array];for (Nsinteger i =0; I <3; i++) {uiview *greenview = [[uiview alloc] init]; greenview.backgroundcolor = [uicolor Greencolor]; [Redview Addsubview:greenview]; [Greenviews Addobject:greenview]; [Greenview mas_makeconstraints:^ (Masconstraintmaker *make) {Make.bottom.equalto (Redview) .offset (-10); Make.width.mas_equalto (I*20 + 20); Make.height.mas_equalto (Greenview.mas_ width); }]; } [Redview distributespacinghorizontallywith:greenviews];          

First in the For loop, the bottom position, wide, high layout, but also the lack of horizontal orientation, that is, to determine the x of each view, where a UIView classification
- (void) distributeSpacingHorizontallyWith:(NSArray*)views;
This classification is directly used in a piece of the string of the code, do not post code, simply say the principle:

Paste_image.png

The implementation principle is to create greenViews.count + 1 a placeholder view (blue) in the view, then through the layout, so that the placeholder view and the layout of the view to row, left and right spacing of 0, but also to constrain all the placeholder view width equal, so that the width of the placeholder view, it appears that these placeholders, Is the greenviews spacing, you can achieve the same spacing layout.

At this point, I know three kinds of equal spacing layout is finished, the specific code see

GitHub Address: Https://github.com/CoderLXWang/HowToUseMasonry

Masony Application Example of equal spacing layout