，而且如果這些標簽需要動態設置將變得更加復雜。
本文通過UICollectionView來實現這些需求。由于展示內容通過服務端動態控制，所以這里首先要做的就是讓collectionView的cell大小能夠自適應文字的寬度。然后才是動態設置collectionView的尺寸。
計算cell的大小
由于計算文字寬度的代碼都是通用的，直接在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內容超過collectionView寬度的時候，做布局處理
if (itemWidth + self.flowLayout.minimumInteritemSpacing > self.flowLayout.contentWidth) {
itemWidth = self.flowLayout.contentWidth - self.flowLayout.minimumInteritemSpacing;
}
return CGSizeMake(itemWidth, self.itemCellHeight);
}
重寫UICollectionViewFlowLayout方法
要讓collectionView整齊排布，就要用到flowLayout，這里通過繼承UICollectionViewFlowLayout來重新對collectionView進行布局。UICollectionViewFlowLayout是一個布局類繼承自UICollectionViewLayout，主要涉及以下兩個方法：
- (CGSize)collectionViewContentSize;
- (nullable NSArray<__kindof UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
collectionViewContentSize這個方法，用來返回collectionView的內容的大小，并不是UICollectionView的frame大小。
layoutAttributesForElementsInRect，這里就是返回所有布局屬性的數組。
通過重寫這兩個方法，就可以重新對content進行布局了，這樣每個cell的排列就可以緊湊起來了。
首先自定義個類繼承自UICollectionViewFlowLayout，定義所需要的屬性
@interface LiveBroadcastFlowLayout : UICollectionViewFlowLayout
///數組內容
@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
通過代碼注釋，可以了解重寫的方法及作用。
計算ContentSize的大小：
- (CGSize)collectionViewContentSize {
CGSize size = CGSizeZero;
NSInteger itemCount = 0;
//獲取collectionView的item個數，為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;
}
// 內容寬度
NSInteger lineWidth = 0;
// 展示行數
NSUInteger rowCount = 1;
for (int i = 0; i < itemCount; ++i) {
// self.dataArry為內容數組
// 根據傳入的字體大小self.textFont計算item寬度
// 然后與傳入的collectionView的寬度self.contentWidth做計算
NSDictionary *attribute = @{NSFontAttributeName: self.textFont};
CGSize currentLabelSize = [self.dataArry[i] sizeWithAttributes:attribute];
//self.itemWidthSpacing為展示預留的寬度，根據需求設置
CGFloat cellWidth = currentLabelSize.width + self.itemWidthSpacing * 2;
lineWidth = lineWidth + self.minimumInteritemSpacing + cellWidth;
// 最后一個item不考慮minimumInteritemSpacing
if (i == itemCount - 1) {
lineWidth = lineWidth - self.minimumInteritemSpacing;
}
// 計算一行的item展示數量
if (lineWidth >= self.contentWidth) {
// 最后一個文本累加長度等于self.contentWidth，不做換行
if (i == (itemCount - 1) && lineWidth == self.contentWidth) {
break;
}
// 最后一個文本大于self.contentWidth且獨占一行，不做換行
if (i == (itemCount - 1) && cellWidth >= self.contentWidth && (lineWidth - self.minimumInteritemSpacing) == cellWidth) {
break;
}
lineWidth = 0;
rowCount++;
}
}
// 最終計算出collectionView內容展示所需的高度
size.width = self.contentWidth;
size.height = rowCount * self.itemHeight + (rowCount - 1) * self.minimumLineSpacing + self.sectionInset.top + self.sectionInset.bottom;
return size;
}
控制collectionView內部item布局的展示：
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSMutableArray* attributes = [[super layoutAttributesForElementsInRect:rect] mutableCopy];
//將第一個item固定在左上，防止一行只展示一個item時位置錯亂
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);
// 如果當前item的寬度+前一個item的最大寬度+item間距<=collectionView的寬度，則一行可以容納下，修改當前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;
// 原文說會自動調整，但是在item內容過長的時候會有問題，做如下處理
frame.origin.y = CGRectGetMaxY(prevLayoutAttributes.frame) + self.minimumLineSpacing;
currentLayoutAttributes.frame = frame;
}
}
return attributes;
}
layoutAttributesForElementsInRect方法中，這里從第二個item開始，每個cell的位置都是前一個cell的位置+maximumSpacing，如果不超過這一行的最大寬度，就改變當前cell的起始位置和大小（也即frame）。如果超過了就不改變，那不改變是什么意思？就是保持原來的位置，這里的原來的位置可能和我們想象的不太一樣，不是一開始定死的位置，而是經過調整后的位置，因為，這里改變前一個cell對后面的cell是有影響的，應該是后面的y軸位置會自動調整。
原文章是這么說的，但是我在文本內容超過collectionView寬度的時候出現了布局問題，就需要在計算cell寬度的時候加入判斷 ，超過時再減去self.minimumInteritemSpacing。
還沒結束
很多時候UICollectionView并不是單獨使用，更多的是嵌套在UITableView的cell中，負責一小部分內容的展示。
那么如何在UITableViewCell中動態調整UICollectionView的大小高度呢？
首先
在UITableViewCell添加UICollectionView并設置約束：
除了坐標位置外，重點設置UICollectionView的寬，高約束，這邊隨便設置個值（接近真實大小就行）。
然后
把寬，高的約束通過xib關聯起來
@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
通過外部調用方法em_displayWithID：
- (void)em_displayWithID:(id)model{
self.dataAry = model;
self.flowLayout.dataArry = model;
[self reloadData];
//[tableview reload]的時候是異步操作，[UICollectionView reloadData]實際上并沒有加載完所有的item
//所以collectionViewLayout.collectionViewContentSize不準
//所以就需要重寫collectionViewLayout
CGFloat updateHeight = self.collectionViewLayout.collectionViewContentSize.height;//這里就拿最新撐開的ContentSize去更新高度約束。
self.pictureCollectionViewHeightCons.constant = updateHeight;
self.pictureCollectionViewWidthCons.constant = self.contentWidth;
}
這邊返回的updateHeight是通過重寫方法后計算得出的，而self.contentWidth則通過[UIScreen mainScreen].bounds.size.width計算來固定，因為UITableViewCell通過layoutIfNeeded后才能得出UICollectionView的真實寬度，所以暫時只適用于UICollectionView寬度固定的情況。
接下來
通過對UITableViewCell的賦值來完成方法的調用
- (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];
}
通過調用UITableViewCell的計算高度方法calculateRowHeightWithId，在UITableViewCell的em_displayWithID：方法中對UICollectionView進行賦值方法的調用。
最后，附上效果圖的樣子：
參考文章和源碼：
AutoLayout下CollectionView的自適應大小
