UICollectionViewCell自适应宽度

如图所示效果，根据字符长度自适应UICollectionViewCell的大小，同时进行左对齐处理。

如何实现
继承UICollectionViewFlowLayout创建子类，并实现相关的方法，如：

1、- (void)prepareLayout;
2、- (CGSize)collectionViewContentSize；
3、- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect；

具体怎么编码实现
代码示例如下：
1、UICollectionViewFlowLayout子类
.h文件

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@protocol CollectionLayoutDelegate <NSObject>

/// 获取item高度
- (CGFloat)widthForItemIndexPath:(NSIndexPath *)indexPath AndCollectioinView:(UICollectionView *)collectionView;

@end

@interface CollectionLayout : UICollectionViewFlowLayout

@property (nonatomic, weak) id<CollectionLayoutDelegate>delegate;
/// 视图宽
@property (nonatomic, assign) CGFloat layoutWidth;
/// 自适应collection的大小（默认NO）
@property (nonatomic, assign) BOOL autoContentSize;

@end

.m文件

#import "CollectionLayout.h"

@interface CollectionLayout ()

// 临时保存item的总宽度
@property (nonatomic, assign) CGFloat columnWidth;
// 记录一共有多少行
@property (nonatomic, assign) NSInteger columnNumber;
// 保存每一个item x y w h
@property (nonatomic, retain) NSMutableArray *arrForItemAtrributes;
// 保存item总数
@property (nonatomic,assign) NSUInteger numberOfItems;
// 保存每个item的X值
@property (nonatomic, assign) CGFloat xForItemOrigin;
// 保存每个item的Y值
@property (nonatomic, assign) CGFloat yForItemOrigin;

@end


@implementation CollectionLayout

// 准备布局
- (void)prepareLayout
{
    [super prepareLayout];
    //
    self.columnWidth = self.sectionInset.left;
    self.columnNumber = 0;
    self.arrForItemAtrributes = [NSMutableArray array];
    self.xForItemOrigin = self.sectionInset.left;
    self.yForItemOrigin = self.sectionInset.top;
    
    // 获取item的个数
    self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
    /** 为每个item确定LayoutAttribute属性,同时将这些属性放入布局数组中 */
    for (int i = 0; i < self.numberOfItems; i++) {
        /** 确定每个Item的indexPath属性 */
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        /** 确定每个item的origin的x,y值 */
        /** 确定每个Item的frame属性,同时确定了每个Item的LayoutAttribute,放入到了布局属性数组中 */
        [self setFrame:indexPath];
    }
}

// 计算contentView的大小
- (CGSize)collectionViewContentSize
{
    // 获取collectionView的Size
    CGSize contentSize = self.collectionView.frame.size;
    // 最大高度+bottom
    CGFloat height = self.sectionInset.top + (self.estimatedItemSize.height * (self.columnNumber + 1)) + (self.minimumLineSpacing * self.columnNumber) + self.sectionInset.bottom;
    contentSize.height = height;
    
    // 设置collectionView的大小自适应
    if (self.autoContentSize) {
        self.collectionView.frame = CGRectMake(self.collectionView.frame.origin.x, self.collectionView.frame.origin.y, contentSize.width, contentSize.height);
    }
    
    return contentSize;
}

// 返回每一个item的attribute
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    // 返回每一个item的Attribute
    return self.arrForItemAtrributes;
}

