阅读 969

iOS UICollectionView的动态布局及内容自适应大小

在日常开发中，经常涉及到一些条件按钮和内容标签的展示。有很多属性需要添加，都用按钮来实现显然太繁琐，也不太河里
image.png

，而且如果这些标签需要动态设置将变得更加复杂。
本文通过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];
    
    return CGSizeMake(ceil(currentLabelSize.width) + self.leftAndRightSpacing*2, self.itemCellHeight);
}

但是设置完以后可能会发现item的间距并不是固定的，如下图：
image.png

重写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;
        if (i == (itemCount - 1)) {
            lineWidth = lineWidth + cellWidth;
        } else {
            lineWidth = lineWidth + self.minimumInteritemSpacing + cellWidth;
        }
//计算一行的item展示数量
        if (lineWidth > (NSInteger)self.contentWidth) {
            rowCount++;
            lineWidth = cellWidth + self.minimumInteritemSpacing + cellWidth;
        }
    }
//最终计算出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;
        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;
        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;
            currentLayoutAttributes.frame = frame;
        }
    }

    return attributes;
}

layoutAttributesForElementsInRect方法中，这里从第二个item开始，每个cell的位置都是前一个cell的位置+maximumSpacing，如果不超过这一行的最大宽度，就改变当前cell的起始位置和大小（也即frame）。如果超过了就不改变，那不改变是什么意思？就是保持原来的位置，这里的原来的位置可能和我们想象的不太一样，不是一开始定死的位置，而是经过调整后的位置，因为，这里改变前一个cell对后面的cell是好有影响的，应该是后面的y轴位置会自动调整。

还没结束

很多时候UICollectionView并不是单独使用，更多的是嵌套在UITableView的cell中，负责一小部分内容的展示。

那么如何在UITableViewCell中动态调整UICollectionView的大小高度呢？

首先

在UITableViewCell添加UICollectionView并设置约束：
image.png

除了坐标位置外，重点设置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进行赋值方法的调用。

最后，附上效果图的样子：

image.png

参考文章和源码：
AutoLayout下CollectionView的自适应大小

作者:人生若只如初见丶_a4e8

原文链接:https://www.jianshu.com/p/4d1dadcd2694

文章分类
后端
文章标签
ios
uicollectionvie
布局
内容
版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。
相关推荐