iOS masonry center multiple views – 动态居中适配

(Last Updated On: 2018-03-27)

跳槽季,接手了iOS遗留项目,用的是masonry写布局约束,发现cell里面有些布局写得有点死,比如垂直并排的2个label,假如一个label内容为空,甚至状态是hidden,那么另一个应该居中而不是保留在原地。强迫症决定把这个显示效果处理一下。

已经很久没搞iOS了,再看代码也是大写的懵逼,内容参考:Stack Overflow

愿景:实现多个子View在父级容器里自适应居中

思路:在需要居中的子View上下放2个高度相等约束的占位View。据说iOS官方案例也用了很多这种方式。效果如图:
居中前,固定依赖
1.居中前,固定依赖
2.居中的View上下填充占位View
//占位1
UIView *spacer1 = [[UIView alloc] init];
[labelContainer addSubview:spacer1];
//占位2
UIView *spacer2 = [[UIView alloc] init];
[labelContainer addSubview:spacer2];
//文本1
UILabel * titleLable=[UILabel new];
[labelContainer addSubview:titleLable];
//文本2
UILabel * subLable=[UILabel new];
[labelContainer addSubview:subLable];

[spacer1 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.mas_equalTo(labelContainer.mas_top);
    make.height.mas_equalTo(spacer2);
}];

[spacer2 mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.mas_equalTo(labelContainer.mas_bottom);
    make.height.mas_equalTo(spacer1);
}];

[titleLable mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(0);
    make.top.mas_equalTo(spacer1.mas_bottom).offset(2);
}];

[subLable mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.mas_equalTo(titleLable);
    make.top.mas_equalTo(titleLable.mas_bottom).mas_offset(5);
    make.bottom.mas_equalTo(spacer2.mas_top);
}];

最终实现了自适应居中,即不管中间有多少可见的View都会居中。还发现前人的代码喜欢创建一个View,就顺便写约束,约束足够简单是没关系的,其实应该将View创建和添加指定容器后,再写约束,这样能选择约束的View就更多一些。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Solve : *
26 + 15 =


此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据