Preface:
Looking back at the time when I was developing iOS in 2013, I did not use handwritten layout code at that time, but used xib files to write. If the pure code method is used to calculate a relative position for layout based on the size of window (320,480) of windows to calculate a relative position for layout, at that time, the size of windows was fixed. With the release of iPhone 5, the size of windows (320,568) also changed, and the adaptation of autoresizingMask was used. Later, after iPhone 6, the width of windows size also changed accordingly. I began to abandon autoresizingMask and switch to autolayout. I used autolayout for adaptation recently. I was only in touch with it when I re-engaged iOS development. The company used the Masonry framework for layout adaptation. So learning to use this layout framework is crucial to me, it greatly improves development efficiency and has recently used many syntaxes that have a lot of similarities with Android.
What is Masonry?
Masonry is a lightweight layout framework with its own description syntax, encapsulating automatic layout with more elegant chain syntax, which is concise and clear, and has high readability, and supports both iOS and Max OS X.
How to use it?
1.) Introduce header files
I'm referring to the global reference pch file
#import ""
2.) Basic syntax
Properties provided by Masonry
- @property (nonatomic, strong, readonly) MASConstraint *left;//Left
- @property (nonatomic, strong, readonly) MASConstraint *top;//Upper side
- @property (nonatomic, strong, readonly) MASConstraint *right;//On the right
- @property (nonatomic, strong, readonly) MASConstraint *bottom;//Bottom
- @property (nonatomic, strong, readonly) MASConstraint *leading;//First
- @property (nonatomic, strong, readonly) MASConstraint *trailing;//Tail
- @property (nonatomic, strong, readonly) MASConstraint *width;//Wide
- @property (nonatomic, strong, readonly) MASConstraint *height;//High
- @property (nonatomic, strong, readonly) MASConstraint *centerX;//Horily centered
- @property (nonatomic, strong, readonly) MASConstraint *centerY;//Long-center
- @property (nonatomic, strong, readonly) MASConstraint *baseline;// Text baseline
Masonry provides three functions and methods
- - (NSArray *)mas_makeConstraints:(void(^)(MASConstraintMaker *make))block; //Add new constraints
- - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *make))block;//Update constraints
- - (NSArray *)mas_remakeConstraints:(void(^)(MASConstraintMaker *make))block;//All previous constraints will only retain the latest constraints
We choose to use different functional methods according to different usage scenarios.
3.) Specific examples
For example, add a child view with a spacing of 50 to the parent control with a top, bottom, left and right distance to the parent control
Add constraints
UIView *tempView=[[UIView alloc]init];
=[UIColor greenColor];
[ addSubview:tempView];
[tempView mas_makeConstraints:^(MASConstraintMaker *make) {
.mas_equalTo(50);
.mas_equalTo(-50);
.mas_equalTo(50);
.mas_equalTo(-50);
}];
Equivalent to
UIView *tempView=[[UIView alloc]init];
=[UIColor greenColor];
[ addSubview:tempView];
[tempView mas_makeConstraints:^(MASConstraintMaker *make) {
(.mas_left).offset(50);
(.mas_right).offset(-50);
(.mas_top).offset(50);
(.mas_bottom).offset(-50);
}];
It can also be simplified to the following
UIView *tempView=[[UIView alloc]init];
=[UIColor greenColor];
[ addSubview:tempView];
[tempView mas_makeConstraints:^(MASConstraintMaker *make) {
.mas_equalTo(UIEdgeInsetsMake(50, 50, 50, 50));
}];
Also equivalent to
UIView *tempView=[[UIView alloc]init];
=[UIColor greenColor];
[ addSubview:tempView];
[tempView mas_makeConstraints:^(MASConstraintMaker *make) {
().insets(UIEdgeInsetsMake(50, 50, 50, 50));
}];
Update constraints
[tempView mas_updateConstraints:^(MASConstraintMaker *make) {
.mas_equalTo(50);
.mas_equalTo(-50);
.mas_equalTo(100);
.mas_equalTo(-100);
}];
Clear previous constraints to keep the latest ones
[tempView mas_remakeConstraints:^(MASConstraintMaker *make) {
.mas_equalTo(100);
.mas_equalTo(-100);
.mas_equalTo(100);
.mas_equalTo(-100);
}];
Special attention:
Declare constraints must be called after the view is added to the parent attempt.
4.)mas_equalTo vs equalTo
In the above example, mas_equalTo and equalTo have the same effect. When I first started using Masonry, I easily confused them. Today I will analyze their differences. mas_equalTo is a MACRO, which compares the value, and equalTo compares the id type.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.