image.png

，而且如果這些標(biāo)簽需要?jiǎng)討B(tài)設(shè)置將變得更加復(fù)雜。
本文通過(guò)UICollectionView來(lái)實(shí)現(xiàn)這些需求。由于展示內(nèi)容通過(guò)服務(wù)端動(dòng)態(tài)控制，所以這里首先要做的就是讓collectionView的cell大小能夠自適應(yīng)文字的寬度。然后才是動(dòng)態(tài)設(shè)置collectionView的尺寸。

計(jì)算cell的大小

由于計(jì)算文字寬度的代碼都是通用的，直接在sizeForItemAtIndexPath方法中返回cell的寬度和高度。

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    NSDictionary *attribute = @{NSFontAttributeName: self.textFont};
    CGSize currentLabelSize = [self.dataAry[indexPath.item] sizeWithAttributes:attribute];
    CGFloat itemWidth = ceil(currentLabelSize.width) + itemWidthSpacing * 2;
// item內(nèi)容超過(guò)collectionView寬度的時(shí)候，做布局處理
    if (itemWidth + self.flowLayout.minimumInteritemSpacing > self.flowLayout.contentWidth) {
        itemWidth = self.flowLayout.contentWidth - self.flowLayout.minimumInteritemSpacing;
    }
    return CGSizeMake(itemWidth, self.itemCellHeight);
}

image.png

重寫UICollectionViewFlowLayout方法

要讓collectionView整齊排布，就要用到flowLayout，這里通過(guò)繼承UICollectionViewFlowLayout來(lái)重新對(duì)collectionView進(jìn)行布局。UICollectionViewFlowLayout是一個(gè)布局類繼承自UICollectionViewLayout，主要涉及以下兩個(gè)方法：

- (CGSize)collectionViewContentSize; 

- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

collectionViewContentSize這個(gè)方法，用來(lái)返回collectionView的內(nèi)容的大小，并不是UICollectionView的frame大小。
layoutAttributesForElementsInRect，這里就是返回所有布局屬性的數(shù)組。
通過(guò)重寫這兩個(gè)方法，就可以重新對(duì)content進(jìn)行布局了，這樣每個(gè)cell的排列就可以緊湊起來(lái)了。

首先自定義個(gè)類繼承自UICollectionViewFlowLayout，定義所需要的屬性

@interface LiveBroadcastFlowLayout : UICollectionViewFlowLayout

///數(shù)組內(nèi)容
@property (nonatomic, strong) NSArray *dataArry;
///item高度
@property (nonatomic, assign) CGFloat itemHeight;
///item左右偏移
@property (nonatomic, assign) CGFloat itemWidthSpacing;
///展示字體
@property (nonatomic, strong) UIFont *textFont;
///UICollectionView寬度
@property (nonatomic, assign) CGFloat contentWidth;

@end

通過(guò)代碼注釋，可以了解重寫的方法及作用。
計(jì)算ContentSize的大小：

