iOS masonry 不規則tagView布局 並自適應高度

在搜索頁面經常會有不規則的tag出現，這種tagView要有點擊事件，單個tagView可以設置文字顏色，寬度不固定根據內容自適應，高度固定，數量不固定。總高度就不固定。最近對於masonry的使用又有了一些新的理解，所有就寫了一個這樣的tagView的例子，demo中全部使用Masonry自動布局，高度也是自適應的，封裝的tagView可以直接使用在tablView或者collectionView中。demo下載地址：https://github.com/qqcc1388/TYTagViewDemo
效果圖：

對於這種不規則標簽的布局思路：
1、由於寬度不固定，所以要想知道寬度，必須要根據內容來計算，所有需要在給標簽賦值之后重新布局一次標簽的位置;
2、布局的時候要考慮換行的問題，當單個標簽的寬度大於一行，或者單個標簽+跟他同一行的標簽總寬度大於一行的時候需要考慮換行操作;
3、masonry布局根據換行的時機，分別計算距離上一個標簽對於的位置。

關鍵代碼實現：

-(void)layoutSubviews{
    [super layoutSubviews];
    
    //重新設置TagView約束
    if (self.tagList.count == self.items.count && self.tagList != 0) {
        //重新設置約束
        NSInteger count = self.items.count;
        NSInteger margin = self.margin;
        NSInteger top = self.top;
        CGFloat width = self.bounds.size.width;   //總寬度
        CGFloat rowWidth = 0;  //單行內容的寬度
        CGFloat height = self.tagHeight;
        __block BOOL isChange = YES;  //是否需要換行
        TYTagItem *last = nil;      //記錄下上一個標簽
        for (int i = 0; i < count; i++) {
            TYTagItem *tagItem = self.tagList[i];
            tagItem.backgroundColor = [UIColor colorWithRed:arc4random_uniform(256)/255.0 green:arc4random_uniform(256)/255.0 blue:arc4random_uniform(256)/255.0 alpha:1];
           //判斷寬度是否可以在該行布局 可以布局直接布局 不可以換行
            CGFloat tagWidth = tagItem.viewWidth;
            rowWidth += tagWidth + margin;
            
            if (rowWidth  > width - margin) {      //需要換行
                isChange = YES;
                //判斷是否超過最大值
                if (tagWidth + margin *2 > width) {
                    tagWidth = (width - margin*2);
                }
                //換行后重新設置當前行的總寬度
                rowWidth = tagWidth + margin;
            }
            [tagItem mas_makeConstraints:^(MASConstraintMaker *make) {
                if (isChange) {  //換行
                    if (!last) {
                        make.top.mas_offset(top);
                    }else{
                        make.top.mas_equalTo(last.mas_bottom).mas_offset(top);
                    }
                    make.left.mas_offset(margin);
                    isChange = NO;
                }else{
                    make.left.mas_equalTo(last.mas_right).mas_offset(margin);
                    make.top.mas_equalTo(last.mas_top);
                }
                make.height.mas_equalTo(height);
                make.width.mas_equalTo(tagWidth);

                //設置最后一個item
                if (i == count -1) {
                    make.bottom.mas_offset(-top);
                }
            }];
            last = tagItem;
        }
    }
}

這種不規則標簽的使用方法（如果放在tableView中可以結合tableView的自適應高度）

    //創建tagView
    TYTagView *tagView = [TYTagView new];
    self.tagView = tagView;
    tagView.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:tagView];
    
    //給tagView賦值
    tagView.items = self.datas;
    
    //設置約束
    [tagView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_offset(100);
        make.left.mas_offset(0);
        make.right.mas_offset(0);
    }];
    //布局tagView 讓約束生效
    [tagView layoutIfNeeded];

更多詳細內容請見demo

Copyright ©2018 qqcc1388