IOS masonry uses North pointing

Time:2021-12-31

<article>

Third party library address:https://github.com/SnapKit/Masonry
pod ‘Masonry’

(UIKit – automatic layout of the system in)

General layout

self.letfView = [UIView new];
    self.letfView.backgroundColor = [UIColor redColor];
    self.rightView = [UIView new];
    self.rightView.backgroundColor = [UIColor greenColor];

    [self.view addSubview:self.letfView];
    [self.view addSubview:self.rightView];

    [self.letfView mas_makeConstraints:^(MASConstraintMaker *make) {
        make. left. mas_ equalTo(self.view). mas_ offset(10);//  Leftview left = self View left + 10
        make. top. mas_ equalTo(self.view). mas_ offset(20);//  Leftview top = self View upper + 20
        make. height. mas_ equalTo(100);//  Leftview height = 100
    }];

    [self.rightView mas_makeConstraints:^(MASConstraintMaker *make) {
        make. top. mas_ equalTo(self.letfView);//  Rightview upper edge = leftview upper edge (i.e. upper edge alignment)
        make. right. mas_ equalTo(self.view). mas_ offset(-10);//  Rightview right = self View right - 10
        make. left. mas_ equalTo(self.letfView.mas_right). mas_ offset(20);//  Rightview left = leftview right + 20
        make. width. mas_ equalTo(self.letfView);//  Rightview width = leftview width
        make. height. mas_ equalTo(self.letfView);//  Rightview high = leftview high
    }];

//It realizes the most basic simple constraints such as height and width of the left and right views, which is common for switching between horizontal and vertical screens.

Here, you can basically start playing masonry. After reading more attributes, you basically graduated from primary school.

More make XXX, compare attributes first.

left;  Left
top;  upper
right;  right
bottom;  lower
leading;  Left
trailing;  right
width;  wide
height;  high
centerX;  X-axis Center
centerY;  Y-axis Center
baseline;  Baseline, not much used

leftMargin;  The default margin on the left seems to be 20. The following is similar
rightMargin;
topMargin;
bottomMargin;
leadingMargin;
trailingMargin;
centerXWithinMargins;
centerYWithinMargins;

-----------Split line----------

edges; 4 weeks
size; size
center; core
The corresponding syntax is slightly different, and the offset method is relatively complex. If it is not offset, it can be used in accordance with the above.

More MAS_ Equalto (xxx), backhand comparison attribute

The upper part is basically the same. If it is not added, it will default to make MAS corresponding to XXX_
mas_left;
mas_top;
mas_right;
mas_bottom;
mas_leading;
mas_trailing;
mas_width;
mas_height;
mas_centerX;
mas_centerY;
mas_baseline;

mas_leftMargin;
mas_rightMargin;
mas_topMargin;
mas_bottomMargin;
mas_leadingMargin;
mas_trailingMargin;
mas_centerXWithinMargins;
mas_centerYWithinMargins;

-----------Split line----------

Automatically set the guidance attribute value according to the bar height, for example:
MAS when there is a NavigationBar_ Toplayoutguidebottom is equivalent to an increase of 44.
MAS when there is no NavigationBar_ Toplayoutguidebottom is relative to 0.

mas_ topLayoutGuide;//  Navgationbar related,
mas_topLayoutGuideTop;
mas_topLayoutGuideBottom;

mas_ bottomLayoutGuide;//  Tabbar toolbar related
mas_bottomLayoutGuideTop;
mas_bottomLayoutGuideBottom;

Multi conditional layout

  • Greater than, less than or equal to
mas_equalTo; =
mas_greaterThanOrEqualTo; >=
mas_lessThanOrEqualTo; <=
//The size is larger than, and the use scene feels less.
  • Constraint priority
