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
