ios-Screen fit-ui layout

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

.equalToEquivalent to nslayoutrelationequal

.lessThanOrEqualToEquivalent to nslayoutrelationlessthanorequal

.greaterThanOrEqualToEquivalent 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

.priorityAllows you to specify an exact priority, the higher the value, the greater the priority. Up to 1000.

.priorityHighEquivalent to Uilayoutprioritydefaulthigh. The priority value is 750.

.priorityMediumBetween high-priority and low-priority, the priority value is between 250~750.

.priorityLowEquivalent 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

.multipliedByAllows 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