UICollectionView单元格自适应问题：Instagram克隆3列布局失效

Hey there! Let's get that UICollectionView sorted out so you've got 3 perfectly sized square cells per row, just like Instagram. I bet the issue with your original code comes down to missing spacing calculations or using the wrong width reference—let's break this down step by step.

First, Make Sure You're Set Up Correctly #

Before diving into code, double-check these basics:

• Your collectionView is using a UICollectionViewFlowLayout (either in code or Storyboard).
• Your view controller conforms to UICollectionViewDelegateFlowLayout (don't forget to add this to your class declaration!).
• The collectionView's delegate and dataSource are connected to your view controller (either via Storyboard or code).

The Correct Size Calculation Code #

Here's a robust implementation that accounts for spacing, insets, and the actual available width of the collectionView (not just the parent view):

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    // Guard against non-flow layouts to avoid crashes
    guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else {
        return CGSize(width: 100, height: 100) // Fallback size
    }
    
    // Grab existing spacing values (you can also hardcode these if needed)
    let interItemSpacing = flowLayout.minimumInteritemSpacing
    let sectionInsets = flowLayout.sectionInset
    
    // Calculate the total available width for our 3 cells
    // We subtract left/right insets, plus 2 gaps (since 3 cells have 2 spaces between them)
    let availableWidth = collectionView.bounds.width 
                        - sectionInsets.left 
                        - sectionInsets.right 
                        - (2 * interItemSpacing)
    
    // Divide by 3 to get each cell's width, use floor() to avoid fractional pixel issues
    let itemWidth = floor(availableWidth / 3)
    
    // Instagram cells are square, so height matches width
    return CGSize(width: itemWidth, height: itemWidth)
}

Why Your Original Code Might Have Failed #

• Using self.view.frame.size.width instead of collectionView.bounds.width: The collectionView might have insets, or the parent view could include safe areas that reduce the actual usable width for cells.
• Forgetting spacing: If you didn't subtract the minimum inter-item spacing and section insets, your cells would be too wide and overflow the screen, causing layout breaks.
• Not confirming the layout type: If your collectionView uses a custom layout, the sizeForItemAt method won't behave as expected—hence the guard clause in the code above.

Extra Tip for Rotation Support #

If you want the cells to adjust when the device rotates, add this to your view controller to refresh the layout:

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    collectionView.collectionViewLayout.invalidateLayout()
}

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