UICollectionView如何根据cell内UIButton文本宽度动态设置每个cell宽度

核心问题定位 #

1. 文本尺寸计算逻辑错误：调用sizeWithAttributes:时传入NULL作为参数，没有指定和button匹配的字体属性，计算得到的文本宽度与实际渲染宽度不符
2. 流布局配置错误：minimumLineSpacing设置为CGFLOAT_MAX，会导致布局系统错误压缩cell宽度以满足过大的行间距要求
3. 按钮抗压缩优先级未配置：按钮内部的文本Label默认抗压缩优先级较低，在尺寸不足时会优先被压缩

具体修复步骤 #

1. 修正文本尺寸计算逻辑 #

替换原sizeForItemAtIndexPath方法的实现，使用和button完全一致的字体计算文本宽度，同时使用ceil对宽度取整避免像素截断问题：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    NSString *text = self.menuBarArray[indexPath.item];
    // 此处字体需和button使用的字体完全一致，若自定义过button字体请替换为对应参数
    UIFont *buttonFont = [UIFont systemFontOfSize:17];
    CGSize maxCalculateSize = CGSizeMake(CGFLOAT_MAX, 40); // 高度固定为cell高度40，宽度无限制
    CGRect textBoundingRect = [text boundingRectWithSize:maxCalculateSize
                                                 options:NSStringDrawingUsesLineFragmentOrigin
                                              attributes:@{NSFontAttributeName: buttonFont}
                                                 context:nil];
    // 左右总边距30，宽度向上取整避免非整数像素导致的模糊或布局偏移
    CGSize finalSize = CGSizeMake(ceil(textBoundingRect.size.width) + 30, 40);
    return finalSize;
}

2. 修正UICollectionViewFlowLayout配置 #

调整布局参数，移除错误的行间距配置：

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
layout.minimumLineSpacing = 0; // 单行横向滚动，垂直行间距设为0即可
layout.minimumInteritemSpacing = 8; // 相邻cell的水平间距，可根据需求调整数值
layout.estimatedItemSize = CGSizeMake(60, 40); // 增加预估尺寸提升布局性能

3. 优化自定义Cell配置 #

给按钮增加水平方向抗压缩优先级，避免文本被意外压缩，同时配置按钮内边距和cell的总边距对应：
在MenuBarCell的setViews方法中添加以下代码：

// 给按钮文本Label设置最高级抗压缩优先级，避免水平方向被压缩
[_button.titleLabel setContentCompressionResistancePriority:UILayoutPriorityRequired
                                                    forAxis:UILayoutConstraintAxisHorizontal];
// 按钮内部左右各15边距，和cell尺寸计算时加的30总边距对应
[_button setContentEdgeInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
// 可选：将按钮高度约束从小于等于改为固定值，避免垂直方向布局偏移
[_button.heightAnchor constraintEqualToConstant:30].active = true;

内容的提问来源于stack exchange，提问作者Zhou Haibo