// 设置属性和frame
- (void)setFrame:(NSIndexPath *)indexPath
{
    // 设置Item LayoutAttribute 属性
    UICollectionViewLayoutAttributes *layoutArr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    // 获取item的高
    CGFloat itemWidth = 0;
    if (_delegate && [_delegate respondsToSelector:@selector(widthForItemIndexPath:AndCollectioinView:)]) {
        // 使用代理方法获取item的高
        itemWidth = [_delegate widthForItemIndexPath:indexPath AndCollectioinView:self.collectionView];
    }
    //之前item的宽总和 + 当前item的宽 + 间距 < 屏幕总款
    if (self.columnWidth + itemWidth + self.minimumInteritemSpacing < self.layoutWidth) {
        // 设置x
        self.xForItemOrigin = self.columnWidth;
        self.columnWidth += itemWidth + self.minimumInteritemSpacing;
    } else {
        self.xForItemOrigin = self.sectionInset.left;
        // 如果宽度超过屏幕从新计算宽度
        self.columnWidth = self.sectionInset.left + itemWidth + self.minimumInteritemSpacing;
        self.columnNumber++;
    }
    // 计算是第几行 乘以高度
    self.yForItemOrigin = self.sectionInset.top + (self.estimatedItemSize.height + self.minimumLineSpacing) * self.columnNumber;
    
    // 设置frame
    layoutArr.frame = CGRectMake(self.xForItemOrigin, self.yForItemOrigin, itemWidth, self.estimatedItemSize.height);
    // 放入数组
    [self.arrForItemAtrributes addObject:layoutArr];
}

@end

2、UICollectionViewCell子类
.h文件

#import <UIKit/UIKit.h>
#import "TextModel.h"

static CGFloat cellOrigin = 20;
static CGFloat cellWidth = 50;
static CGFloat cellHeight = 32;

@interface CollectionCell : UICollectionViewCell

@property (nonatomic, strong) TextModel *model;
//
@property (nonatomic, copy) void (^itemClick)(void);

/// cell动态宽
+ (CGFloat)widthCell:(NSString *)text;

@end

.m文件

#import "CollectionCell.h"

@interface CollectionCell ()

@property (nonatomic, strong) UIButton *button;

@end

@implementation CollectionCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = UIColor.clearColor;
        //
        [self setUI];
    }
    return self;
}

#pragma mark - 视图

- (void)setUI
{
    self.button = UIButtonInitializeWithTitle(self.contentView, CGRectZero, 0, nil, nil, kColorBlack, kColorBlue, kColorBlue, UIFontAutoSize(14), self, @selector(selectedButtonClick:));
    self.button.viewRadius(self.height / 2).viewBorder(1, kColorLineBorder);
    //
    [self.button mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.bottom.right.mas_equalTo(0);
    }];
}

- (UICollectionViewLayoutAttributes *)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes{
    
    UICollectionViewLayoutAttributes *attributes = [super preferredLayoutAttributesFittingAttributes:layoutAttributes];
    CGRect rect = self.button.frame;
    rect.size.width = self.model.nameWidth;
    rect.size.height =cellHeight;
    attributes.frame = rect;
    return attributes;
    
}

#pragma mark - 交互

- (void)selectedButtonClick:(UIButton *)button
{
    button.selected = YES;
    button.userInteractionEnabled = NO;
    self.button.viewBorder(1, kColorBlue);
    //
    self.model.selected = button.selected;
    if (self.itemClick) {
        self.itemClick();
    }
}

/// cell动态宽
+ (CGFloat)widthCell:(NSString *)text
{
    CGFloat width = [text widthForFont:UIFontAutoSize(14)];
    width += 20;
    width = (width <= 50 ? 50 : width);
    return width;
}

#pragma mark - setter/getter

- (void)setModel:(TextModel *)model
{
    _model = model;
    //
    CGFloat width = _model.nameWidth;
    if (width <= 0.0) {
        width = [[self class] widthCell:_model.name];
        model.nameWidth = width;
    }
    
    //
    NSString *text = _model.name;
    [self.button setTitle:text forState:UIControlStateNormal];

    if (_model.selected) {
        self.button.selected = YES;
        self.button.userInteractionEnabled = NO;
        self.button.viewBorder(kLineBorderWidth, kColorBlue);
    } else {
        self.button.selected = NO;
        self.button.userInteractionEnabled = YES;
        self.button.viewBorder(kLineBorderWidth, kColorLineBorder);
    }
    
    DLog(@"cell width = %.2f", width);
}

@end

3、UICollectionView子类
.h文件

