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);