Wie kann Sie vertikal ausrichten UICollectionViewCells in einem UICollectionView?

Habe ich Zellen unterschiedlicher Höhe auf einem horizontal-scrolling - UICollectionView erscheint gleichmäßig zu verteilen und die Zellen vertikal verlassen leeren Raum zwischen den Zellen, und ich würde gerne nach oben ausrichten und die variable leeren Raum am unteren Rand jeder Spalte.

InformationsquelleAutor Everus | 2013-06-10
  1. 13

    Erweiterte ich mein UICollectionViewFlowLayout zur Verfügung gestellt, um meine UICollectionView. Die folgende vorrangige arbeitete für mich.

    #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
    • Guter Ausgangspunkt für weitere Ableitungen aus dem layout. Arbeitete wie ein Charme!
    • Ich habe versucht, diese Lösung aber nicht für mich arbeiten, mit statischen Zelle Breite und dynamische Zellenhöhe. Durchflussrichtung horizontal ist.
    InformationsquelleAutor Everus
  2. 4

    Ich portiert diese auf Xamarin/MonoTouch für mein Projekt und dachte, es könnte nützlich sein,

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

}
    • diese Art von Werken (der Portierung auf OSX), aber meine items gehen nicht in die nächste Zeile
    • es gibt einige rekursive Schlechtigkeit in diesem code...
    InformationsquelleAutor Chris Koiak
  3. 1

    Ich denke, Sie sind mit einem UICollectionViewFlowLayout, um das layout Ihrer Zellen. Ich glaube nicht, dass Sie können dies tun, mit einem flow-layout. Vermutlich haben Sie sich zum schreiben eines benutzerdefinierten Unterklasse der UICollectionViewLayout zum ausrichten der oberen Kanten von jeder Zelle.

    Dies ist nicht eine sehr schöne Lösung, aber was Sie erzwingen, dass alle Ihre Zellen die gleiche Größe und Einrichtung die Einschränkungen in Ihrer Zelle zur Ausrichtung der Inhalte an der Spitze? Dies könnte zu simulieren das Aussehen Sie gehen, ohne Unterklasse UICollectionViewLayout.

    InformationsquelleAutor Alex
Schreibe einen Kommentar