Usage of the Masonry framework (AutoLayout) -- for beginners, masonryautolayout

Usage of the Masonry framework (AutoLayout) -- for beginners, masonryautolayout

As a popular third-party framework for automatic layout, Masonry is easy to use and greatly reduces the effort and time spent by programmers on UI layout and screen adaptation.

1 basic usage 1.1 Example 1:

 

// The first step is automatic layout of view1

[View1 mas_makeConstraints: ^ (MASConstraintMaker * make ){

// Align the left of view1 with the left of superView

Make. left. Similar to (superView. mas_left );

 

// Align the right of view1 with the right of superView.

Make. right. Similar to (superView. mas_right );

/* The two sentences constrain the left and right sides of view1, which is equivalent to the width of view1.

Degrees, the width is equal to the width of superView, the width of superView is changed, and the width of view1 is also

Changing */

 

// Viewe1 alignment above superView

Make. top. Similar to (superView. mas_top );

 

// The height of view1 is fixed to 44. If it is equal to a number, use mas_pointer ();

Make. height. mas_defaults to (44 );

 

/* The view1 layout is completed here. Its origin (location: x, y) and size (size:

Width, height) are determined, which is actually determined by the frame of view1. */

}];

 

/* Determine the position and size of any UIView layout: x, y, width, and

Height. Below is the layout of view2 */

[View2 mas_makeConstraints: ^ (MASConstraintMaker * make ){

// Align the left side of view2 with the left side of view1, that is, the value of x can also be aligned with the superView.

Make. left. conform to (view1.mas _ left );

 

// The width of view1 is fixed to 90, that is, the width is determined.

Make. width. mas_pointer to (90 );

 

// The height of view2 is equal to that of view1, that is, the height is determined.

Make. height. conform to (view1.mas _ height );

 

// Align the bottom edge with the superView bottom edge, which is determined by y based on the height constraint.

Make. bottom. Similar to (superView. mas_bottom );

}];

/* X and y can be determined either by left or top, or by combining right with width and bottom.

Indirectly determined by height, width and height are directly determined by mas_to to () and

Indirectly determined by depending on the width and height of the view */

1.2 Case 2:

 

[View1 mas_makeConstraints: ^ (MASConstraintMaker * make ){

// Align with the left side of superView, and confirm with x.

Make. left. Similar to (superView. mas_left );

 

// Align with the superView, and confirm y.

Make. top. Similar to (superView. mas_top );

// The width of view1 is fixed to 90, and the width is determined.

 

Make. width. mas_pointer to (90 );

// The height of view1 is not determined.

}];

 

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

[View2 mas_makeConstraints: ^ (MASConstraintMaker * make ){

/* The left side of view2 is aligned with the left side of superView + A number. Let's change the argument here.

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

Make. left. Align to (superView. mas_left). offset (20)

 

// The bottom side of view2 is equal to that of superView.

Make. bottom. Similar to (superView. mas_bottom );

 

// The size of view2 is equal to the size (height and width) of view1, And the size (width, height) is determined.

Make. size. conform to (view1 );

/* The above sentence is equivalent to make. height. width. conform to (view1 );*/

 

// The top side of view2 is equal to the bottom side of view1 plus spacing, combined with the height constraints, y is determined.

Make. top. conform to (view1.mas _ bottom). offset (20)

 

/* Determine the four elements and complete the constraints. The width and height of view2 are the same as that of view1,

Because they do not exist. Fixed height, only fixed spacing, so the height of view1 and view2

Changes with the height of the superView. */

}];

// Coordinates

 

// View3 layout, assuming the spacing is 20.

[View3 mas_makeConstraints: ^ (MASConstraintMaker * make ){

/* It is best to confirm the right side. The right side is equal to the right side of the superView plus the spacing */

Make. right. Similar to (superView. mas_right). offset (-20 );

// Coordinate calculation: To the left-20, to the right + 20.

 

// The top side of view3 equals to the top side of superView plus a spacing

Make. top. Similar to (superView. mas_top). offset (20); // go up-20, down + 20

 

// The bottom side of view3 is equal to the bottom side of superView plus a spacing.

Make. bottom. reflect to (superView. mas_bottom). offset (-20)

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

 

// Determine the view3 width and then combine the right constraint x to confirm

Make. width. mas_pointer to (90 );

 

/* The remaining y is not determined. We can see that view3 should be vertical in superView.

Center up directly. You can directly set centerY */

Make. centerY. Similar to (superView. mas_centerY );

 

/* No matter how the height and width of the superView change, view3 is always centered in the vertical direction,

Next to the superView, the height changes with the superView.

However, you can also fix the height directly. You don't need to set the top side and bottom side. In this way,

The superView height increases and the view3 is always so high.

UI requirements */

}];

 

/* This section describes the basic usage of top, bottom, left, right, and centerY (

CenterX), convert to (), mas_equalTo (), offset ()*/

2. Notes 2.1

(1) view layout, but no effect

1) if the view is empty, it is equivalent to sending a message to the NULL pointer and does not work.

2) The layout-dependent UIView (such as superView and view2) is not well laid out. (Note:

Make. depend to (view2), and view2 is the dependent UIView ).

3) The view itself does not display anything.

4) view not added to superView

5) and so on .......

(2) Too many constraints are contrary to or missing

 

(3) The program crashes. Generally, the object (for example, superView) of the constraint dependency is empty.

2.2 Comprehensive Solution

Set the view background for observation, supplemented by View UI Hierarchy observation.

The most direct and effective method is to place a breakpoint at the first Automatic Layout view on the current interface, and move one row down (step over). If you skip the current view layout directly, generally, the current view is empty. If a program crashes in a row, the objects on which the current constraint statement depends are empty.

2.3 details (ignore by yourself)

Rule: boundary: view1 and superView alignment. Adjacent: view2 and view1 align on the left, right, top, or bottom. Center: centerX and centerY, the overall view is aligned with the overall view. fixed and changed options are based on UI requirements.

Generally, the layout is in layoutSubViews () or controller viewDidLayoutSubViews (). If not, for example, view1 fails to run [superView addSubViews: view1] before the layout constraint, the program will also crash.