iOS开发：如何移除CollectionView行间距及单元格顶部多余空白？

Hey there, the issue you're facing is super common—by default, UICollectionViewFlowLayout centers items vertically within their row's allocated space when cells have different heights. That's why shorter cells have extra top padding. Let's fix this with two straightforward approaches:

Approach 1: Subclass UICollectionViewFlowLayout (Recommended) #

This is the cleanest way to encapsulate the alignment logic. Create a custom flow layout that pins items to the top of their row:

public class TopAlignedFlowLayout : UICollectionViewFlowLayout
{
    public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
    {
        var attributesArray = base.LayoutAttributesForElementsInRect(rect);
        
        foreach (var attributes in attributesArray)
        {
            if (attributes.RepresentedElementCategory == UICollectionElementCategory.Cell)
            {
                var frame = attributes.Frame;
                // Grab the first item's attributes in the same row
                var firstItemInRow = LayoutAttributesForItem(attributes.IndexPath);
                if (firstItemInRow != null)
                {
                    // Align current item's top to match the first item's top
                    frame.Y = firstItemInRow.Frame.Y;
                    attributes.Frame = frame;
                }
            }
        }
        
        return attributesArray;
    }
}

Then swap your existing layout with this custom one in your ViewController:

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    
    // Set up the top-aligned layout
    var topAlignedLayout = new TopAlignedFlowLayout();
    topAlignedLayout.MinimumInteritemSpacing = 8; // Your existing item spacing
    topAlignedLayout.MinimumLineSpacing = 12; // Your existing row spacing
    topAlignedLayout.ItemSize = UICollectionViewFlowLayout.AutomaticSize; // Critical for variable heights
    grid.CollectionViewLayout = topAlignedLayout;
    
    // Rest of your setup
    string[] words = { "one", "two", "three", "four", "five", "six seven eight", "nine ten eleven twelve thirteen", "the quick brown fox"};
    grid.DataSource = ...;
}

Approach 2: Adjust Attributes via Delegate #

If you prefer not to subclass, modify item attributes directly in the delegate method. First, make sure your ViewController implements IUICollectionViewDelegateFlowLayout:

public partial class TestVc : UIViewController, IUICollectionViewDelegateFlowLayout
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        grid.Delegate = this;
        // Rest of your setup...
    }
    
    // Your existing spacing delegate methods
    public nfloat GetMinimumInteritemSpacingForCollectionView(UICollectionView collectionView, UICollectionViewLayout layout, nint section)
    {
        return 8; // Your item spacing value
    }
    
    public nfloat GetMinimumLineSpacingForCollectionView(UICollectionView collectionView, UICollectionViewLayout layout, nint section)
    {
        return 12; // Your row spacing value
    }
    
    // Add this method to force top alignment
    public UICollectionViewLayoutAttributes GetLayoutAttributesForItem(UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
    {
        var attributes = (UICollectionViewLayoutAttributes)layout.LayoutAttributesForItem(indexPath).Copy();
        if (attributes == null) return attributes;
        
        // Find the first item in the current row
        var firstItemIndex = indexPath;
        while (firstItemIndex.Item > 0)
        {
            var prevIndex = NSIndexPath.FromItemSection(firstItemIndex.Item - 1, firstItemIndex.Section);
            var prevAttrs = layout.LayoutAttributesForItem(prevIndex);
            if (prevAttrs.Frame.Y != attributes.Frame.Y) break;
            firstItemIndex = prevIndex;
        }
        
        // Pin current item's top to the first item's top
        attributes.Frame = new CGRect(attributes.Frame.X, attributes.Frame.Y, attributes.Frame.Width, attributes.Frame.Height);
        return attributes;
    }
}

Critical Final Step: Ensure Cell Content is Top-Aligned #

Even if you fix the layout, if your cell's content is centered vertically, you won't see the desired effect. Make sure your cell's subviews are pinned to the top of the content view. For example:

public override void AwakeFromNib()
{
    base.AwakeFromNib();
    // Pin a label to the top, leading, trailing (let height grow with content)
    label.TopAnchor.ConstraintEqualTo(ContentView.TopAnchor, 8).Active = true;
    label.LeadingAnchor.ConstraintEqualTo(ContentView.LeadingAnchor, 8).Active = true;
    label.TrailingAnchor.ConstraintEqualTo(ContentView.TrailingAnchor, -8).Active = true;
    label.HeightAnchor.ConstraintGreaterThanOrEqualToConstant(20).Active = true; // Minimum height
}

Also, double-check that you've set ItemSize to UICollectionViewFlowLayout.AutomaticSize so the layout calculates each cell's height correctly based on its content.

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