Automatic Masonry layout and UIScrolView adaptation, masonryuiscrolview

Automatic Masonry layout and UIScrolView adaptation, masonryuiscrolview
Introduction to Masonry

Masonry is a lightweight layout framework with its own description syntax. It uses a more elegant chained syntax to encapsulate a simple and clear Automatic Layout and is highly readable and supports both iOS and Max OS X. You can import it through cocoapods.

Use Masonry

Attributes and descriptions of Masonry

// Left // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_left; // top // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_top; // right // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_right; // bottom // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_bottom; // header // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_leading; // tail // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_trailing; // width // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_width; // height // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_height; // transverse midpoint // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_centerX; // longitudinal midpoint // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_centerY; // text baseline // @ property (nonatomic, strong, readonly) MASViewAttribute * mas_baseline;

Here, leading and left trailing are equivalent to right under normal conditions, but when some la s are from right to left (such as Arabic? There is no similar experience). In other words, you can simply ignore left and right.

• First, we will introduce the difference between frame and contentsize of UIScrollView.

 

• Important

(1) The difference between the frame and contentsize attributes of UIScrollView: the frame of UIScrollView refers to the visible range (visible area) of the scrollview, And the contentsize is the scrolling range.

(2) contentinset (an enumeration is not a struct without the * sign), which adds an additional scroll area for UIScrollView. (Top, left, bottom, right) counterclockwise. Contentinset can be set using code or a View Controller, but the two are different (note the difference ).

(3) The contentsize attribute can only be set using code.

(4) contentoffset is a CGpoint type struct, used to record the rolling position of ScrollView, that is, to record where the "box" is run. Once you know this property, you will know its location. You can set this property to control the movement of this box.

(5) members of an object's internal structure attributes cannot be directly modified in three steps (get the value first, modify it, And then assign the modified value back ).

(6) Where is the contentoffset origin after an additional area is added?

• Helpful

Model diagram:

Comparison chart:

Coordinate chart:

Automatic Layout of Masonry and UIScrollView:

• First, determine the location of UIScrollView: equivalent to determining the frame of UIScrollView

 

// UIScrollView sliding interface [self. scrollView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. mas_pointer to (self. view); make. left. similar to (self. view ). offset (0); make. right. similar to (self. view ). offset (0); make. bottom. mas_pointer to (self. view. mas_bottom ). offset (-60);}];

• Adapt to interface 1 to align top, left, height, width of interface 1 with scrollview. in Masonry adaptation, top can determine the vertical orientation of View with bottom or height, similarly, Left can be used with right or width to determine the horizontal position.

// Interface adaptation [self. accountElectricChargeView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. mas_pointer to (@ 0); make. left. mas_pointer to (self. scrollView. mas_left); make. height. mas_pointer to (self. scrollView. mas_height); make. width. mas_pointer to (self. scrollView. mas_width) ;}];

• Adaptation interface 2: because it is a horizontal position adaptation, top is still aligned with scrollView, left is aligned with the right of the first interface, bottom is aligned with scrollView or the first interface is aligned

// 2 interface adaptation [self. accountpeakpolicicview mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. mas_pointer to (@ 0); make. left. mas_pointer to (self. accountElectricChargeView. mas_right); make. bottom. mas_pointer to (self. scrollView );

• Make. width. mas_pointer to (self. accountElectricChargeView. mas_width) ;}];

• Adaptation Interface 3: Same as interface 2

// 3 interface adaptation [self. accountElectricFactorView mas_makeConstraints: ^ (MASConstraintMaker * make) {make. top. mas_pointer to (@ 0); make. left. mas_pointer to (self. accountpeakpolicicview. mas_right); make. bottom. mas_pointer to (self. scrollView); make. width. mas_pointer to (self. accountElectricChargeView. mas_width) ;}];

• Finally, align the right of the scrollview with the right of the third interface (that is, the last interface.

[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {        make.right.mas_equalTo(self.accountElectricFactorView.mas_right);    }];