Masonry版动态流水标签，热词

前言

为了更方便的使用约束，减少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，否则约束复用会带来约束冲突。可以体验一下。

流水标签.gif

demo地址：LXTagsView