iOS:Masonry约束经验(19-03-21更)

时间:2023-01-07 19:00:38

1、label约束:

  1)、只需约束x、y 点相关就行。宽高 长度相关不用约束,就算用boundingRectWithSize计算出来的,也可能不准。

    如:top、bottom二选一,trailing、leading二选一,或者center,宽高会自动生成。(同时约束trailing、leading的话,相当于设了宽度)

  2)、有些地方怕label过长超出,或覆盖其他控件,这时就需要约束 宽高,让其“...”。

    后续补充:还是没必要约束宽,可以让top、bottom、trailing、leading设置 lessThanOrEqualTo 属性。

         小于正常显示,大于会省略号,比起 equalTo 宽,写死的,会好用些

         比如高写死的话,会发现,字体垂直居中,这样就和左边的“标题Label”,水平不对齐了

         1)、lessThanOrEqualTo:小于或等于(注意负号)( label 有个最大宽度属性 preferredMaxLayoutWidth,有点像? )

         2)、equalTo:等价于

         3)、greaterThanOrEqualTo:大于或等于(注意负号)

  3)、垂直约束,我更喜欢用centerY。

    用top的话:1)、UI的字体大小和iOS可能会有偏差,多行label,误差就越大。而设中心点,他是中心定点,上下伸缩。

            2)、如果又有一个控件,如ImageView,跟label的Y轴中心对齐,而label,用top对齐其他且当前label.text = nil,会出错(好像此时label的center会等于top)。

2、在cell重用里刷新数据,要用更新约束:mas_updateConstraints 或 重新约束:mas_remakeConstraints。

  后续补充:3种常用

    1)、mas_makeConstraints:约束

    2)、mas_updateConstraints:更新相同的约束对象数据,如宽。

    3)、mas_remakeConstraints:重新约束所有

  再补充:也没必要一直在cell里改约束。比如,cell里经常修改一个label的约束的时候,

    1)、可以考虑多弄几个样式的label,当前不需要的label隐藏。

    2)、可以通过 安装、卸载 。在初始化的时候,定好约束优先级。

3、UIPageControl小圆点、UISwitch开关,约束 center/ top、bottom / trailing、leading 等x、y 点即可。

4、约束centerX/centerY,容易犯的错

make.centerX.mas_equalTo(10.0);
make.centerX.offset(10.0);

  语句看起来,像是给centerX = 10.0的数值,然而效果却是父视图的centerX + 10.0,

  原因,参照下面的附录,它自动默认一样的属性。应该写详细点。

make.centerX.mas_equalTo(self.view.mas_leading).offset(10.0);

  再补充:如果1个固定的控件和1个移动的控件(下划线)centerX,约束一样,如,make.centerX.mas_equalTo(固定.mas_centerX),

      接着,想通过mas_updata,更新centerX到另一个控件,会发现约束冲突,连固定的控件一起移动。

      解决,取另一个参照物。

        1)、newCenterX = 另一个控件.centerX 。

        2)、make.centerX.mas_equalTo(固定.mas_leading).offset(newCenterX)

5、属性

  1)、之前用得较多的:top、bottom、trailing、leading、center、width、height

  2)、现在开始用的 edges == top、bottom、trailing、leading。

             insets 在 边界约束好的基础上,设置与父视图的间隙,为正值!!也可以直接在edges里设置,一样。

           size == width、height。

           sizeOffset 在 size 约束好的基础上,进行增+减-。主要用于相对另一个View。

           multipliedBy 倍数,比如0.5、1.5。不局限在相同属性,也可以设置为自身 width 为 height 的3倍。

  3)、center 配合 size 不错。就像layer的 position 和 bound 。

6、父视图contentView的宽高,有时候可以不用设置,它会根据子类去约束,比如移除某个子View,自动缩小、变化。

  同时,也要注意因为父视图缺少约束,而造成的“自动变化Bug”。

