About the use of the masonry framework (AutoLayout)-For beginners

Masonry, as the most popular auto-layout third-party framework, is easy to use, greatly reducing the effort and time spent by programmers in UI layout and screen adaptation.

1 Basic Usage 1.1 Case 1:

The first is the View1 automatic layout

[View1 mas_makeconstraints:^ (Masconstraintmaker *make) {

View1 left aligns to Superview left

Make.left.equalTo (Superview.mas_left);

View1 right aligns to the right of Superview.

Make.right.equalTo (Superview.mas_right);

/* These two codes constrain the left and right side of the View1, which is equivalent to the width of the view1 constrained

Width is equal to the width of the Superview, the superview width is changed, and the view1 width

More Change * *

Viewe1 top on Superview top align

Make.top.equalTo (Superview.mas_top);

View1 height fixed to 44, equal to a number when used Mas_equalto ();

Make.height.mas_equalTo (44);

/* Here View1 layout is complete, its origin (location: x, y) and size (size:

Width,height) is confirmed, in fact, view1 frame is determined. */

}];

/* The layout of any one uiview need to determine location and size: X and Y, Width and

Height, indispensable. Here is the layout of the VIEW2 * *

[View2 mas_makeconstraints:^ (Masconstraintmaker *make) {

View2 left aligns to the left of View1, that is, X is OK, or you can align with Superview

Make.left.equalTo (View1.mas_left);

The view1 width is fixed to 90, which is width determination.

Make.width.mas_equalTo (90);

The height of the view2 here is equal to the height of the view1, which is determined by height.

Make.height.equalTo (View1.mas_height);

The bottom edge is aligned with the bottom edge of the superview, with the height constraint and y determined.

Make.bottom.equalTo (Superview.mas_bottom);

}];

/* x, Y can either be directly determined by left,top or by right combined with Width,bottom

With height indirectly determined, width and height are determined directly by Mas_equalto () and

by Equalto (view) depends on the width of the view to indirectly determine */

1.2 Case 2:

[View1 mas_makeconstraints:^ (Masconstraintmaker *make) {

Align to left of Superview, x OK.

Make.left.equalTo (Superview.mas_left);

Align with top of Superview, y OK.

Make.top.equalTo (Superview.mas_top);

View1 width fixed to 90,width OK.

Make.width.mas_equalTo (90);

View1 height not determined.

}];

View2 layout, assuming that the double arrow (spacing) is 20;

[View2 mas_makeconstraints:^ (Masconstraintmaker *make) {

/* View2 left and Superview left + a number aligned, change from here to say

, the left side of the view2 is equal to the left of Superview plus a spacing, x OK. */

Make.left.equalTo (superview.mas_left). Offset (20)

The bottom edge of the view2 is equal to Superview.

Make.bottom.equalTo (Superview.mas_bottom);

The size of the view2 is equal to the size of the View1 (height and width), and size (Width,height) determines

Make.size.equalTo (View1);

/* The above sentence is equivalent to Make.height.width.equalTo (VIEW1); */

The top edge of the view2 is equal to the edge of the View1 plus the spacing, combined with height constraints, y OK.

Make.top.equalTo (View1.mas_bottom). Offset (20)

/* Four elements are determined, the constraint is complete, the width of the view2 is the same as the width of the view1 height,

Because neither of them is. Fixed height, only fixed spacing, so the height of view1 and View2

Will change with the height of the superview. */

}];

Wordy down coordinates

VIEW3 layout, assuming a spacing of 20.

[View3 mas_makeconstraints:^ (Masconstraintmaker *make) {

/* See on the right side, the right side is equal to Superview's right plus the spacing */

Make.right.equalTo (superview.mas_right). Offset (-20);

Coordinate calculation: Left-20, right +20.

The top edge of the view3 equals the top edge of the Superview plus a gap

Make.top.equalTo (superview.mas_top). Offset (20); //upward-20, down +20

The bottom edge of the view3 is equal to the bottom of Superview plus a gap.

Make.bottom.equalTo (Superview.mas_bottom). Offset (-20)

The height of the view3 here is determined, but the width and x, Y are not yet determined

VIEW3 width is determined after combining right constraint x followed by

Make.width.mas_equalTo (90);

/* Left y not determined, you can see VIEW3 in Superview should be vertical

Center in straight direction, you can set centery directly.

Make.centerY.equalTo (Superview.mas_centery);

/* Regardless of how the superview aspect changes, the VIEW3 is always centered in the vertical direction,

And right next to the Superview, the height varies with the Superview

However, you can also directly fix the height, the top and bottom edges are not set up, so that

Superview height becomes small, view3 always so high, how to choose must be with

UI interface Requirements related to */

}];

/* This section mainly introduces basic usage, top, bottom, left, right, centery (corresponding

CenterX), Equalto (), Mas_equalto (), offset () */

2 Precautions 2.1 Questions

(1) View layout but no effect

1) The view is empty, which is equivalent to sending a message to a null pointer, which has no effect.

2) Layout-dependent UIView (such as SUPERVIEW,VIEW2) are not well laid out. Description

Make.equalto (VIEW2), View2 is a dependent uiview).

3) view itself does not show something

4) View not added to Superview

5) and so on .....

(2) Too many constraints are inconsistent or missing

(3) Program crashes, typically constrained dependent objects (such as Superview) are empty

2.2 Comprehensive Solutions

Set the view background for viewing, complemented by view UI hierarchy observations.

The most direct and effective method is to make a breakpoint at the view point of the first automatic layout of the current interface, one line down (step over), if you skip the current view layout, the current view is usually empty; If the program crashes in one line, the object that the current constraint statement relies on is empty.

2.3 Details (self-ignoring)

Rule: Boundary: View1 and Superview, adjacent: View2 to the left, right, top, or bottom of the View1, center: centerx,centery Align, a whole view is aligned with the whole. Fixed and varied selection by UI requirements.

In general, the layout is in Layoutsubviews () or controller viewdidlayoutsubviews (), if not, such as: View1 not executed before the layout constraints [Superview Addsubviews:view1], the program will also crash.

About the use of the masonry framework (AutoLayout)-For beginners