- (CGSize)collectionViewContentSize {
    CGSize size = CGSizeZero;
    NSInteger itemCount = 0;
    //獲取collectionView的item個(gè)數(shù)，為0的話返回CGSizeZero
    if ([self.collectionView.dataSource respondsToSelector:@selector(collectionView:numberOfItemsInSection:)]) {
        itemCount = [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0];
    }
    if (CGSizeEqualToSize(size, CGSizeZero) && itemCount == 0) {
        return CGSizeZero;
    }
    // 內(nèi)容寬度
    NSInteger lineWidth = 0;
    // 展示行數(shù)
    NSUInteger rowCount = 1;
    for (int i = 0; i < itemCount; ++i) {
        // self.dataArry為內(nèi)容數(shù)組
        // 根據(jù)傳入的字體大小self.textFont計(jì)算item寬度
        // 然后與傳入的collectionView的寬度self.contentWidth做計(jì)算
        NSDictionary *attribute = @{NSFontAttributeName: self.textFont};
        CGSize currentLabelSize = [self.dataArry[i] sizeWithAttributes:attribute];
        //self.itemWidthSpacing為展示預(yù)留的寬度，根據(jù)需求設(shè)置
        CGFloat cellWidth = currentLabelSize.width + self.itemWidthSpacing * 2;
        lineWidth = lineWidth + self.minimumInteritemSpacing + cellWidth;

        // 最后一個(gè)item不考慮minimumInteritemSpacing
        if (i == itemCount - 1) {
            lineWidth = lineWidth - self.minimumInteritemSpacing;
        }

        // 計(jì)算一行的item展示數(shù)量
        if (lineWidth >= self.contentWidth) {
            // 最后一個(gè)文本累加長(zhǎng)度等于self.contentWidth，不做換行
            if (i == (itemCount - 1) && lineWidth == self.contentWidth) {
                break;
            }
            // 最后一個(gè)文本大于self.contentWidth且獨(dú)占一行，不做換行
            if (i == (itemCount - 1) && cellWidth >= self.contentWidth && (lineWidth - self.minimumInteritemSpacing) == cellWidth) {
                break;
            }
            lineWidth = 0;
            rowCount++;
        }
    }
    // 最終計(jì)算出collectionView內(nèi)容展示所需的高度
    size.width = self.contentWidth;
    size.height = rowCount * self.itemHeight + (rowCount - 1) * self.minimumLineSpacing  + self.sectionInset.top + self.sectionInset.bottom;
    
    return size;
}

控制collectionView內(nèi)部item布局的展示：

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    NSMutableArray* attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
    //將第一個(gè)item固定在左上，防止一行只展示一個(gè)item時(shí)位置錯(cuò)亂
    if (attributes.count > 0) {
        UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[0];
        CGRect frame = currentLayoutAttributes.frame;
        frame.origin.x = 0;
        frame.origin.y = 0;
        currentLayoutAttributes.frame = frame;
    }
    
    for (int i = 1; i < [attributes count]; ++i) {
        NSDictionary *attribute = @{NSFontAttributeName: self.textFont};
        CGSize labelSize = [self.dataArry[i] sizeWithAttributes:attribute];
        UICollectionViewLayoutAttributes *currentLayoutAttributes = attributes[i];
        UICollectionViewLayoutAttributes *prevLayoutAttributes = attributes[i - 1];
        CGFloat cellWidth = ceil(labelSize.width) + self.itemWidthSpacing * 2;
        if (cellWidth + self.minimumInteritemSpacing > self.contentWidth) {
            cellWidth = self.contentWidth - self.minimumInteritemSpacing;
        }
        currentLayoutAttributes.size = CGSizeMake(cellWidth, self.itemHeight);
        NSInteger origin = CGRectGetMaxX(prevLayoutAttributes.frame);
        // 如果當(dāng)前item的寬度+前一個(gè)item的最大寬度+item間距<=collectionView的寬度，則一行可以容納下，修改當(dāng)前item的x軸位置，否則居左顯示
        if (origin + self.minimumInteritemSpacing + currentLayoutAttributes.frame.size.width < self.contentWidth) {
            CGRect frame = currentLayoutAttributes.frame;
            frame.origin.x = origin + self.minimumInteritemSpacing;
            currentLayoutAttributes.frame = frame;
        } else {
            CGRect frame = currentLayoutAttributes.frame;
            frame.origin.x = 0;
            // 原文說(shuō)會(huì)自動(dòng)調(diào)整，但是在item內(nèi)容過(guò)長(zhǎng)的時(shí)候會(huì)有問題，做如下處理
            frame.origin.y = CGRectGetMaxY(prevLayoutAttributes.frame) + self.minimumLineSpacing;
            currentLayoutAttributes.frame = frame;
        }
    }

    return attributes;
}