7、优先级 与 动画( .priority(500) 或 UILayoutPriority 常量 )

  在同一个控件做约束,可以设置两个相同属性的约束,对其优先级进行设置,会先找优先级高的约束。

  优先级高约束有问题,会再向下寻找次之优先级的属性约束。

  默认优先级 UILayoutPriorityRequired == 1000 。

    后续补充:同一属性、同一优先级,多个约束也没问题。不过都得是greaterThanOrEqualTo、lessThanOrEqualTo的约束。

         使用参照“8、优先级与边界”。

    再补充:比如网络请求,加载到数据,给当前内容为nil的控件写入数据的时候(例如,当前 空的昵称label、空的性别图片 ,没显示出来)

        多写一行 UIView animation + layoutIfNeeded ,有意想不到的效果。  

    对 再补充 补充:使用 UIView animation + layoutIfNeeded 做动画的情况下,

            可使用 [self.animationView.layer removeAllAnimations]; 移除动画,如需可用 block 的 finished 判断是否完成动画

[UIView animateWithDuration:8.0
delay:0.0
options:UIViewAnimationOptionCurveLinear
animations:^{
// 动画
[self layoutIfNeeded];
} completion:^(BOOL finished) {
// 动画完成
[self.animationView mas_updateConstraints:^(MASConstraintMaker *make) {
make.leading.mas_equalTo(SCREEN_WIDTH);
}];
}];

    再再补充:做弹窗动画,如果初始化为约束,做动画也用 约束+ UIView animation + layoutIfNeeded,在第一次(懒)加载的时候会导致所有的控件一起动画,

         可先在初始化的时候 [self setNeedsLayout] + [self layoutIfNeeded] ,完成UI布局。

  1)、如 移除优先级高的参照物,再layout。就可以做动画。

    [view mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.equalTo(参照物1.mas_trailing).offset(20).priority(750);
make.leading.equalTo(参照物2.mas_trailing).offset(20).priority(250);
}]; [参照物1 removeFromSuperview];
[UIView animateWithDuration:1.0 animations:^{
[self.view layoutIfNeeded];
}];

  2)、或者提取出来

    2-1)、卸载掉该约束

    MASConstraint *leadingMas;

    [view mas_makeConstraints:^(MASConstraintMaker *make) {
leadingMas = make.leading.equalTo(参照物1.mas_trailing).offset(20).priority(750);
make.leading.equalTo(参照物2.mas_trailing).offset(20).priority(250);
}]; [leadingMas uninstall];
[UIView animateWithDuration:1.0 animations:^{
[self.view layoutIfNeeded];
}];

  后续补充:卸载uninstall、安装install 可以重复。只要变量没释放

    2-2)、修改约束。

    MASConstraint *widthMas;

    [view mas_makeConstraints:^(MASConstraintMaker *make) {
widthMas = make.width.equalTo(50);
}]; widthMas.equalTo(100);
[UIView animateWithDuration:1.0 animations:^{
[self.view layoutIfNeeded];
}];

  3)、也可以用 mas_updateConstraints 对同一属性进行更新

    [view mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(100);
}]; [UIView animateWithDuration:1.0 animations:^{
[self.view layoutIfNeeded];
}];

8、优先级与边界

  1)、初始化

@property (nonatomic,strong) MASConstraint *topMas;
@property (nonatomic,strong) MASConstraint *leadingMas; [self.moveView mas_makeConstraints:^(MASConstraintMaker *make) {
// 边界。不写优先级,默认优先级最高 = UILayoutPriorityRequired = 1000
make.leading.top.greaterThanOrEqualTo(self.bgView);
make.trailing.bottom.lessThanOrEqualTo(self.bgView);
// 确定宽高
make.width.mas_equalTo(50);
make.height.mas_equalTo(50);
// 确定位置。高优先级,可变动的位置。
self.topMas = make.top.equalTo(self.bgView).offset(50).priority(750);
self.leadingMas = make.leading.equalTo(self.bgView).offset(50).priority(750);
}];

  后续补充:宽高看情况判断是否需要约束。

  2)、改变位置

    2-1)、改动 make 返回的数据

self.topMas.offset(100);
self.leadingMas.offset(100);

    2-2)、直接更新约束

[self.moveView mas_updateConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.bgView).offset(100).priority(750);
make.leading.mas_equalTo(self.bgView).offset(100).priority(750);
}];

    补充,2-1)比 2-2)需要多存2个变量,且只能修改offset,无法改之前的参照物、优先级。

              但是,写法更简洁,适合改动少的。

       优先级,可以自定宏,也可以用系统给 UILayoutPriorityDefaultHigh = 750 、UILayoutPriorityDefaultLow = 250。

    再补充:边界,也可以在拖动的时候判断x、y、x+width、y+height,纯手工计算。

9、如果两个并排的lable。

  1)、在字数(宽高)可能相互挤压的时候,可以优先保护某个Label的完整性

