如何垂直alignmentUICollectionView中的UICollectionViewCells？

我有一个水平滚动的UICollectionView上的不同高度的单元格，看起来垂直均匀地分配单元格，留下单元格之间的空白空间，我想顶部alignment它们，并在每列的底部有variables的空白空间。

Answer 1

我扩展了我的UICollectionViewFlowLayout提供给我的UICollectionView。 以下重写为我工作。

 #import "TopAlignedCollectionViewFlowLayout.h" const NSInteger kVerticalSpacing = 10; @implementation TopAlignedCollectionViewFlowLayout - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSArray* attributesToReturn = [super layoutAttributesForElementsInRect:rect]; for (UICollectionViewLayoutAttributes* attributes in attributesToReturn) { if (nil == attributes.representedElementKind) { NSIndexPath* indexPath = attributes.indexPath; attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame; } } return attributesToReturn; } - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes* currentItemAttributes = [super layoutAttributesForItemAtIndexPath:indexPath]; UIEdgeInsets sectionInset = [(UICollectionViewFlowLayout *)self.collectionView.collectionViewLayout sectionInset]; if (indexPath.item == 0) { CGRect frame = currentItemAttributes.frame; frame.origin.y = sectionInset.top; currentItemAttributes.frame = frame; return currentItemAttributes; } NSIndexPath* previousIndexPath = [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section]; CGRect previousFrame = [self layoutAttributesForItemAtIndexPath:previousIndexPath].frame; CGFloat previousFrameRightPoint = previousFrame.origin.y + previousFrame.size.height + kVerticalSpacing; CGRect currentFrame = currentItemAttributes.frame; CGRect strecthedCurrentFrame = CGRectMake(currentFrame.origin.x, 0, currentFrame.size.width, self.collectionView.frame.size.height ); if (!CGRectIntersectsRect(previousFrame, strecthedCurrentFrame)) { CGRect frame = currentItemAttributes.frame; frame.origin.y = frame.origin.y = sectionInset.top; currentItemAttributes.frame = frame; return currentItemAttributes; } CGRect frame = currentItemAttributes.frame; frame.origin.y = previousFrameRightPoint; currentItemAttributes.frame = frame; return currentItemAttributes; } @end 

Answer 2

我把这个移植到我的项目Xamarin / MonoTouch，并认为它可能是有用的

 public class TopAlignedCollectionViewFlowLayout : UICollectionViewFlowLayout { const int VerticalSpacing = 10; public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(RectangleF rect) { var attributesToReturn = base.LayoutAttributesForElementsInRect(rect); foreach (UICollectionViewLayoutAttributes attributes in attributesToReturn) { if (attributes.RepresentedElementKind == null) { var indexPath = attributes.IndexPath; attributes.Frame = this.LayoutAttributesForItem(indexPath).Frame; } } return attributesToReturn; } public override UICollectionViewLayoutAttributes LayoutAttributesForItem(NSIndexPath indexPath) { var currentItemAttributes = base.LayoutAttributesForItem(indexPath); UIEdgeInsets sectionInset = ((UICollectionViewFlowLayout) this.CollectionView.CollectionViewLayout).SectionInset; if (indexPath.Item == 0) { var frame1 = currentItemAttributes.Frame; frame1.Y = sectionInset.Top; currentItemAttributes.Frame = frame1; return currentItemAttributes; } var previousIndexPath = NSIndexPath.FromItemSection(indexPath.Item - 1, indexPath.Section); var previousFrame = this.LayoutAttributesForItem(previousIndexPath).Frame; var previousFrameRightPoint = previousFrame.Y + previousFrame.Size.Height + VerticalSpacing; var currentFrame = currentItemAttributes.Frame; var strecthedCurrentFrame = new RectangleF(currentFrame.X, 0, currentFrame.Size.Width, this.CollectionView.Frame.Size.Height); if (!previousFrame.IntersectsWith(strecthedCurrentFrame)) { var frame = currentItemAttributes.Frame; frame.Y = frame.Y = sectionInset.Top; currentItemAttributes.Frame = frame; return currentItemAttributes; } RectangleF frame2 = currentItemAttributes.Frame; frame2.Y = previousFrameRightPoint; currentItemAttributes.Frame = frame2; return currentItemAttributes; } } 

Answer 3

我想象你正在使用UICollectionViewFlowLayout来布局你的单元格。 我不认为你可以做这个stream布局。 您可能必须编写UICollectionViewLayout的自定义子类来alignment每个单元格的顶部边缘。

这不是一个非常漂亮的解决scheme，但是如何强制所有的单元格大小相同，并在单元格中设置约束来将内容alignment到顶部？ 这可以模拟你要去的外观，而不必子类UICollectionViewLayout。