Làm cách nào để căn chỉnh UICollectionViewCells theo chiều dọc trong UICollectionView?

Question

Tôi có các ô có chiều cao khác nhau trên một cuộn ngang UICollectionView dường như phân phối đồng đều các ô theo chiều dọc để lại khoảng trống giữa các ô và tôi muốn căn chỉnh chúng và có khoảng trống ở cuối mỗi cột.

Answer 1

Tôi tưởng tượng bạn đang sử dụng UICollectionViewFlowLayout để bố cục các ô của bạn. Tôi không nghĩ rằng bạn có thể làm điều này với một bố cục dòng chảy. Bạn có thể phải viết một lớp con tùy chỉnh của UICollectionViewLayout để căn chỉnh các cạnh trên của mỗi ô.

Đây không phải là một giải pháp rất đẹp, nhưng việc buộc tất cả các ô của bạn phải có cùng kích thước và thiết lập các ràng buộc trong ô của bạn để căn chỉnh nội dung lên đầu? Điều này có thể mô phỏng giao diện bạn đang thực hiện mà không phải phân lớp UICollectionViewLayout.

Answer 2

Tôi đã mở rộng UICollectionViewFlowLayout được cung cấp cho UICollectionView của mình. Phần ghi đè sau đây đã làm việc cho tôi.

#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 3

tôi chuyển này để Xamarin/MonoTouch cho dự án của tôi và nghĩ rằng nó có thể hữu ích

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; 
    } 

}