Masonry basic usage

Objective

When iOS it comes to automatic layout, there are a lot of workarounds. Some people use xib/storyboard automatic layout, and others use it frame to fit. For the former, I do not like, nor support. For the latter, it is troublesome, everywhere calculate height, width, etc., tens of millions of redundant code, the maintenance and development of the efficiency are very low.

The author introduces the third-party library of pure Code automatic layout here: Masonry . The use of this library is very high, there are a large number of developers in the world in use, the star number is also quite high.

Masonryfor the basic usage of this section, let's look at:

Here we want to lay out the height of the three controls, while the green and red controls are the same height and width.

Core code

Look at the code:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

- (void)viewdidload { [super viewdidload];    UIView *greenview = UIView. New; Greenview. BackgroundColor = uicolor. Greencolor; Greenview. Layer. BorderColor = uicolor. Blackcolor. Cgcolor; Greenview. Layer. BorderWidth = 2; [self. View addsubview: Greenview];    UIView *redview = UIView. New; redview. BackgroundColor = uicolor. Redcolor; redview. Layer. BorderColor = uicolor. Blackcolor. Cgcolor; redview. Layer. BorderWidth = 2; [self. View addsubview: Redview];    UIView *blueview = UIView. New; blueview. BackgroundColor = uicolor. Bluecolor; blueview. Layer. BorderColor = uicolor. Blackcolor. Cgcolor; blueview. Layer. BorderWidth = 2; [self. View addsubview: Blueview];    //make these three controls such as high cgfloat padding = ten; [greenview mas_makeconstraints:^(masconstraintmaker *make) {Make . Top. Mas_equalto(padding); Make . Left. Mas_equalto(padding);     make.right. Mas_equalto (redview. Mas_left . Offset (-padding) Make . Bottom. Mas_equalto(blueview. Mas_top). Offset(-padding); //Three controls, etc. high Make . Height. Mas_equalto(@[redview, blueview]); //red, green these two controls such as high Make . Width. Mas_equalto(redview);   }];   [redview mas_makeconstraints:^(masconstraintmaker *make) { Make . Top. Height. Bottom. Mas_equalto(greenview);     make.right. Mas_equalto (-padding Make . Left. Mas_equalto(greenview. Mas_right). Offset(padding);   }];   [blueview mas_makeconstraints:^(masconstraintmaker *make) {Make . Height. Mas_equalto(greenview); Make . Bottom. Mas_equalto(-padding); Make . Left. Mas_equalto(padding); Make . Right. Mas_equalto(-padding);   }];}

Explain

The way to add a constraint is: mas_makeConstraints . As we can see, constraints can be used in a chained way, using a method that is simple and looks like a sentence.

Look at this sentence: make.top.height.bottom.mas_equalTo(greenView) , meaning: Make my top, height and bottom are greenView equal to the top, height and bottom. As a result, as long as greenView the constraints are added, redView the top, the height, and the bottom are automatically calculated.

Most of the time, we don't write a sentence completely, but use shorthand. Such as:

123	make. Right. Mas_equalto(-padding);

The complete wording is:

123	make. Right. Mas_equalto(bludview. Superview. Mas_right). Offset(-padding);

You can omit the parent view when we want to constrain it relative to the parent control. Note that it is not always possible to omit, only the constraints are the same. For example, constraints are all that are right possible. If it is one left right , then you cannot omit it.

Masonry basic usage