Brief introduction
Simplify iOS apps ' use of a code-only model for adaptive layouts, using a simple and efficient syntax instead of nslayoutconstraints.
- Project home: Masonry
- Latest example: Click to download
- Project brief: If you see another discussion about pure code, xib or storyboard, and which way to use for a more appropriate UI layout, please recommend that they try the masonry first. Masonry, as fast as xib, has the flexibility to act as a pure code--the GitHub focus 7800 + is for a reason!
Quick Start installation using CocoaPods installation
‘Masonry‘
It is recommended to introduce a header file in your prefix.pch:
// 定义这个常量,就可以在使用Masonry不必总带着前缀 `mas_`:#define MAS_SHORTHAND// 定义这个常量,以支持在 Masonry 语法中自动将基本类型转换为 object 类型:#define MAS_SHORTHAND_GLOBALS#import "Masonry.h"
Using the initial masonry
This is a constraint created using Masconstraintmaker:
/* Note: View1 should first be added as a child view of a view, Superview is a local variable that refers to the parent view of View1. */Uiedgeinsets padding =Uiedgeinsetsmake (10,10,10,10); [View1 mas_makeconstraints:^ (Masconstraintmaker *make) {Make. TopEqualto (Superview. mas_top). Offset (padding. top), make, left, Equalto (Superview . Mas_left) . Offset (padding. left), makebottom. Equalto (Superview. Mas_bottom). Offset (-padding . bottom); Make.Equalto (Superview. mas_right). Offset (-padding. Right);}];
Can even be shorter:
[view1 mas_makeConstraints:^(MASConstraintMaker *make) { make.edges.equalTo(superview).insets(padding);}];
Can not only express equal relations
.equalTo
Equivalent to nslayoutrelationequal
.lessThanOrEqualTo
Equivalent to nslayoutrelationlessthanorequal
.greaterThanOrEqualTo
Equivalent to nslayoutrelationgreaterthanorequal
These three statements that express an equality relationship can accept a parameter, and this parameter can be any one of the following:
1. Masviewattribute
make.centerX.lessThanOrEqualTo(view2.mas_left);
Masviewattribute |
Nslayoutattribute |
View.mas_left |
Nslayoutattributeleft |
View.mas_right |
Nslayoutattributeright |
View.mas_top |
Nslayoutattributetop |
View.mas_bottom |
Nslayoutattributebottom |
View.mas_leading |
Nslayoutattributeleading |
View.mas_trailing |
Nslayoutattributetrailing |
View.mas_width |
Nslayoutattributewidth |
View.mas_height |
Nslayoutattributeheight |
View.mas_centerx |
Nslayoutattributecenterx |
View.mas_centery |
Nslayoutattributecentery |
View.mas_baseline |
Nslayoutattributebaseline |
2. Uiview/nsview
If you need view.left greater than or equal to Label.left:
// 下面两个约束是完全等效的.make.left.greaterThanOrEqualTo(label);make.left.greaterThanOrEqualTo(label.mas_left);
3. NSNumber
The adaptive layout allows you to set the width or height to a fixed value.
If you want to give the view a minimum or maximum value, you can do this:
//width >= 200 && width <= 400make.width.greaterThanOrEqualTo(@200);make.width.lessThanOrEqualTo(@400)
However, the adaptive layout does not support setting left,right, centery, etc. to fixed values.
If you pass a constant to these properties, Masonry automatically converts them to relative values relative to their parent view:
//creates view.left = view.superview.left + 10make.left.lessThanOrEqualTo(@10)
In addition to using NSNumber, you can use basic data types or structs to create constraints:
Make. Top. Mas_equalto (Make. Height. Mas_equalto; make. Size. Mas_equalto (cgsizemake) ; EdgesMas_equalto (uiedgeinsetsmake (0, 0)); make. Left. Mas_equalto ( View). Mas_offset (Uiedgeinsetsmake (0, Ten, 0));
4. Nsarray
An array of which can be mixed is any of the three types mentioned above:
// 表达三个视图等高的约束.make.height.equalTo(@[view1.mas_height, view2.mas_height]);make.height.equalTo(@[view1, view2]);make.left.equalTo(@[view1, @100, view3.right]);
Precedence of constraints
.priority
Allows you to specify an exact priority, the higher the value, the greater the priority. Up to 1000.
.priorityHigh
Equivalent to Uilayoutprioritydefaulthigh. The priority value is 750.
.priorityMedium
Between high-priority and low-priority, the priority value is between 250~750.
.priorityLow
Equivalent to Uilayoutprioritydefaultlow, with a priority value of 250.
The priority can be added at the end of the constraint:
make.left.greaterThanOrEqualTo(label.mas_left).with.priorityLow();make.top.equalTo(label.mas_top).with.priority(600);
Equal proportional self-adapting
.multipliedBy
Allows you to specify a scale change for a property of a two view
item1.attribute1 = multiplier × item2.attribute2 + constant
, this is the formula for the constraint, which .multipliedBy
is essentially used to qualify multiplier
the
Note that because the coordinate system in the program starts from the upper left vertex of the parent view, it makes no sense to specify a multiplier that is based on the parent view, because the leftmost and top of the parent view is always 0.
If you need a view with the width and height of the parent view, the position automatically changes, you should also specify the scale of the right,bottom,width,height corresponding to the parent view (based on the relative position of a dimension), and the constant must be 0.
// 指定宽度为父视图的 1/4.make.width.equalTo(superview).multipliedBy(0.25);
Tool methods
Masonry provides some tool methods to further simplify the creation of constraints.
Edges boundary
//使 top, left, bottom, right等于 view2make.edges.equalTo(view2);//使 top = superview.top + 5, left = superview.left + 10,// bottom = superview.bottom - 15, right = superview.right - 20make.edges.equalTo(superview).insets(UIEdgeInsetsMake(5, 10, 15, 20))
Size Dimensions
// 使宽度和高度大于或等于 titleLabelmake.size.greaterThanOrEqualTo(titleLabel)//使 width = superview.width + 100, height = superview.height - 50make.size.equalTo(superview).sizeOffset(CGSizeMake(100, -50))
Center Centre
//使 centerX和 centerY = button1make.center.equalTo(button1)//使 centerX = superview.centerX - 5, centerY = superview.centerY + 10make.center.equalTo(superview).centerOffset(CGPointMake(-5, 10))
You can use chained syntax to enhance code readability:
// 除top外,其他约束都与父视图相等.make.left.right.bottom.equalTo(superview);make.top.equalTo(otherView);
Update constraint
Sometimes you need to modify an existing constraint to animate the effect or remove/replace an existing constraint.
In masonry, there are several different ways to update view constraints:
1. References References
You can store an array of constraints or constraints returned by the masonry syntax into a local variable or class property for subsequent manipulation of a constraint.
declaring properties@property (Nonatomic,strong) Masconstraint *topconstraint; //when making Constraints[view1 mas_makeconstraints:^ (Masconstraintmaker *make) {self.topconstraint = Make.top.equalto (Superview.mas_top) .with .offset (Padding.top); Make.equalto (Superview.mas_left) .with.offset (Padding.left) ;}]; ... //then you can manipulate this property. [self.topconstraint uninstall];
2. mas_updateconstraints
If you just want to add a new constraint, you can use a convenience method mas_updateConstraints
that doesn't need to be used mas_makeConstraints
. The mas_updateConstraints
constraints that already exist are not removed, even if the old and new constraints conflict with each other.
Override the Updateconstraints method for the view: This is where Apple recommends adding/updating constraints.This method can be called multiple times in response to the Setneedsupdateconstraints method.Setneedsupdateconstraints can be called internally by the Uikit or called by the developer in their own code to update the view constraints. - (void) Updateconstraints {[Self. Growingbutton mas_updateconstraints:^ (Masconstraintmaker *make) {make. Center. Equalto (self); Make. width. Equalto (buttonsize. Width). Prioritylow (); make. Height. Equalto (@ ( buttonsize.height). Prioritylow (); make. Width. Lessthanorequalto (self); Make. Height. Lessthanorequalto (self);}]; //Based on the Apple mechanism, the updateconstraints method of the parent class should finally be called. [Super updateconstraints];}
3. mas_remakeconstraints
mas_remakeconstraints
is similar to mas_updateconstraints
except that: Mas_ Remakeconstraints
Removes the constraints already on the view before creating a new constraint.
- (void)changeButtonPosition { [self.button mas_remakeConstraints:^(MASConstraintMaker *make) { make.size.equalTo(self.buttonSize); if (topLeft) { make.top.and.left.offset(10); } else { make.bottom.and.right.offset(-10); } }];}
ios-Screen fit-ui layout