Simple example: originally, the two views are arranged up and down. When the Topview is removed, the bottom view is moved up using secondary constraints.

    [self.topView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.right.and.left.mas_equalTo(self.view);
        make.height.mas_equalTo(100);
    }];

    [self.bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
        make. top. mas_ equalTo(self.topView.mas_bottom). priority(999);//  You can write the priority value yourself. The larger the value, the higher the priority (1000 is the Xib default value and the system default maximum value)
        make. top. mas_ equalTo(self.view). priorityLow();//  You can also use the system default priority value, low stands for 250

        make.left.and.right.mas_equalTo(self.view);
        make.height.mas_equalTo(100);
    }];
  • Consistent abbreviation of multiple attributes at the same time
//Use and link properties
make.left.and.top.and.width.and.height.mas_equalTo(self.letfView);
  • There is a relationship with multiple views at the same time, mixed write
//Array form make top. mas_ equalTo(@[self.letfView.mas_top,self.rightView.mas_top]);
  • mas_ Of equalto (xxx)_ Width and width comparison
// mas_  The prefix is the macro definition. After encapsulation, you can directly use nsinteger,
//If there is no prefix, you need to use nsnumber
        make.width.mas_equalTo(100);
        make.width.equalTo(@100);
  • mas_ Offset and with Compare with offset
UIEdgeInsets edg = UIEdgeInsetsMake(10, 20, 30, 40);

    [self.letfView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.edges.mas_equalTo(self.view).mas_offset(edg);
        make.edges.mas_equalTo(self.view).with.insets(edg);

    }];

//Use with It is necessary to distinguish offset, insets, sizeoffset and centeroffset, and use offset respectively.
//Using MAS_ Offset automatically distinguishes the above situations and automatically matches

On the offset, you can continue to study the cggeometry in the coregraph framework and write it next time.

Update reset constraint – allows animation

Three methods of setting constraints

mas_ Makeconstraints add a
mas_ Updateconstraints update a
mas_ Remakeconstraints reset all
  • Simple update constraint
//Original constraint
    [self.letfView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.and.right.and.left.mas_equalTo(self.view);
        make.height.mas_equalTo(100);
    }];

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    //Update constraints
    [self.letfView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.view).mas_offset(300);
    }];
  • Combined with Pan animation
//Modify the above method of updating constraints,
    [self.letfView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.view).mas_offset(300);
    }];

    [self.letfView setNeedsLayout]; //  Tags need to update constraints
    [UIView animateWithDuration:1. animations:^{
        [self.letfView layoutIfNeeded]; //  Update constraints during animation to achieve offset effect
    }];

Other properties involved in layout – anti compression and compact content

(I understand that the name may be different)

For example, there are two labels in the same horizontal direction, and the content is uncertain, that is, the width is uncertain.

  • The layout of two labels with variable width may not be what we want if only such layout is used to control the content. But there seems to be no error. It may be handled by default. (here I try to resist compression with the first label, and the content of the second label is preferred and compact, with the same effect.)

    [self.leftLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.and.left.mas_equalTo(self.view);
    }];

    [self.rightLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerY.and.right.mas_equalTo(self.view);
        make.left.mas_equalTo(self.leftLabel.mas_right);
    }];

  • Add attributes to label
(personally, I think the first step is this: display the content first)
    //Compact content - give priority to full display of content without taking up more pixels.
    [self.leftLabel setContentHuggingPriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [self.rightLabel setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

//(I think the second step is this: adjust whether the content is compressed)
    //If the compression resistance is low, adjust the compression based on the previous step.
    [self.leftLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal];
    [self.rightLabel setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

Author link:https://www.jianshu.com/p/47f01594d031

Recommended Today

Could not get a resource from the pool when the springboot project starts redis; nested exception is io. lettuce. core.

resolvent: Find your redis installation path: Start redis server Exe After successful startup: Restart project resolution. ———————————————————————->Here’s the point:<——————————————————————- Here, if you close the redis command window, the project console will report an error. If you restart the project, the same error will be reported at the beginning, The reason is: It is inconvenient to […]