如何为每行2个/3个单元格的Collection View设置单元格内间距？

Hey there, sorry to hear this has been bugging you for two weeks—let’s get this sorted out!

Since you’ve already locked in your item size (153x241), the solution boils down to adjusting the collection view’s layout spacing and insets to center each row of 3 cells perfectly. Here’s how to do it:

Step 1: Calculate Balanced Section Insets #

The core idea is to split the leftover horizontal space (after accounting for 3 items) equally between the left and right edges of the collection view. This pushes the entire row of cells to the center.

Step 2: Configure the Flow Layout #

You can apply these settings either directly in viewDidLoad or via collection view delegate methods (great if you have multiple collection views to handle).

Option 1: Set Layout in viewDidLoad #

If you’re using a UICollectionViewFlowLayout, grab a reference to it and update its properties:

override func viewDidLoad() {
    super.viewDidLoad()
    
    guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    
    let itemWidth: CGFloat = 153
    let totalItemsWidth = itemWidth * 3
    let inset = (collectionView.bounds.width - totalItemsWidth) / 2
    
    flowLayout.itemSize = CGSize(width: itemWidth, height: 241)
    flowLayout.minimumInteritemSpacing = 0 // Remove extra gaps between items in the same row
    flowLayout.minimumLineSpacing = 16 // Adjust this for vertical spacing between rows (optional)
    flowLayout.sectionInset = UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset)
}

Option 2: Use Delegate Methods (For Multiple Collection Views) #

If you have two collection views that need this same centered layout, use delegate methods to target each one (e.g., via tag):

// Keep your existing sizeForItemAt method
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: 153, height: 241)
}

// Add this to set centered insets
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    let itemWidth: CGFloat = 153
    let totalItemsWidth = itemWidth * 3
    let inset = (collectionView.bounds.width - totalItemsWidth) / 2
    
    // Target both collection views (adjust tags as needed)
    if collectionView.tag == 1 || collectionView.tag == 2 {
        return UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset)
    }
    return .zero // Default for other collection views
}

// Ensure no extra gaps between items
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0
}

Handle Layout Changes (Like Rotation) #

If your collection view’s width can change (e.g., device rotation), recalculate the insets in viewWillLayoutSubviews to keep cells centered:

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()
    guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    
    let itemWidth: CGFloat = 153
    let totalItemsWidth = itemWidth * 3
    let inset = (collectionView.bounds.width - totalItemsWidth) / 2
    
    flowLayout.sectionInset = UIEdgeInsets(top: 0, left: inset, bottom: 0, right: inset)
    flowLayout.invalidateLayout()
}

Adjust minimumLineSpacing to match your design’s vertical gap needs—this value is totally customizable. That should get your cells sitting perfectly centered in both collection views!

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