#import <UIKit/UIKit.h>
#import "TextModel.h"
#import "CollectionCell.h"

NS_ASSUME_NONNULL_BEGIN

@interface Collection : UICollectionView

@property (nonatomic, strong) NSArray *array;
@property (nonatomic, copy) void (^cellClick)(NSIndexPath *indexPath);

@end

.m文件

#import "Collection.h"

@interface Collection () <UICollectionViewDelegate, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout>

@property (nonatomic, strong) NSIndexPath *previousIndexPath;

@end

@implementation Collection

- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout
{
    self = [super initWithFrame:frame collectionViewLayout:layout];
    if (self) {
        self.backgroundColor = UIColor.clearColor;
        //
        [self registerClass:CollectionCell.class forCellWithReuseIdentifier:@"CollectionCell"];
        self.delegate = self;
        self.dataSource = self;
    }
    return self;
}

#pragma mark - 交互

#pragma mark - UICollectionViewDelegate, UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.array.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
   CollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CollectionCell" forIndexPath:indexPath];
    
    TextModel *model = self.array[indexPath.row];
    cell.model = model;

    kSelfWeak;
    cell.itemClick = ^{
        if (weakSelf.previousIndexPath) {
            if ([weakSelf.previousIndexPath isEqual:indexPath]) {
                return ;
            }
            TextModel *previousModel = weakSelf.array[weakSelf.previousIndexPath.row];
            previousModel.selected = NO;
            [collectionView reloadItemsAtIndexPaths:@[weakSelf.previousIndexPath]];
        }
        weakSelf.previousIndexPath = indexPath;
        //
        if (weakSelf.cellClick) {
            weakSelf.cellClick(indexPath);
        }
    };

    return cell;
}

- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath
{
    return NO;
}

#pragma mark - setter

- (void)setArray:(NSArray *)array
{
    _array = array;
    //
    [_array enumerateObjectsUsingBlock:^(id  _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        TextModel *model = (TextModel *)obj;
        if (model.selected) {
            self.previousIndexPath = [NSIndexPath indexPathForRow:idx inSection:0];
            *stop = YES;
        }
    }];
    [self reloadData];
}

@end

4、实现

// 实例化
CollectionLayout *layout = [[CollectionLayout alloc] init];
layout.scrollDirection  = UICollectionViewScrollDirectionVertical;
layout.layoutWidth = self.width;
layout.delegate = self;
layout.autoContentSize = YES;
layout.minimumLineSpacing = cellOrigin / 2;
layout.minimumInteritemSpacing =cellOrigin / 2;
layout.sectionInset = UIEdgeInsetsMake(cellOrigin, cellOrigin, cellOrigin,cellOrigin);
layout.estimatedItemSize = CGSizeMake(cellWidth, cellHeight);

//
_collectionView = [[BCollection alloc] initWithFrame:CGRectMake(0, 0, self.width, (self.height / 2)) collectionViewLayout:layout];
[self addSubview:_collectionView];
_collectionView.backgroundColor = kColorWhite;

// 回调
kSelfWeak;
_collectionView.cellClick = ^(NSIndexPath * _Nonnull indexPath) {
            if (weakSelf.selecteClick) {
                weakSelf.selecteClick(indexPath);
            }
};

// 赋值
collectionView.array = _array;

// layout代理方法
- (CGFloat)widthForItemIndexPath:(NSIndexPath *)indexPath AndCollectioinView:(UICollectionView *)collectionView
{
    TextModel *model = self.array[indexPath.row];
    CGFloat width = model.nameWidth;
    if (width <= 0) {
        width = [CollectionCell widthCell:model.name];
        model.nameWidth = width;
    }
    return width;
}

编码注意事项

1、layout必须实现属性：layoutWidth，minimumLineSpacing，minimumInteritemSpacing，sectionInset，estimatedItemSize，delegate。主要用于设置cell的大小，内边距和间距。
2、cell必须实现方法- (UICollectionViewLayoutAttributes *)preferredLayoutAttributesFittingAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes，用于改变cell的大小。