如何让UICollectionView每行适配3个Cell且在各屏幕正常显示？

嘿，我来帮你排查下这个布局异常的问题～

问题核心原因 #

你直接用screenWidth / 3.0计算cell宽度的问题在于，没有考虑UICollectionViewFlowLayout默认的内边距和item间距。默认情况下，UICollectionViewFlowLayout会自带sectionInset（section的内边距）和minimumInteritemSpacing（item之间的水平间距），这两部分会额外占用屏幕宽度，导致3个cell的总宽度加上这些间距后超过屏幕宽度，系统会自动把部分cell挤到下一行，最终出现你看到的错乱布局。

正确的解决代码 #

我们需要先把这些额外的间距和内边距从可用宽度中扣除，再计算cell宽度，代码示例如下：

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    // 强转成FlowLayout（确保你的布局是FlowLayout类型）
    UICollectionViewFlowLayout *flowLayout = (UICollectionViewFlowLayout *)collectionViewLayout;
    // 获取item之间的水平间距
    CGFloat interitemSpacing = flowLayout.minimumInteritemSpacing;
    // 获取section的内边距
    UIEdgeInsets sectionInset = flowLayout.sectionInset;
    
    // 计算可用宽度：用collectionView自身的宽度（而非屏幕宽度，适配性更强）减去左右内边距和两个间距（3个cell有2个间隔）
    CGFloat availableWidth = CGRectGetWidth(collectionView.bounds) - sectionInset.left - sectionInset.right - (2 * interitemSpacing);
    // 平均分配给3个cell，用floor避免小数导致的宽度溢出
    CGFloat cellWidth = floor(availableWidth / 3.0);
    
    return CGSizeMake(cellWidth, cellWidth);
}

额外注意事项 #

• 优先使用collectionView.bounds.size.width：你的collectionView可能不是全屏显示（比如有导航栏、tabBar，或者自定义了约束），用collectionView自身的宽度能保证计算更准确。
• 检查Cell内部约束：确保TrendingCell里的imageView和contentView四边对齐（leading、trailing、top、bottom约束），这样cell大小变化时，imageView才能自适应，避免图片显示异常。
• 统一配置布局属性：如果需要自定义间距和内边距，可以在初始化collectionView时直接设置：

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.minimumInteritemSpacing = 8;
flowLayout.sectionInset = UIEdgeInsetsMake(8, 8, 8, 8);
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];

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