// 水平位置,优先级高
[label1 setContentCompressionResistancePriority:UILayoutPriorityDefaultHigh forAxis:UILayoutConstraintAxisHorizontal]; // 水平位置,优先级低(会被挤压)
[label2 setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];

  后续补充:setContentCompressionResistancePriority 为UIView的方法,设置抗压性 优先级,第二个参数可选水平、垂直方向。

       CompressionResistance 抗压越高,则越不会被挤压,如lable被挤压,会显示“...”。

       相对的,有个 setContentHuggingPriority ,拥抱优先级,没用过,应该是优先级越高,越不会被拉伸之类的把?!

  2)、字体较少的时候,较空的地方可以用 lessThanOrEqualTo 。留空。

10、一些只要约束 位置 ,自动生成长宽的控件,如label,可以重写 intrinsicContentSize ,添加内边距,增大。

- (CGSize)intrinsicContentSize
{
CGSize tempSize = [super intrinsicContentSize];
return CGSizeMake(tempSize.width + insets.left + insets.right, tempSize.height + insets.top + insets.bottom);
}

11、自动顶住 导航栏或状态栏 , tabbar或底部

// self.mas_topLayoutGuide;
// self.mas_bottomLayoutGuide; // self.mas_topLayoutGuideTop;
// self.mas_topLayoutGuideBottom; // self.mas_bottomLayoutGuideTop;
// self.mas_bottomLayoutGuideBottom; make.top.mas_equalTo(self.mas_topLayoutGuide);

12、baseLine。

不大熟悉。好像主要应用于,对齐两个View里的子Lable,从而约束到View的位置。

重写、以返回要对齐的baseView

iOS(6.0 - 9.0)

- (UIView *)viewForBaselineLayout {
return baseView;
}

iOS(9.0 - )

- (UIView *)viewForFirstBaselineLayout{
return baseView;
} - (UIView *)viewForLastBaselineLayout{
return baseView;
}

13、scrollView约束

scrollView,可视范围正常约束,如:  

[scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.mas_equalTo(self.view);
}];

contentView,约束,如下(高度可变):

[scrollView addSubview:contentView];
[contentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(scrollView);
make.width.equalTo(scrollView);
make.height.greaterThanOrEqualTo(@(0.f));
}];

需要的items,添加、约束到contentView上。

后续补充:忘了写了,最后一个item的bottom要和contentView的bottom约束上,contentView才有确定的高

14、获取上面刚约束完的尺寸,来设置别的view.frame。要先layout,否则可能获取到{0, 0, 0, 0}。

[self layoutIfNeeded];

附录:

例、两个并排的按钮

//equalTo 比较 View,
//mas_equalTo 比较 数值
//如果在 redButton 里约束有用到 greenButton ,则 greenButton 在之前就要添加到和 redButton 同一父类View下。 红色的按钮(equalTo)
UIButton *redButton = [[UIButton alloc]init];
redButton.backgroundColor = [UIColor redColor];
[self.view addSubview:redButton];
[redButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.equalTo(@100);
make.leading.equalTo(self.view).offset(10.0);
make.bottom.equalTo(self.view).offset(-10.0);
}]; 绿色的按钮(mas_equalTo)
1)、比较全的写法
UIButton *greenButton = [[UIButton alloc]init];
greenButton.backgroundColor = [UIColor greenColor];
[self.view addSubview:greenButton];
[greenButton mas_makeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(100);
make.width.mas_equalTo(redButton.mas_width);
make.trailing.mas_equalTo(self.view.mas_trailing).offset(-10.0);
make.bottom.mas_equalTo(self.view.mas_bottom).offset(-10.0);
make.leading.mas_equalTo(redButton.mas_trailing).offset(10.0);
}]; 2)、如果属性是一样的,可以省略后面的属性
make.width.mas_equalTo(redButton);
make.trailing.mas_equalTo(self.view).offset(-10.0);
make.bottom.mas_equalTo(self.view).offset(-10.0); 3)、相对于(2),甚至可以写0,相对父视图。宽可不能跟着写0,宽0就0了
make.trailing.mas_equalTo(0).offset(-10.0);
make.bottom.mas_equalTo(0).offset(-10.0); 4)、相对于(3),既然都可以0,那干脆直接去掉
make.trailing.offset(-10.0);
make.bottom.offset(-10.0);