前言
为了更方便的使用约束,减少frame
的计算,所以尝试一下用Masonry
来布局动态标签,和frame
计算大同小异。只需要根据是否换行做好约束依赖即可。
代码
内部的属性只是为了方便自行修改,因为热词,或者搜索记录,颜色等等的标签样式太多,最少我们的项目中是这样的,所以并没有做好封装,随用随改即可。
布局的一些代码
-(void)layoutItems{
CGFloat viewVMargin = self.viewVMargin;//整体上间距
CGFloat viewHMargin = self.viewHMargin;//整体左右间距
CGFloat tagHeight = self.tagHeight;//默认的tagHeight
CGFloat tagLineWidth = viewHMargin;//单行的总宽度
CGFloat allWidth = kScreenWidth;//总宽度
CGFloat tagVMargin = self.tagVMargin;//标签行间距
CGFloat tagHMargin = self.tagHMargin;//标签之间间距
CGFloat tagInnerSpace = self.tagInnerSpace;//标签内部左右间距
NSUInteger count = self.tagsArray.count;
__block BOOL isChange = NO; //是否需要换行
UIButton *lastItem = nil;
for (NSUInteger i = 0; i< count; i ++) {
UIButton *item = self.tagsArray[i];
NSString *tagTitle = self.dataA[i];
CGFloat tagWidth = [tagTitle sizeWithFont:self.tagFont maxSize:CGSizeMake(MAXFLOAT, tagHeight)].width + 2 *tagInnerSpace + 0.5; //(//masonry布局会四舍五入 + 0.5防止宽度不够)
tagLineWidth += tagWidth + tagHMargin;
//当标签长度过长 限制
if (tagLineWidth > allWidth - viewHMargin) {
isChange = YES;
//标签的长度+整体左右间距 >= 总宽度
if (tagWidth +2 * tagHMargin >= allWidth) {
tagWidth = allWidth -2 *tagHMargin;
//内边距重新处理
[item setTitleEdgeInsets:UIEdgeInsetsMake(0, tagInnerSpace/2, 0, tagInnerSpace/2)];
}
//换行从新设置当前行的长度
tagLineWidth = viewHMargin +tagWidth + tagHMargin;
}
[item mas_remakeConstraints:^(MASConstraintMaker *make) {
make.height.mas_equalTo(tagHeight);
make.width.mas_equalTo(tagWidth);
//第一个tag设置
if (!lastItem) {
make.top.mas_equalTo(viewVMargin);
make.left.mas_equalTo(viewHMargin);
}else{
//是否换行
if (isChange) {
make.left.mas_equalTo(viewHMargin);
make.top.mas_equalTo(lastItem.mas_bottom).offset(tagVMargin);
isChange = NO;
}else{
make.left.mas_equalTo(lastItem.mas_right).offset(tagHMargin);
make.top.mas_equalTo(lastItem.mas_top);
}
}
}];
lastItem = item;
}
//最后一个距离底部的距离
[lastItem mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.mas_equalTo(-viewVMargin).with.priorityHigh();
}];
}
最后
需要注意的当只是一个View
由动态标签撑开的时候,我们可以使用mas_makeConstraints
,但是当多个cell
中由动态标签决定高度的时候,那么必须使用mas_remakeConstraints
,否则约束复用会带来约束冲突。可以体验一下。
demo地址:LXTagsView