layoutAttributesForElementsInRect方法中，這里從第二個(gè)item開始，每個(gè)cell的位置都是前一個(gè)cell的位置+maximumSpacing，如果不超過(guò)這一行的最大寬度，就改變當(dāng)前cell的起始位置和大?。ㄒ布磃rame）。如果超過(guò)了就不改變，那不改變是什么意思？就是保持原來(lái)的位置，這里的原來(lái)的位置可能和我們想象的不太一樣，不是一開始定死的位置，而是經(jīng)過(guò)調(diào)整后的位置，因?yàn)?，這里改變前一個(gè)cell對(duì)后面的cell是有影響的，應(yīng)該是后面的y軸位置會(huì)自動(dòng)調(diào)整。
原文章是這么說(shuō)的，但是我在文本內(nèi)容超過(guò)collectionView寬度的時(shí)候出現(xiàn)了布局問題，就需要在計(jì)算cell寬度的時(shí)候加入判斷 ，超過(guò)時(shí)再減去self.minimumInteritemSpacing。

還沒結(jié)束

很多時(shí)候UICollectionView并不是單獨(dú)使用，更多的是嵌套在UITableView的cell中，負(fù)責(zé)一小部分內(nèi)容的展示。

那么如何在UITableViewCell中動(dòng)態(tài)調(diào)整UICollectionView的大小高度呢？

首先

image.png

除了坐標(biāo)位置外，重點(diǎn)設(shè)置UICollectionView的寬，高約束，這邊隨便設(shè)置個(gè)值（接近真實(shí)大小就行）。

然后

把寬，高的約束通過(guò)xib關(guān)聯(lián)起來(lái)

@interface MyLiveBroadcastCollectView () <UICollectionViewDataSource, UICollectionViewDelegate>

@property (weak, nonatomic) IBOutlet LiveBroadcastFlowLayout *flowLayout;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureCollectionViewHeightCons;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *pictureCollectionViewWidthCons;

@property (nonatomic, strong) NSArray *dataAry;

@end

通過(guò)外部調(diào)用方法em_displayWithID：

- (void)em_displayWithID:(id)model{
    self.dataAry = model;
    self.flowLayout.dataArry = model;
    [self reloadData];
    
    //[tableview reload]的時(shí)候是異步操作，[UICollectionView reloadData]實(shí)際上并沒有加載完所有的item
    //所以collectionViewLayout.collectionViewContentSize不準(zhǔn)
    //所以就需要重寫collectionViewLayout
    CGFloat updateHeight = self.collectionViewLayout.collectionViewContentSize.height;//這里就拿最新?lián)伍_的ContentSize去更新高度約束。
    
    self.pictureCollectionViewHeightCons.constant = updateHeight;
    self.pictureCollectionViewWidthCons.constant = self.contentWidth;
}

這邊返回的updateHeight是通過(guò)重寫方法后計(jì)算得出的，而self.contentWidth則通過(guò)[UIScreen mainScreen].bounds.size.width計(jì)算來(lái)固定，因?yàn)?code>UITableViewCell通過(guò)layoutIfNeeded后才能得出UICollectionView的真實(shí)寬度，所以暫時(shí)只適用于UICollectionView寬度固定的情況。

接下來(lái)

通過(guò)對(duì)UITableViewCell的賦值來(lái)完成方法的調(diào)用

- (CGFloat)calculateRowHeightWithId:(id)model{
    self.dataModel = model;
    
    if (self.dataModel.height != 0) {
        return self.dataModel.height;
    }
    
    [self em_displayWithID:self.dataModel];
    
    [self layoutIfNeeded];
    
    self.dataModel.height = CGRectGetMaxY(self.stackView.frame);
    return CGRectGetMaxY(self.stackView.frame);
}

- (void)em_displayWithID:(id)model{
    self.dataModel = model;
    /*.省略方法.*/
    [self.tagsCollectionView em_displayWithID:self.dataModel.tagArry];
}

通過(guò)調(diào)用UITableViewCell的計(jì)算高度方法calculateRowHeightWithId，在UITableViewCell的em_displayWithID：方法中對(duì)UICollectionView進(jìn)行賦值方法的調(diào)用。

最后，附上效果圖的樣子：

image.png