在日常开发中,经常涉及到一些条件按钮和内容标签的展示。有很多属性需要添加,都用按钮来实现显然太繁琐,也不太河里
,而且如果这些标签需要动态设置将变得更加复杂。 本文通过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);} 但是设置完以后可能会发现item的间距并不是固定的,如下图:重写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 () @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的自适应大小 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作! |