设置Button约束小技巧

button有固有尺寸,使用autolayout时,如果没有设置宽高,就会使用默认的系统设置进行宽高的设置

默认系统设置:隐式调用sizeToFit方法,该方法会根据原始尺寸进行设置

示例代码:

// 设置头像视图
- (void)prepareIconButton{
    
    // 设置头像图片
    [self.iconButton setImage:[UIImage imageNamed:@"default_person_lit"] forState:UIControlStateNormal];
    
    // 设置约束
    
    // button有固有尺寸,使用autolayout时,如果没有设置宽高,就会使用默认的系统设置进行宽高的设置:
    // 隐式调用sizeToFit方法,该方法会根据原始尺寸进行设置
    [self.iconButton mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(self.view).mas_offset(20);
        make.centerX.mas_equalTo(self.view);
    }];
    
}

在这里,给button设置了一张图片,在设置约束时,只设置了水平居中和距离顶部的间距,显示效果:

效果_1.png

之所以会显示这样的效果,是因为没有设置左侧间距和右侧间距,让button按照默认的系统设置约束宽高,并保持水平方向居中

这时,我在给约束加上一条距离左侧的间距:

[self.iconButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.view).mas_offset(20);
    make.left.mas_equalTo(self.view).mas_offset(5);
    make.centerX.mas_equalTo(self.view);
}];

效果图:

效果_2.png

button距离左侧5个间距,并且居中显示,同时宽度上进行了压缩

但如果我取消了水平居中的约束

[self.iconButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.view).mas_offset(20);
    make.left.mas_equalTo(self.view).mas_offset(5);
}];

效果图:

效果_3.png

利用这种特性,设置距离左侧间距后,同时让其保持水平居中,对自身进行压缩,再让控件自身的高度等于宽度

[self.iconButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.view).mas_offset(20);
    make.left.mas_equalTo(self.view).mas_offset(5);
    make.centerX.mas_equalTo(self.view);
    make.height.mas_equalTo(self.iconButton.mas_width);
}];

实现效果:

效果_4.png

以上效果图全部是在竖屏模式下的效果,在设置好以上约束后,切换成横屏模式,效果图:

效果_5.png

这里容易被视觉上的效果而蒙骗,实际上约束设置的是没有问题的,并没有因为横竖屏的切换发生变化,而是Button自身进行了处理,这一点通过层级结构可以看到:

效果_6.png

通过层级结构图来看,距离顶部约束,距离左侧约束,高度等于自身宽度以及居中显示四条约束都仍然保持着

原因:
1.因为图片的大小没有达到button所需的尺寸
2.约束中,我们设置了距离左侧一个固定间距,并且让高度等于宽度

因为高度依赖于宽度,横屏后,图片达不到约束的尺寸,归根结底就是因为约束死了距离左侧的间距

解决方法:将距离左侧的间距设置为大于等于5,而不是一个固定的数值,让系统灵活处理
如果父控件的宽度小于button宽度+2间距,就根据间距和居中约束进行压缩
如果父控件的宽度远大于button宽度+2间距,并且button的图片大小没有达到需要的尺寸,就会按照图片的最大尺寸调整间距

[self.iconButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(self.view).mas_offset(20);
    make.left.mas_greaterThanOrEqualTo(5);
    make.centerX.mas_equalTo(self.view);
    make.height.mas_equalTo(self.iconButton.mas_width);
}];

效果_7.png